Design system · live

Styleguide

Single source of truth for tokens. All values render from apps/web/src/styles/tokens.css; change a value there and this page updates everywhere.

Logo

Color tokens

Each swatch shows the light + dark hex, plus the WCAG contrast ratio against ink. Aim for AA Normal (≥ 4.5) on body text, AA Large (≥ 3.0) on ≥ 18pt or ≥ 14pt-bold.

L
D
--color-bg

Light #F4EFE6 10.69

Dark #0E1419 15.59

L
D
--color-surface

Light #FBF8F2 11.55

Dark #161D24 14.30

L
D
--color-surface-2

Light #ECE5D6 9.77

Dark #1D262F 12.89

L
D
--color-ink

Light #223843 1.00

Dark #F0EBE0 1.00

L
D
--color-ink-muted

Light #4A4F55 1.48

Dark #A6ABB1 1.95

L
D
--color-ink-subtle

Light #6B7079 2.46

Dark #767C84 3.54

L
D
--color-border

Light #D9D3C7 8.22

Dark #243140 11.12

L
D
--color-border-strong

Light #B8B0A0 5.69

Dark #324354 8.55

L
D
--color-accent

Light #D77A61 3.99

Dark #F08661 2.13

L
D
--color-accent-strong

Light #B75B46 2.68

Dark #F4A282 1.71

L
D
--color-secondary

Light #3F6E76 2.16

Dark #6FA3A6 2.37

L
D
--color-secondary-strong

Light #2C545C 1.48

Dark #8FBFC1 1.70

L
D
--color-highlight

Light #D9A24F 5.38

Dark #E5B872 1.55

Type ramp

--fs-5xl energy:landscapes 5xl
--fs-4xl energy:landscapes 4xl
--fs-3xl energy:landscapes 3xl
--fs-2xl energy:landscapes 2xl
--fs-xl energy:landscapes xl
--fs-lg energy:landscapes lg
--fs-base energy:landscapes base
--fs-sm energy:landscapes sm
--fs-xs energy:landscapes xs

Families

Display — Space Grotesk Variable

Sans — Inter Variable. The quick brown fox jumps over the lazy dog. 0123456789.

Mono — JetBrains Mono Variable. const energy = await sun.harvest();

Spacing scale

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

Radius

--radius-sm 2px
--radius-md 4px
--radius-lg 8px
--radius-xl 16px

Motion

All animations honor prefers-reduced-motion: reduce.

Bracket primitives

BracketFrame · always
BracketFrame · hover me