Design tokens
The token set behind supergeniuslabs.ai after the 2026-08 purge: the Persimmon palette, type scales, spacing, radii, glows, durations, and easings.
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.
Palette: Persimmon
Warm charcoals and a single coral accent family. Some key names (cyan, magenta, violet) survive from the retired neon skin so existing consumers keep compiling; their values are all coral now. A name is not a hue.
| Group | Role |
|---|---|
void 975 to 700 | Canvas and surface charcoals, dark theme |
royal 900 to 700 | Warm elevated surfaces |
cyan 700 to 300 + glow | The accent ramp; --accent is 500, --accent-ink is the text-safe step |
magenta 800 to 400 + glow | Secondary coral, used sparingly |
chrome 50 to 500 + metal | Neutral greys for the light theme and metal accents |
teal 400 | Success signal |
Rule from the accessibility work: --accent is a fill, not a text colour. Small accent text uses --accent-ink (CSS) or a -glow token (Tailwind); the fill measures 6.33:1 on charcoal but 3.79:1 on the light bone canvas.
Type
Three scales: display (2xl to xs, fluid clamp() sizes with tight tracking), text (3xl to xs, body line heights 1.35 to 1.6), and mono (xl to xs; mono.xs is uppercase with 0.06em tracking, the "mono label" used everywhere). Faces: Archivo for display, Hanken Grotesk for text, JetBrains Mono for mono.
Spacing and radii
Spacing is a 4px grid: steps 0 to 128 map to n × 4px. Radii: sm 6, md 10, lg 16, xl 24, 2xl 32, full.
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.