Manchester, UK
Brand Guidelines — The Measured Index
A warm-ivory editorial broadsheet where type does almost everything and restraint is the device. Two families, one accent, hairline rules. Everything on this page is driven by the same design tokens the site ships — change a token, change the 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.
A non-breaking space ( ) is the invisible
character that stops words breaking apart at the end of a line. It is small,
unseen, and quietly holds things together — which is exactly the work. The
studio is named for the detail most people never notice, but everyone feels.
We start from the people most easily left out — readable type, generous contrast, motion that switches off, focus you can always see. Set the floor high and everyone rises with it.
Like the character we are named for, the system holds the page together without being noticed. Space does the structuring; a hairline shows only where it earns its place.
Two families, one accent and a single set of tokens carry everything from the address bar to the share card. Change a token, and the whole brand moves with it.
currentColor so it inherits the text colour.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
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.
Navy
hue 252
The cool family. Display ink, reading copy, and all three dark grounds.
Sand
hue 82
The warm family. Page grounds and every muted text tier. The system has no grey.
Tan
hue 64
The accent — the only ramp with real chroma. Draws lines; never sets type.
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.
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.
--surface
sand-50
navy-950
--surface-recessed
sand-100
navy-900
--surface-contrast
navy-800
navy-800
--text
navy-900
sand-200
--text-strong
navy-800
sand-100
--text-muted
sand-600
sand-400
--text-muted-strong
sand-700
sand-300
--text-on-contrast
sand-50
sand-100
--accent
tan-500
tan-400
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.
The expressive serif. Variable optical-size (opsz) axis, set explicitly per step. Italic is reserved for a single accent word per view.
The clean grotesque foil. Body copy, eyebrows, labels and every functional role. Tabular lining numerals for indices.
Proud of it
Made with passion
Clarity, restraint and care
Think · Shape · Build
Interaction Design
hello@nonbreakingspace.co.uk
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
Inline links carry a drawn tan underline that wipes in on hover and keyboard focus — the page’s only use of the accent.
--content-max,
with --gutter inline padding that grows from 1.5rem to 9rem
with the viewport. There is no multi-column page grid — structure comes from the
measure and the hairlines.
Shown at each step’s maximum. All vertical space resolves from this short scale of clamps.
--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.
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.
cubic-bezier(0.22, 1, 0.36, 1) — every transition uses this single curve.
Fade + 1.25rem rise over 0.7s, once per element as it scrolls in.
The wordmark performs a single left-to-right clip-path wipe over 0.9s — written once.
All motion is JS-gated and honours prefers-reduced-motion: reduce.
Plain, considered, British. Short declarative lines; one idea each. Sentence case everywhere except the tracked eyebrow. Never breezy, never salesy — the studio reads everything and means it.
WCAG 2.2 AA is the floor, not the goal. All text clears 4.5:1.
Motion is gated behind prefers-reduced-motion,
focus is always visible, and the wordmark is decorative unless labelled.
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.
Colophon
Set in Fraunces & Inter. Built from tokens.
Start the conversation
Nonbreakingspace Ltd · Company no. 10833071
Manchester, UK · © Copyright 2026 · Brand guidelines