One system, measured.

01 — Brand

Systems that work for everyone — not just the few.

Nonbreakingspace is a small Manchester studio working across front-end development, interaction design and brand-led web. The promise is constant: creative, accessible and inclusive by design.

02 — Foundations

03 — Wordmark

Clear space & minimum size

Misuse

• ×Don’t stretch the proportions

• ×Don’t condense or squeeze it

• ×Don’t rotate or set it at an angle

• ×Don’t recolour outside navy / ivory

• ×Don’t add shadows, outlines or effects

• ×Don’t place it on busy or low-contrast grounds

04 — Colour

Ramps

Every colour in the system comes off one of three ramps, built in OKLCH. Each ramp holds a single hue at a near-constant chroma, so its steps differ only in lightness — which is what lets both themes walk the same ladders from opposite ends. Two of the three are the brand’s neutrals: there is no grey here, only a cool family and a warm one, and that is where the palette’s temperature comes from.

Named colours

The colours the brand says out loud. Each is an alias pinned to a ramp step — it introduces no new value, it just keeps the vocabulary sayable.

• Navy

  #0c253f

  --color-navy

  → --color-navy-800

  Display ink and the single dark close. Also the selection + focus ring.

• Ink

  #091d31

  --color-ink

  → --color-navy-900

  Body copy on the ivory ground. ≈16:1 — well clear of AA.

• Ivory

  #fff9ed

  --color-ivory

  → --color-sand-50

  The page ground — a warm off-white broadsheet stock.

• Cream

  #f4ebdb

  --color-cream

  → --color-sand-100

  The one recessed tonal band (Approach). Use sparingly.

• Warm tan

  #c9ad94

  --color-warm

  → --color-tan-500

  The only accent. Draws the link underline on hover/focus — never used for text.

• Taupe — strong

  #665e4e

  --color-muted-strong

  → --color-sand-700

  Essential small text: eyebrows, labels, descriptors. ≈6:1 on ivory.

• Taupe — quiet

  #766d5d

  --color-muted

  → --color-sand-600

  The quietest tier — decorative indices and ticks. ≈4.9:1 on ivory.

Semantic tokens & themes

Components reference role tokens — never a ramp step, never a named colour. Each theme points those roles at different rungs: Light descends the navy ramp for type and sits on sand‑50; Dark inverts it, standing the type on the sand ramp over navy grounds. Dark is a re‑point, not a second palette — every value below already exists above. It follows the operating system by default, with a masthead toggle to override that is remembered across visits.

• RoleLightDark
• --surfacesand-50navy-950
• --surface-recessedsand-100navy-900
• --surface-contrastnavy-800navy-800
• --textnavy-900sand-200
• --text-strongnavy-800sand-100
• --text-mutedsand-600sand-400
• --text-muted-strongsand-700sand-300
• --text-on-contrastsand-50sand-100
• --accenttan-500tan-400

Contrast

Measured ratios for every text-on-ground pairing the system ships, in both themes. AA needs 4.5:1 for body text; AAA, 7:1. The tan accent clears neither on ivory — which is exactly why it only ever draws a line, never sets type. The rule holds in Dark even though the ratio there is comfortable.

• BodyInk on ivoryLight16.3 : 1AAA
• DisplayNavy on ivoryLight14.8 : 1AAA
• LabelsTaupe strong on ivoryLight6.1 : 1AA
• IndicesTaupe quiet on ivoryLight4.9 : 1AA
• ApproachInk on creamLight14.4 : 1AAA
• CloseIvory on navyLight14.8 : 1AAA
• AccentTan on ivoryLight2.0 : 1Decorative
• BodyBody on the dark groundDark12.4 : 1AAA
• DisplayDisplay on the dark groundDark15.9 : 1AAA
• LabelsLabels on the dark groundDark9.7 : 1AAA
• IndicesIndices on the dark groundDark7.0 : 1AAA
• ApproachBody on the recessed bandDark11.2 : 1AAA
• CloseDisplay on the closeDark13.1 : 1AAA
• AccentTan on the dark groundDark10.0 : 1Decorative

05 — Typography

Display scale — Fraunces

• Proud of it

  Class

  .t-cta

  Token

  --t-cta

  Axes

  opsz 144 · wght 360

  Size

  2.5 → 6rem

