Tokens, not utilities. All CSS custom properties used by Atelier UI — colors, spacing, radius, typography, shadows, and motion. Import once via tokens.css; dark and light mode update automatically.
How the tiers fit together
Tokens are layered, and each layer only ever points one step down. Raw values live in Primitives (a palette like teal/500). Meaning lives in the UI tier — the --ui-* tokens on this page — which alias a primitive and decide what it is for (color/primary). This is also the only tier that carries light and dark modes. On top sit Component tokens, component-local names (button/bg-primary) that alias a UI token.
Tier 1
Primitive
raw value · single mode
teal/500
#006470
→
Tier 2
UI (semantic)
meaning · light + dark
color/primary
--ui-color-primary
→
Tier 3
Component
component role · Figma only
button/bg-primary
aliases color/primary
Colors
Swatches reflect the current theme. Toggle dark/light mode to see both.
Primary — Conciso deep teal
--ui-color-primary
Brand primary action
#006470#34d8d8
--ui-color-primary-hover
Hover state
#004e58#5ee5e5
--ui-color-primary-active
Active / pressed state
#003a42#87efef
--ui-color-primary-light
Tinted background
rgba(0,100,112,0.08)rgba(52,216,216,0.15)
Semantic
--ui-color-danger
Destructive actions, errors
#b91c1c#f87171
--ui-color-success
Confirmations, success
#15803d#4ade80
--ui-color-warning
Cautions, warnings
#b45309#fbbf24
--ui-color-info
Informational
#0369a1#38bdf8
--ui-color-secondary
Secondary actions
#475569#94a3b8
Surface — clean white + cool slate
--ui-color-surface
Page / base background
#ffffff#0a1116
--ui-color-surface-raised
Cards, elevated surfaces
#f8fafc#131c24
--ui-color-surface-sunken
Inset, recessed areas (code blocks)
#f1f5f9#060c10
Border
--ui-color-border
Decorative border (card on raised)
#e2e8f0#1e293b
--ui-color-border-hover
Hovered decorative border
#cbd5e1#334155
--ui-color-border-strong
Functional border ≥3:1 (inputs, outline buttons)
#64748b#64748b
Text
--ui-color-text
Primary text
#0f172a#f1f5f9
--ui-color-text-muted
Secondary / muted text
#475569#94a3b8
--ui-color-text-on-primary
Text on primary background
#ffffff#0a1116
Spacing
The same scale drives padding, gap, and margin. Pick the smallest token that gives the surface room to breathe — bigger numbers belong at higher levels of layout (sections, hero blocks).
--ui-spacing-1
0.25rem
4px
Icon insets, hairline gaps
--ui-spacing-2
0.5rem
8px
Tight inline gaps, badge inset
--ui-spacing-3
0.75rem
12px
Chip padding, button content gap
--ui-spacing-4
1rem
16px
Default body gap, form-field spacing
--ui-spacing-5
1.25rem
20px
Compact section spacing
--ui-spacing-6
1.5rem
24px
Card padding, dialog inset
--ui-spacing-8
2rem
32px
Block-level section gap
--ui-spacing-10
2.5rem
40px
Page-level vertical rhythm
--ui-spacing-12
3rem
48px
Hero / major section break
--ui-spacing-16
4rem
64px
Full-bleed section separation
Border radius
Radius scales with surface importance. md is the project default; reach for lg when the surface lifts above the page (cards, dialogs).
sm
0.5rem
Inputs, kbd glyphs, small chips
md
0.625rem
Default — buttons, badges, cards
lg
0.875rem
Elevated cards, dialogs, panels
xl
1.25rem
Hero / showcase surfaces
full
9999px
Pills, avatars, circular icons
Typography scale
Body copy starts at md. Step down to sm / xs for secondary text and labels; up to lg+ for headings. Pair every step change with a heading-level shift in markup.
Shadows encode elevation. Larger token = higher layer in the stacking order. Keep the difference between hovered and resting states one step apart so movement reads as deliberate.
xs
shadow-xs
Inputs at rest, subtle inset hint
sm
shadow-sm
Cards at rest
md
shadow-md
Hovered cards, dropdowns
lg
shadow-lg
Dialogs, drawers
xl
shadow-xl
Tooltips, floating menus
Motion
Durations match perceived weight: tiny things move fast, surfaces move slowly. Easing curves carry intent — ease-out for entrances, ease-spring for affirmative actions, ease-in-out for everything else.
