Design system
The system.
The tokens this site is built from, rendered live from source. Not a static PDF, the same values the code compiles. This page is the proof of the method.
01Colour: monochrome
No accent colour. The work is the only colour.
Ink#09090B
Primary background
bg-ink · text-ink
Surface#18181B
Elevated cards, secondary surfaces
bg-surface · text-surface
Muted#27272A
Tertiary surfaces, hover states
bg-muted · text-muted
Border#3F3F46
Dividers, structural lines
bg-border · text-border
Silver#A1A1AA
Secondary text, labels, metadata
bg-silver · text-silver
Bright Silver#D4D4D8
Primary body text on dark
bg-bright-silver · text-bright-silver
White#FAFAFA
Headings, CTAs, emphasis
bg-white · text-white
Pure White#FFFFFF
Maximum contrast, primary CTA fill, logo
bg-pure-white · text-pure-white
Functional: UI only, never in branding
Success#22C55E
Form success states
bg-success · text-success
Error#EF4444
Validation errors
bg-error · text-error
Warning#F59E0B
Caution states
bg-warning · text-warning
02Typography
Inter & JetBrains Mono. Weight and scale carry the hierarchy.
Displayclamp 40 to 128px · 700 · -0.04em
Precision, evolved
H1clamp 28 to 72px · 700 · -0.03em
Section heading
H2clamp 24 to 48px · 700 · -0.02em
Subsection heading
H3clamp 18 to 24px · 700 · -0.01em
Card title
Body Largeclamp 18 to 22px · 300 · 0
Descriptions and manifesto text set at a comfortable measure.
Body16px · 400 · 0
Standard paragraph copy with a 1.6 line-height for readability at length.
Label10px · 600 · 0.12em
SECTION MARKER
03Spacing & radii
Custom spacing
space-184.5rem
space-225.5rem
space-307.5rem
Radii
rounded-sm · 4px
rounded-md · 6px
rounded-lg · 8px
04The mark: Architectural Slab E
The 68% middle bar is the fingerprint. It never changes.
Vertical spine10 × 130
Top & bottom bars140 × 10
Middle bar (68%)95 × 10
Gap height50 (equal)
A system is only real if it ships.
Open a dialogue