01
Colour
Nineteen tokens. Every one carries a light and a dark value except White. That one is deliberate: it labels brand buttons.
Background Primary
page surface
Foreground Tertiary
hairlines + borders
Brand Primary
4.98 / 4.94 · links, button fills
Foreground Primary
14.09 / 14.09 · text
Background Secondary
raised surface
Foreground Secondary
7.48 / 6.34 · text
White
5.41 on Brand Primary · labels on brand fills
Sticky Note
sticky notes · alpha
Brand Secondary
2.64 / 2.44 · DECORATIVE ONLY, never text
Success
5.00 / 7.95 · status text
Brand Ink
6.29 / 6.31 · body links
Ruler Line
ruler ticks · alpha
Warning
5.32 / 6.70 · status text
Brand Ember
3.11 / 6.52 · large text + rules only
Atlas Sheet
icon-atlas surface
Atlas Grid
icon-atlas grid · alpha
Sticker Shadow
elevation · alpha
Scrim
labels over imagery · alpha
Surface Translucent
the dock bar · alpha
02
Type
Two brand faces and one hand. Space Grotesk carries the interface; Alpha Lyrae is the pixel voice; Caveat is the annotation.
Display
The quick brown fox jumps over the lazy dog
54px · h1
Heading 1
The quick brown fox jumps over the lazy dog
54px → 48px → 32px · h1
Heading 2
The quick brown fox jumps over the lazy dog
32px · h2
Heading 3
The quick brown fox jumps over the lazy dog
26px · h3
Heading 4
The quick brown fox jumps over the lazy dog
22px · h4
Heading 5
The quick brown fox jumps over the lazy dog
18px · h5
Heading 6
The quick brown fox jumps over the lazy dog
16px · h6
Subhead
The quick brown fox jumps over the lazy dog
24px · p
Lead
The quick brown fox jumps over the lazy dog
18px · p
Body
The quick brown fox jumps over the lazy dog
16px · p
Contents
The quick brown fox jumps over the lazy dog
15px · p
Note
The quick brown fox jumps over the lazy dog
14px · p
Note - Pixel
The quick brown fox jumps over the lazy dog
14px · p
Card Title
The quick brown fox jumps over the lazy dog
16px · h3
Caption
The quick brown fox jumps over the lazy dog
12px · p
Meta Label
The quick brown fox jumps over the lazy dog
11px · p
Annotation
The quick brown fox jumps over the lazy dog
21px · p
03
Spacing & radius
A 4pt scale, and six radii. Measured against the ruler running down the left edge of every page on this site.
4
8
16
24
32
48
64
2px
hairline
8px
small
16px
card
24px
panel
40px
container
999px
pill
04
Layout
One measure, three breakpoints, and a nav that is the same 72px everywhere.
Page measure
max-width: 1440
Centred. Anything sticky must share this box or it aligns to the window instead.
Page padding
0 24 0 48
The 48 left is the ruler’s 22 plus 26. That is why the logo sits at x=48.
Breakpoints
1200 / 810 / 390
Desktop ≥1200, Tablet 810–1199.98, Phone ≤809.98.
Nav
72px, sticky 22
The tab band sticks at 94, directly beneath it.
05
Motion & icons
One spring for everything that moves, and every code component carries its own reduced-motion guard.
Spring
spring-duration 0.4s 0.2 0s. The project’s one transition, on every ground frame.
Icons
Twelve vector sets are installed. Lucide is the only one in use; the other eleven are unused weight.
