Design tokens
Explore the shared colours, typography, spacing, and motion settings that keep every Super Genius Labs page consistent and readable.
Updated
Tokens live in lib/tokens.ts and are mirrored as CSS custom properties in app/globals.css. In August 2026 the file lost every export that no longer had a consumer (the old WebGL chapter scenes), so what remains is the set the site actually uses.
Persimmon palette
Warm charcoal surfaces use one orange accent, #bf4022, in both themes. Some key names (cyan, magenta, violet) remain for compatibility. Every orange alias resolves to the same colour.
| Group | Role |
|---|---|
void 975 to 700 | Canvas and surface charcoals, dark theme |
royal 900 to 700 | Warm elevated surfaces |
cyan 700 to 300 + glow | Brand orange |
magenta 800 to 400 + glow | Compatibility aliases for brand orange |
chrome 50 to 500 + metal | Neutral greys for the light theme and metal accents |
teal 400 | Success signal |
Primary buttons pair orange with cream #f8f2ed, giving 4.76:1 contrast. Small accent text uses --accent-ink in CSS or text-accent-readable in Tailwind. This resolves to cream on dark surfaces and orange on light surfaces.
Type
The three type scales are display, text, and mono. Display sizes use fluid clamp() values with tight tracking. Body line heights range from 1.35 to 1.6. The smallest mono style is uppercase with 0.06em tracking. Archivo is the display face, Hanken Grotesk is the body face, and JetBrains Mono is used for labels and metrics.
Spacing and radii
Spacing follows a 4px grid. Steps 0 to 128 map to n × 4px. Sections use 40 to 64px of padding per side, depending on viewport width. Related content immediately after a page hero uses 24px of top padding.
Radius tokens range from 6px (sm) to 32px (2xl), with full for circular shapes.
Glows
Tinted box-shadow stacks (cyan-xs through dual-xl, plus bezel-inner) for focus rings and the few glowing surfaces. Coral-tinted, never a colored drop shadow on a card.
Durations
| Token | Value | Intent |
|---|---|---|
imperceptible | 40 ms | Sub-perception lerp |
instant | 80 ms | Discrete state change |
quick | 180 ms | Micro-interactions |
base | 320 ms | Standard transitions, modals |
slow | 560 ms | Choreographed multi-element moves |
cinematic | 1200 ms | Hero moments |
Never invent a timing value inline. Round to the scale.
Easings
out (cubic-bezier(0.22, 1, 0.36, 1)) for anything entering, inOut for moves between two positions, spring (tension 280, friction 28, critically damped) reserved for press-recess only. Never linear for UI motion, never bouncy springs anywhere.
Related
- The motion system. How these durations and easings are applied.