Design tokens
The shared semantic, surface and depth contract used by every installable component.
Semantic tokens
These values describe role and state. Components consume them instead of hard-coded palette values.
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ringNeumorphic surface tokens
Raised, inset, hover and floating depth are limited to shared shadow tokens.
--neu-surface--neu-surface-soft--neu-surface-low--neu-shadow-raised--neu-shadow-raised-sm--neu-shadow-inset--neu-shadow-inset-sm--neu-shadow-hover--neu-shadow-floating--neu-radius-control--neu-radius-surface--neu-durationFinite configuration axes
Theme Studio can only compose values explicitly owned by the theme source.
- Depth
- subtle · balanced · deep
- Light
- top-left · top-right · bottom-left · bottom-right
- Control shape
- rounded · soft · pill
- Motion
- 120ms · 180ms · 260ms
Presets
Air
차가운 회청색 · 선명한 블루
style-air
balanced · top-left · soft
Lavender
보랏빛 회색 · 낮은 대비
style-lavender
subtle · top-left · pill
Sage
차분한 세이지 · 자연스러운 대비
style-sage
subtle · top-right · soft
Clay
따뜻한 베이지 · 코랄
style-clay
balanced · top-left · rounded
Graphite
중성 회색 · 높은 대비
style-graphite
deep · top-left · rounded
Usage rules
- Component source consumes semantic and surface variables instead of owning a private palette.
- Persistent selected state stays visually distinct from transient hover state.
- Reduced motion changes transition behavior without removing depth or focus semantics.
- Generated CSS, bootstrap and registry style items come from the same theme engine.