Every design decision on this site starts here. Color, type, spacing, radius, and motion — defined once, used everywhere. This is what makes the system a system.
A cool, restrained palette. One accent that does the heavy lifting — everything else supports it.
| Token | Swatch | Light | Dark | Usage |
|---|---|---|---|---|
| --color-accent | #3a7fa8 | #00e5cc | CTAs, active states, highlights, pills | |
| --color-surface | #f6f8fb | #0e1318 | Page background, section backgrounds | |
| --color-surface-secondary | #edf2f7 | #161d24 | Mode bar, token panel, impact bar | |
| --color-surface-elevated | #ffffff | #1a2330 | Cards, modals, photography cards | |
| --color-text-primary | #0e1318 | #e0f0fa | Headings, body copy, active nav | |
| --color-text-secondary | #3d5870 | #7a9bb5 | Body text, nav links, card descriptions | |
| --color-text-tertiary | #7a9bb5 | #3d5870 | Labels, breadcrumbs, meta text | |
| --color-border | #d4e0ea | #1e2d3d | Dividers, card borders, nav borders |
Three typefaces, three jobs. Barlow makes the statement. Overpass does the work. DM Serif adds the human touch.
| Token | Demo | Value | Size / Weight | Usage |
|---|---|---|---|---|
| --font-display | Aa | Barlow Condensed | 800 · 22–64px · lh 0.95 | H1, section titles, stat labels |
| --font-heading | Aa | Overpass | 600 · 15–18px · lh 1.2 | Card titles, section subheads, tab labels |
| --font-editorial | Aa | DM Serif Display | italic · 14–22px · lh 1.4 | Quotes, lede text, hero subtext |
| --font-body | Aa | Overpass | 400 · 13–14px · lh 1.75 | Body copy, nav links, descriptions |
| --font-mono | Aa | ui-monospace | 400 · 10–12px · lh 1.5 | Labels, breadcrumbs, token names, tabs |
Built on an 8pt grid. Generous by design — whitespace is not wasted space, it's part of the system.
| Token | Demo | Value | Usage |
|---|---|---|---|
| --space-xs | 4px | Pill gaps, swatch margins | |
| --space-sm | 8px | Small gaps, pill padding, mode bar | |
| --space-md | 16px | Component internal spacing, token rows | |
| --space-lg | 24px | Card body padding, nav gaps | |
| --space-xl | 40px | Section padding, page horizontal padding | |
| --space-2xl | 64px | Hero padding, major section rhythm | |
| --space-3xl | 96px | Page-level bottom padding |
Subtle softness across the system. Not sharp enough to feel clinical, not round enough to feel playful.
| Token | Demo | Value | Usage |
|---|---|---|---|
| --radius-sm | 4px | Inputs, tok-tag labels, code blocks | |
| --radius-md | 8px | Buttons, impact cards, unlock button | |
| --radius-lg | 12px | Cards, token panel, stack panel, photo items | |
| --radius-full | 99px | Pills, badges, filter tags, hero badge |
Elastic by default. The spring easing is the primary curve — interactions should feel like they have a little life in them.
| Token | Value | Usage |
|---|---|---|
| --ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Card hover lift, mode toggle, nav token button |
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Photo scale on hover, entrance animations |
| --ease-subtle | cubic-bezier(0.4, 0, 0.2, 1) | Color transitions, opacity fades, theme switch |
| --duration-fast | 150ms | Hover color changes, link transitions |
| --duration-base | 300ms | Card lift, panel transitions, photo overlay |
| --duration-slow | 500ms | Photo scale, page-level motion |