• Made with passion

  Class

  .t-hero

  Token

  --t-hero

  Axes

  opsz 144 · wght 360

  Size

  2.25 → 5.75rem

• Clarity, restraint and care

  Class

  .t-statement

  Token

  --t-statement

  Axes

  opsz 72 · wght 360

  Size

  1.75 → 4.25rem

• Think · Shape · Build

  Class

  .t-heading

  Token

  --t-heading

  Axes

  opsz 40 · wght 380

  Size

  1.75 → 3.5rem

• Interaction Design

  Class

  .t-cap

  Token

  --t-cap

  Axes

  opsz 40 · wght 380

  Size

  1.5 → 2.75rem

• hello@nonbreakingspace.co.uk

  Class

  .t-email

  Token

  --t-email

  Axes

  opsz 40 · wght 380

  Size

  1.125 → 1.875rem

Functional roles — Inter

• Body

  --t-body

  wght 380 · line-height 1.6 · the reading voice

• Eyebrow

  0.75rem

  wght 500 · 0.22em tracking · uppercase — the only caps

• Meta label

  0.8125rem

  wght 500 · 0.12em tracking · uppercase descriptors

• Row index

  0.75rem

  tabular lining numerals — two-digit foliation

• Legal

  0.6875rem

  line-height 1.5 · colophon fine print

Links

06 — Layout & grid

The measure

Vertical rhythm

• Statement7 → 13rem
• Dark close6 → 11rem
• Section5 → 9rem

Shown at each step’s maximum. All vertical space resolves from this short scale of clamps.

Tokens

• --gutter

  clamp(1.5rem, 6vw, 9rem)

  Page inline padding (.wrap).

• --content-max

  1280px

  Maximum measure for the centred column.

• --pad-section

  clamp(5rem, 12vh, 9rem)

  Default vertical section rhythm.

• --pad-statement

  clamp(7rem, 16vh, 13rem)

  The breathing room around the statement.

• --pad-contact

  clamp(6rem, 14vh, 11rem)

  The dark close.

• --grid-gap

  clamp(1.5rem, 4vw, 3.5rem)

  Primary multi-column grid gap.

• --grid-gap-tight

  clamp(1.5rem, 3vw, 2.5rem)

  Card galleries (misuse, swatches).

• --stack-gap

  clamp(1rem, 2.5vh, 1.5rem)

  Vertical figure-stack gap.

• --rule-light

  color-mix(in srgb, var(--color-ink) 12%, transparent)

  Hairline on ivory — 1px borders, never shadows.

• --rule-dark

  color-mix(in srgb, var(--color-ivory) 15%, transparent)

  Hairline on navy and on the dark grounds.

07 — Iconography

The system is almost icon-free — type and hairlines carry the meaning. The few marks that exist share one hand: a 24px field, a single hairline weight, round caps and joins, drawn in currentColor so they inherit the surrounding text.

Field

24 × 24

Stroke

1.6px

Caps & joins

round

Colour

currentColor

Connective marks

• &AmpersandThe wordmark’s hand — Fraunces’ characterful form.
• —Em dashThe studio aside; the page’s main connective.
• ·Middle dotSeparates inline meta and the legal line.
• →ArrowChange and direction — “0 → 100%”.

08 — Motion

• Easing

  cubic-bezier(0.22, 1, 0.36, 1) — every transition uses this single curve.

• Reveal

  Fade + 1.25rem rise over 0.7s, once per element as it scrolls in.

• Wipe

  The wordmark performs a single left-to-right clip-path wipe over 0.9s — written once.

• Restraint

  All motion is JS-gated and honours prefers-reduced-motion: reduce.

09 — Voice & accessibility

Lexicon

• We buildnot “We deliver solutions”Plain verbs over corporate nouns.
• For everyonenot “For users”People, not segments — where a person will do.
• Accessible by defaultnot “Accessibility-first™”No buzzwords, no trademarks.
• We read everythingnot “We’ll circle back”Human and direct; we mean it.
• A small studionot “A boutique agency”Honest about our scale.

10 — Applications

Where the system meets the world. The same tokens and the one mark, applied consistently across every touchpoint — from the address bar to the share card.

NonbreakingspaceManchester, UK — 14:07 BST