Design system
Every token, in one route.
Everything on this site is built from the tokens and components below. Change them in app/globals.css and the whole template follows — no utility classes to unpick.
Colour
Ten tokens carry the identity.
Teal is the product signal, clay is drift, breach is an open exception. Everything else is ground, ink and hairline.
--deck#052320Dark sections, footer, hero--ink#0e2320Body text on light ground--mist#e8edebPage ground--paper#ffffffPanels and cards--teal#0d7d71Primary action, light ground--beam#35d6baPrimary signal on the deck--clay#bc6038Drift, warnings, second accent--breach#bc3b3bException and error states--slate#566a66Secondary text--hair#c8d4d0Hairlines and panel bordersTypography
Familjen Grotesk, Public Sans, IBM Plex Mono.
A sharp Nordic grotesque for display, a utility sans for reading, and a monospace that carries every number in the product UI.
Display XL / 600
clamp(40px, 6.1vw, 84px) · −0.042em
Kept on the line
Display L / 600
clamp(31px, 3.9vw, 54px) · −0.03em
Drift, before it is a breach
Heading / 600
clamp(21px, 2.1vw, 28px)
The exception desk
Body / 400
16px · 1.62
Almost every recovery that is possible at all is possible early. The window you keep is usually the one you noticed was slipping.
Mono data / 500
IBM Plex Mono · tabular
+63m · 98.4% · VL-4830
Kicker / 500
11px · 0.14em · uppercase
Operating picture
Motif
The tick rule.
A measurement rule runs through the site: under section indexes, along commitment tracks, across the hero grid. It is what makes the layout read as an instrument rather than a brochure.
.tickrule
.tickrule.accent
.tickrule.on-deck
Components
Controls, chips and states.
Buttons
On the deck
Chips and states
Links
Icons
Form controls
Brand
Marks and monograms.
The Verolane mark is a lane rule with a V whose vertex lands exactly on the line. Customer marks and author monograms are generated geometry — no third-party logos and no stock photography anywhere in this template.
Primary mark
On the deck
Customer marks
Monograms
Rhythm
Spacing and layout.
Base unit
8px
Every gap token is a multiple.
Section padding
clamp(84px, 8vw, 148px)
--section
Shell width
1320px
--shell, gutter clamp(20px, 3.4vw, 46px)
Index rail
76px
--rail, collapses below 900px
Panel border
1px
--hair, never a radius above 0
Motion
0.18s – 0.6s
--ease cubic-bezier(.22,.75,.24,1)