Color Tokens
All colors are defined as HSL CSS custom properties in globals.css and consumed via Tailwind v4's @theme inline block. Switching to dark mode is a single .dark class swap - no JavaScript involved.
Background
--background
Page background
Foreground
--foreground
Default text
Card
--card
Card surfaces
Primary
--primary
CTAs and brand accents
Primary FG
--primary-foreground
Text on primary
Secondary
--secondary
Secondary surfaces
Muted
--muted
Subtle backgrounds
Muted FG
--muted-foreground
De-emphasised text
Accent
--accent
Hover / focus states
Destructive
--destructive
Errors and warnings
Border
--border
Dividers and outlines
Input
--input
Form field borders
Surface 1
--surface-1
Alternating section A
Surface 2
--surface-2
Alternating section B
Typography Scale
Geist Sans (body) and Geist Mono (code) from Google Fonts via next/font. Every size maps to a Tailwind utility - no custom values.
text-xs
0.75rem / 12px
The quick brown fox
text-sm
0.875rem / 14px
The quick brown fox
text-base
1rem / 16px
The quick brown fox
text-lg
1.125rem / 18px
The quick brown fox
text-xl
1.25rem / 20px
The quick brown fox
text-2xl
1.5rem / 24px
The quick brown fox
text-3xl
1.875rem / 30px
The quick brown fox
text-4xl
2.25rem / 36px
The quick brown fox
text-5xl
3rem / 48px
The quick brown fox
text-6xl
3.75rem / 60px
The quick brown fox
text-7xl
4.5rem / 72px
The quick brown fox
Spacing Scale
Standard Tailwind 4px base unit. Consistent use of the scale prevents visual inconsistency across the component tree.
1 (4px)
2 (8px)
3 (12px)
4 (16px)
5 (20px)
6 (24px)
8 (32px)
10 (40px)
12 (48px)
16 (64px)
20 (80px)
24 (96px)
Components
Headless primitives from Radix UI composed with class-variance-authority. All variants are driven by token values - never hard-coded colours.
Button
Card
Card content goes here. Composed from CardHeader, CardContent, and optional CardFooter.
Variant achieved via a border utility with token-based opacity modifier.
Auto-inverts in dark mode via token swap - no extra classes needed.
Input
Badge / Pill
Motion
Framer Motion with spring-based and eased transitions. Kept purposeful - animations serve navigation feedback and entrance choreography, not decoration.
Staggered entrance