Type leads the way
The page is set, not decorated. Fraunces leads; Inter does the functional work.
Brand Guidelines — The Measured Index
One system, measured.
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.
Foundations
Restraint is the device
One accent, one dark close, one italic gesture per view — nothing unearned stays.
Hairlines, not boxes
Structure comes from 1px rules and generous space, never cards or containers.
Wordmark
Do
- Draw it in
currentColorso it inherits the text colour. - Give it clear space of at least the height of the ampersand bowl on every side.
- Let it run the single written-once wipe on first view; static everywhere after.
Don't
- Recolour it outside navy / ivory, or place it on a busy ground.
- Stretch, rotate, outline or add effects — it is a single calligraphic path.
- Set it below ~120px wide, where the entry stroke loses its weight.
Colour
Semantic tokens & themes
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.
Typography
Fraunces
The expressive serif. Variable optical-size (opsz) axis, set explicitly per step. Italic is reserved for a single accent word per view.
Inter
The clean grotesque foil. Body copy, eyebrows, labels and every functional role. Tabular lining numerals for indices.
Display scale — Fraunces
-
Proud of it
-
Made with passion
-
Clarity, restraint and care
-
Think · Shape · Build
-
Interaction Design
-
hello@nonbreakingspace.co.uk
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
Inline links carry a drawn tan underline that wipes in on hover and keyboard focus — the page’s only use of the accent.
Layout & space
-
--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.
-
--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.
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.
Voice & accessibility
Voice
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.
Accessibility
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.