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.
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.375rem
Inputs, kbd glyphs, small chips
md
0.5rem
Default — buttons, badges, cards
lg
0.75rem
Elevated cards, dialogs, panels
xl
1rem
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.
