Design System
Live reference for colour tokens, material systems, and component variants. Every swatch and preview reads directly from CSS variables, so what you see is always what the code produces.
Toggle the theme using the header control to see how tokens adapt across light, dark, and dusk modes. Click any colour swatch to copy its value.
Colour
A luminance-first OKLCH palette designed with perceptually uniform lightness curves, authored as hex for IDE colour-picker DX. Identity families carry the visual personality; status families serve universal functional recognition.
Identity Palettes
Full 50-950 ladders with curated hex values. These define how the site feels — calm graphite neutrals, confident sapphire brand, energetic lagoon accents, and expressive amethyst for dusk.
Graphite (Neutral)
Sapphire (Brand)
Lagoon (Accent)
Amethyst (Dusk Brand)
Status Anchors
Compact 5-step anchors for functional feedback. These are deliberately theme-invariant — identical across light, dark, and dusk — because their role is instant recognition, not brand expression.
Emerald (Success)
Amber (Warning)
Rose (Destructive)
Blue (Info)
Role Tokens by Theme
Component-layer role tokens mapped from semantic scales. Each column isolates one theme so differences are immediately visible.
Light
Dark
Dusk
Material
Glass density, gradient usage, and overlay scrim strengths. All previews use real utility classes and CSS variable tokens.
Glass Density
Four blur levels over identical content. The backdrop contains shapes, mock UI elements, and a grid — notice how detail softens at each step.
Extra Small
Toolbar edges and thin dividers. Barely perceptible frosting — content underneath stays sharp.
Small
Navigation bars and sticky headers. Underlying content partially readable.
Medium
Cards and floating panels. Content behind becomes abstract shapes and colour washes.
Large
Modal overlays and hero surfaces. Background is fully diffused into ambient colour.
Gradients
App gradient
gradient-app
Surface gradient
gradient-surface
Accent gradient
gradient-accent
Glow brand
glow-brand
Card sheen
card-sheen
Card sheen strong
card-sheen-strong
Overlay Scrims
Background content
Soft
--overlay-scrim-soft
Background content
Default
--overlay-scrim
Background content
Strong
--overlay-scrim-strong
Components
Tone variants, border tokens, focus rings, and interactive effects. All rendered with real components and system tokens.
Tone x Emphasis
Seven tones across three emphasis levels, plus standard variants and sizes. Each cell is a real component rendered with system tokens.
Subtle, default, and strong emphasis for each tone family.
Same tone system applied to static labels.
The base CVA variants from shadcn/ui before tone is applied.
Four size presets from icon to large.
Borders and Effects
Border tokens, focus ring states, interactive glow effects, and the system radius scale.
Border Tokens
Border
--border
Input
--input
Glass border
--glass-border
Ring
--ring
Card Surface Effects
Glass foundation with layered sheen and accent glow. Three states shown side by side: rest, permanent hover (frozen), and interactive.
Default surface
Glass background, subtle sheen, glass shadow, and soft border. The resting state of every card.
Accent glow
Intensified sheen, accent border, and layered glow shadow. Glass shadow is preserved underneath.
Hover me
Transitions border, glow, and sheen strength simultaneously over 300ms ease-out.
Focus Ring by Tone
Click an input to see its tone-coloured focus ring.
Border Radius
Derived from --radius (0.75rem). Each step subtracts a fixed amount.