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 use 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-durationConfiguration axes
Theme Studio combines the finite values defined by the theme source. The names below are the values used in code.
- Depth
- subtle · balanced · deep
- Light direction
- top-left · top-right · bottom-left · bottom-right
- Control shape
- rounded · soft · pill
- Motion duration
- 120ms · 180ms · 260ms
Presets
Air
Cool blue-gray · clear blue
style-air
balanced · top-left · soft
Lavender
Violet gray · soft contrast
style-lavender
subtle · top-left · pill
Sage
Calm sage · natural contrast
style-sage
subtle · top-right · soft
Clay
Warm beige · coral
style-clay
balanced · top-left · rounded
Graphite
Neutral gray · strong contrast
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.