Style guide

Primitives

The raw values: hex values, rem steps, font stacks, curve definitions. Nothing on the site references these directly except the semantic layer; if a component needs one, it asks through an alias.

Colour ·, Direction A (warm)

Both palettes ship. The Warm / Cool switch in the navigation flips the whole site between them, and every semantic token resolves against whichever set is live.

Colour ·, Direction B (cool)

Spacing scale

Nine steps, each drawn at true size. The semantic taxonomy assigns these to directions; the scale itself carries no meaning about where a gap goes.

• --space-1 0.25rem ·, 4px
• --space-2 0.5rem ·, 8px
• --space-3 0.75rem ·, 12px
• --space-4 1rem ·, 16px
• --space-6 1.5rem ·, 24px
• --space-8 2rem ·, 32px
• --space-12 3rem ·, 48px
• --space-16 4rem ·, 64px
• --space-24 6rem ·, 96px

Type families

• Aa --font-sans Hanken Grotesk Variable Hanken Grotesk, the workhorse voice
• Aa --font-serif Season Serif Season Serif, the licensed display face, headlines
• Aa --font-mono-ui JetBrains Mono Variable JetBrains Mono: eyebrows, labels, table headers, key caps
• Aa --font-mono-data JetBrains Mono Variable JetBrains Mono: numerals, dates, token names, hex, code

Type sizes

• Aa --text-display clamp(2.25rem, 3.7vw, 4.25rem) ·, 36–68px
• Aa --text-heading clamp(1.875rem, 3vw, 3rem) ·, 30–48px
• Aa --text-body clamp(1.125rem, 0.75rem + 0.4167vw, 1.25rem) ·, 18–20px
• Aa --text-small clamp(0.9375rem, 0.75rem + 0.2083vw, 1rem) ·, 15–16px
• Aa --text-caption clamp(0.8125rem, 0.625rem + 0.2083vw, 0.875rem) ·, 13–14px

Weights

• Grotesk --weight-body 380 body, lead, small, meta
• Mono --weight-label 400 mono labels, captions, table headers
• Serif --weight-heading 400 serif headings (h1–h3)
• Grotesk --weight-action 450 buttons, segmented controls, metric numerals, list item names
• Grotesk --weight-strong 550 wordmark

Leading

• The quick brown fox
  jumps over the lazy dog --leading-tight 1.08 page headline (H1)
• The quick brown fox
  jumps over the lazy dog --leading-snug 1.12 headings (H2, H3), list item names
• The quick brown fox
  jumps over the lazy dog --leading-relaxed 1.6 body, lead, small

Tracking

• TRACKING --tracking-tight -0.01em wordmark
• TRACKING --tracking-heading 0.02em serif headings (h1–h3)
• TRACKING --tracking-ui 0.04em sentence-case mono in the controls
• TRACKING --tracking-wide 0.08em mono labels and table headers

Border widths

• --border-width-sm 1px
• --border-width-md 2px
• --border-width-lg 3px

Radii

• --radius-sm 2px
• --radius-md 4px
• --radius-pill 999px fully rounded ends: pills, scrollbar track and thumb

Motion

Hover or focus a row and the dot crosses its track at that token’s duration, on the standard curve. The Reduce motion switch (and the OS preference) stills them.

• --motion-fast 150ms hovers, small state changes
• --motion-standard 300ms panels, disclosure
• --motion-slow 450ms large moves, page-level shifts
• --motion-press 80ms the press, and only the press: under --motion-fast so it lands under the finger
• --ease-standard cubic-bezier(0.25, 0.1, 0.25, 1) the one easing curve, everywhere

Press

How far a control travels when you hold it down. Press and hold the square. The matching duration is --motion-press in the list above.

• --press-scale 0.96 buttons, segments, icon buttons: anything thumb-sized

Density

--density is a unitless multiplier: 1 by default and 0.7 when the Compact switch in the navigation is on. Every semantic spacing token runs through it, which is why the whole page tightens with one switch. Flip it and watch the spacing bars in the Semantics view resize.

Semantics

Semantic tokens give components names they can rely on, like text-strong, instead of raw values. Change the theme and the tokens change with it, without changing the components.

Colour

Swatches use the live custom properties, so they always reflect the active theme and palette. The token name updates with them. Use the controls in the navigation to switch modes and see the colours change.

• --color-surface-page → --paper-100
• --color-surface-raised → --paper-50
• --color-surface-band → --cream-100
• --color-text-strong → --ink-900
• --color-text-default → --grey-700
• --color-text-subtle → --grey-500
• --color-link-underline → --grey-400
• --color-border-strong → --grey-500
• --color-border-default → --line-200
• --color-border-subtle → --line-100
• --color-accent-default → --rust-600
• --color-focus-ring → --rust-600

Spacing

Six concepts replace a flat spacing scale, in two families. inset is space inside a box and compiles to padding; gap is space between boxes and compiles to gap. Each family has a both-axis token and two axis-specific ones. Every token uses the primitive scale and responds to the density setting, so the bars below show the actual size. Read more about the approach on spacing tokens.

Text styles

Each type role in type.css combines the font family, size, weight, line height, letter spacing and colour into one class, much like a Figma text style. The examples use the actual type styles, so you can see exactly what each one looks like. Apply a .type-* class directly, or use one of the combined selectors.

Interaction states

Four states, each carried by a different property, so they can't be confused. Rest uses the component's own colour. Hover uses the accent (--color-accent-default) because here it signals a change of state. Focus is the ring, and nothing else. Pressed is geometry: the control scales inward on --press-scale, over --motion-press.

Two things don't scale. Links and text-only controls have no box to scale, and moving text reads as a rendering fault, so they keep the underline and accent on hover. Cards have the opposite problem: even a small scale reads as the page reflowing, so they use a directional cue instead.

Reduced motion keeps the press but removes the animation. The control still responds; it just arrives rather than travelling. Less movement doesn't mean less feedback.

Every control below is the real one, out of global.css. Press and hold any of them. The segmented control and the switch are the exceptions, and the table says why.

Every pressable on the site uses the same mechanism. It lives in one place: the pressable class in global.css. Components use that class unless they need different timing, in which case they use the same two lines and the same tokens.