Tokens
Every color, size, radius, shadow, and duration is a CSS custom property on :root. Dark mode overrides those values under :root[data-theme="dark"]. Components read tokens — they never hardcode values.
Animation
Spring easing for entrances. Standard ease for micro-interactions. Four duration tiers from snappy to deliberate.
cubic-bezier(0.16, 1, 0.3, 1) — overshoots slightly, feels aliveease-out — clean decelerationease — general-purpose transitionsColors
A warm neutral base with a cobalt brand, green reserved strictly for success/trust states, orange-red danger, and categorical data colors. All hues share a muted, slightly desaturated quality. Toggle the theme in the sidebar to see dark values.
Keep accents semantic, not decorative — every color should mean something:
- Green is reserved for trust.
--successmeans a verified-good state only — attested, approved, safe, healthy, running. Never spend green on chrome, actions, or decoration; that rarity is what makes the signal pop. - Cobalt carries identity + interaction. Primary actions, links, focus, and selection use
--brand/--accent(same cobalt hue); info notices use--info. Solid fill reads as action, tinted container reads as info. --warningis for caution only. Don't use the amber on neutral categories, filters, or counts — that reads as a false alarm. Use--text-secondary/--text-tertiaryfor plain labels.- Brand logomark →
--logo. Your brand color in light, ink in dark — a saturated mark glows uncomfortably on dark surfaces. (Override--logoto your brand's hex.)
Radius
Six steps from sharp to pill. --radius (10px) is the default card radius; --radius-md (8px) is the default container radius.
Shadows
Subtle, layered shadows — never solid black, always transparent washes. Shadow tokens lift to higher opacity in dark mode to stay legible against the dark surface.
Spacing
A tight scale built for dense UI. Px-named so the value is always obvious. Used for padding, gap, margin, and any other length.
Typography
Bricolage Grotesque for headings, display, and numerics. DM Sans for all body and UI text. Both loaded from Google Fonts in a single request.