Tokens
Two layers: semantic tokens that flip with the theme (use these), and the raw palettes underneath.
Semantic tokens
Theme-aware CSS variables. Toggle dark mode (top of the sidebar) and watch every swatch follow. Opacity modifiers work everywhere: bg-primary/10.
Canvas — surfaces
Page, wells, cards, and floating layers.
Ink — text
Four steps of text hierarchy plus an inverse.
Line — borders
Hairlines, default borders, and emphasis.
Roles
Action and status colors. Each has fg, soft, and soft-fg companions.
Raw palettes
Fixed values that do not change with the theme. Reach for these only when a semantic token doesn't fit.
Ember
Campfire orange — brand primary
50
100
200
300
400
500
600
700
800
900
950
Canopy
Pine green — success & nature
50
100
200
300
400
500
600
700
800
900
950
Creek
Glacial teal — info & secondary accents
50
100
200
300
400
500
600
700
800
900
950
Bark
Warm wood — neutral ramp
50
100
200
300
400
500
600
700
800
900
950
Ash
Stone gray — muted states
50
100
200
300
400
500
600
700
800
900
950
Typography
font-display — Fraunces
The Great Outdoors
font-sans — Albert Sans
Built for Travel Resorts of America. Clean, readable, and consistent across every product.
font-mono — IBM Plex Mono
acct_4f2…9c charge $249.00 → settled
Elevation
sm
DEFAULT
md
lg
glow