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, so what we build works for everyone.
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
Components reference role tokens — --surface,
--text, --text-strong,
--accent, --rule and friends
— never the raw palette above. The default Light theme maps them onto these
swatches; Dark re-points them to a warm-light-on-deep-navy set of the same family.
Dark follows the operating system by default, with a masthead toggle to override that
is remembered across visits.
Measured ratios for every text-on-ground pairing the system ships. AA needs 4.5:1 for body text; AAA, 7:1. The tan accent clears neither — which is exactly why it only ever draws a line, never sets type.
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
rgb(7 26 45 / 0.12)
Hairline on ivory — 1px borders, never shadows.
--rule-dark
rgb(255 249 237 / 0.15)
Hairline on navy.
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