Skip to content

Design Tokens

The single source of truth for all visual decisions. Defined in tokens.css.

Colors

Every color token has independently tuned light and dark values. Dark mode is not an inversion — it is a separate palette.

--color-bg

Page background

light
dark

--color-bg-subtle

Alternating sections

light
dark

--color-fg

Primary text

light
dark

--color-fg-muted

Secondary text

light
dark

--color-muted

Tertiary text

light
dark

--color-border

Quiet borders

light
dark

--color-surface

Card surfaces

light
dark

--color-accent

Links, one interactive

light
dark

--color-accent-hover

Accent hover

light
dark

--color-code-bg

Code background

light
dark

Contrast Ratios

WCAG compliance for key color pairings. All text-on-background combinations meet or exceed AA requirements.

Pairing Light Dark WCAG
fg on bg 14.2:1 12.8:1 AAA
fg-muted on bg 5.8:1 5.4:1 AA
muted on bg 3.9:1 3.4:1 AA Large
accent on bg 5.2:1 6.1:1 AA
fg on surface 13.5:1 12.8:1 AAA

Spacing Scale

Deliberately generous. The upper values provide the breathing room that distinguishes editorial layouts from dashboard UIs.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
--space-10
128px

Content Widths

The three content widths are the most critical layout tokens. Prose is always constrained to the reading width.

--content-reading: 46rem (~740px) — prose, essays, articles
--content-standard: 72rem (~1152px) — project pages, wider layouts
--content-wide: 88rem (~1408px) — outer container, navigation

Borders, Radius & Motion

Border Radius

--radius-sm
0.25rem

--radius-md
0.5rem (max)

--radius-none
0

Motion

--motion-fast 120ms hover, focus
--motion-normal 180ms theme transitions
--motion-easing ease-out all transitions