SPKENLab
Spoken
Atlas
The Spoken design system

Tokens
& rules.

Everything Spoken renders comes out of this file. Copy the tokens intosrc/styles.css, import the components, and follow the rules.

01 · Color
ink
#0A0B0A
--ink
surface
#131513
--surface
surface-2
#1B1D1B
--surface-2
lime
#E0E840
--lime
hairline
rgba(255,255,255,.08)
--hairline
glass
rgba(255,255,255,.04)
--glass
02 · Type
Display · Anton

Pride of
ownership.

font-display · uppercase · tracking-[-0.01em] · leading-[0.9]
Body · Inter Variable

Setup culture is what happens when you keep the same object long enough to notice its edges. Spoken hands you the language to talk about the things you already know by touch.

Supporting copy · 13.5px · 1.55 leading · foreground/60..75

500mscubic-bezier(.2,.8,.2,1)hairlineglass
03 · Surfaces
Surface
Cards, sheets, side rails.
Glass
Floating labels, HUD, over-image chips.
Hairline only
Interior divisions, inline structure.
04 · Motion — try it

Hover moves the button toward your cursor with a damped spring. On touch, magnetism is off.

05 · Rules
  1. 01Never hardcode color hex values in components — use `bg-lime`, `text-foreground`, `hairline`, `glass`.
  2. 02`glass` = `bg-white/5 backdrop-blur-xl border border-white/[.08]`. Never write `-webkit-backdrop-filter` by hand.
  3. 03Hairlines are 1px `rgba(255,255,255,.08)`. Use `.hairline`, `.hairline-b`, `.hairline-t`, etc.
  4. 04Display type: Anton (`font-display`). Sentence case, tight leading (0.9), uppercase. Sparingly.
  5. 05Body type: Inter Variable (`font-sans`). 13.5–16px, 1.55 leading, `text-foreground/70..85` for support copy.
  6. 06Motion easing: `cubic-bezier(.2,.8,.2,1)`. Durations 400–900ms for reveals, 40–200ms for micro.
  7. 07Cap DPR at 1.75 for every WebGL/Three canvas. Pause all rAF loops when offscreen or tab-hidden.
  8. 08Honor `prefers-reduced-motion` fully: freeze shaders, disable parallax, bypass Lenis.
  9. 09Touch replaces hover: magnetic/tilt/spotlight become tap-to-focus.
  10. 10Mobile ≤ 768px: bottom-sheets, edge-to-edge. Desktop ≥ 1024px: sticky-split hero + side rail.
Spoken · v2026.07 · every rule earns its place