Style Guide
Design tokens from src/styles/ — typography,
surfaces, colors, spacing, radii, shadows, and icons. Use the theme toggle in the
header to preview dark mode.
Typography
Fluid scale — resize the window to see it respond
xs The quick brown fox jumps over the lazy dog sm The quick brown fox jumps over the lazy dog base The quick brown fox jumps over the lazy dog md The quick brown fox jumps over the lazy dog lg The quick brown fox jumps over the lazy dog xl The quick brown fox jumps over the lazy dog 2xl The quick brown fox jumps over the lazy dog 3xl The quick brown fox jumps over the lazy dog 4xl The quick brown fox jumps over the lazy dog Font roles
font-heading The quick brown fox font-body The quick brown fox font-ui The quick brown fox font-mono The quick brown fox Weights
light — 300 The quick brown fox normal — 400 The quick brown fox medium — 500 The quick brown fox semibold — 600 The quick brown fox bold — 700 The quick brown fox Surfaces
Layered elevation tiers, lightest → most raised. Each card shows how foreground, muted, and accent text read on that surface.
background
Heading
Body text on this surface stays legible.
Muted secondary text.
Primary accent link
surface
Heading
Body text on this surface stays legible.
Muted secondary text.
Primary accent link
surface-raised
Heading
Body text on this surface stays legible.
Muted secondary text.
Primary accent link
surface-overlay
Heading
Body text on this surface stays legible.
Muted secondary text.
Primary accent link
Brand
Per-client palette primitives from client.css, driven by
--brand-hue and --brand-chroma.
Semantic tokens (primary, accent, ring…) are derived from these.
Brand scale — light tint → deep dark
brand-1
brand-2
brand-3
→ primary (dark)
brand-4
→ primary
brand-5
Neutral scale — hue-tinted grays
neutral-1
neutral-2
neutral-3
neutral-4
neutral-5
neutral-6
neutral-7
neutral-8
Colors
Semantic pairs
Status (fixed hues)
Tinted surfaces (derived — faint coloured fills)
surface-tint
surface-success
surface-warning
surface-info
surface-destructive
Overlays (translucent — shown over a dark field)
overlay-light
overlay-light-strong
overlay-dark
Chrome & charts
border
input
ring
chart-1
chart-2
chart-3
chart-4
chart-5
Spacing
4px base scale (--space-N).
1 4px / 0.25rem 2 8px / 0.5rem 3 12px / 0.75rem 4 16px / 1rem 5 20px / 1.25rem 6 24px / 1.5rem 8 32px / 2rem 10 40px / 2.5rem 12 48px / 3rem 16 64px / 4rem 20 80px / 5rem 24 96px / 6rem 32 128px / 8rem Radii
Derived from --radius in client.css.
sm md lg xl full Shadows
sm md lg xl brand Motion
Hover anywhere in this section to play every track at once.
Durations (easing: default)
instant · 50ms fast · 150ms normal · 250ms slow · 400ms slower · 600ms Easing curves (duration: 600ms)
default in out spring linear Icons
Lucide — lucide:<name>
home user mail phone settings search bell calendar camera check chevron-right circle-x clock download edit eye file filter globe heart image inbox info layers link lock log-out map-pin menu plus refresh-cw rocket share shield star trash upload x zap Simple Icons — simple-icons:<name>
github facebook youtube linkedin x instagram cloudflare astro tailwindcss react typescript vercel