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.
canvas
canvas-sunken
canvas-raised
canvas-overlay
Ink — text
Four steps of text hierarchy plus an inverse.
ink
ink-soft
ink-muted
ink-faint
Line — borders
Hairlines, default borders, and emphasis.
line-soft
line
line-strong
Roles
Action and status colors. Each has fg, soft, and soft-fg companions.
primary
accent
success
warning
danger
info
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
One sans everywhere — there is no display face. font-display still exists as a way of marking a title and resolves to the sans, so an app can override --font-display on its own (Outpost Terminal does, with a condensed face you can read across a store counter). Fonts load once from @tra/ui/fonts — apps don't pick their own.
font-sans — Inter
The Great Outdoors
font-sans — Inter, body
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
The raw shadow ramp, kept for surfaces that aren't glass. On glass, elevation comes from the material — .summit-content, .summit-chrome and .summit-overlay each carry their own shadow chain — so don't stack a shadow-* utility on one. It replaces the whole chain rather than adding to it, and takes the rim with it.
sm
DEFAULT
md
lg
glow