Kinetika Design System · v2.5.0 · codename ir0nm0nk
The design system
Oxidized, honest, accessible. tokens.json is the source of truth — machine-readable and AX-friendly — and tokens.css is generated from it through a WCAG AA contrast gate (122 contrast checks across both themes). Try the theme toggle, top right.
Foundations
Warmth, not coolness
Warm-dark by default. Light mode sits on an Alloy White base — a disciplined warm off-white, not a cool-grey inversion. Copper oxidizes to patina; iron rusts to verdigris. The palette is named after what metals actually become.
Color
Surfaces & text
Mineral accents
Each accent is an oxidation product: patina (copper), verdigris (full patina), azurite blue, chrysocolla teal, manganese violet, garnet rose. Every family meets 4.5:1 for text on its paired background.
Status
Typography
Three voices, one system
Cormorant Garamond — display · the soul of the system
Honest by default
Syne — interface · the structure of the system
Interface labels & structure
DM Mono — technical · the honesty of the system
const honest = true; // 0123456789
Spacing
An 8-point rhythm
Motion
Settle like cooling metal
Entrances settle, they don't bounce. Every utility composes a keyframe with a --motion-* recipe, and prefers-reduced-motion turns them off entirely.
Components
Built on the tokens
The React component layer (Button, Badge, Card) registers on window.Kinetika and reuses these same token-bound utility classes. Below is the plain-CSS expression.
Full token reference and source live in the repo. tokens.json → build-tokens.mjs → tokens.css, gated on WCAG AA.