디자인 토큰
컴포넌트가 공유하는 의미·표면·깊이 토큰과 preset 계약을 한 곳에서 확인합니다.
의미 토큰
상태와 역할을 나타내는 값입니다. 컴포넌트는 특정 색상 대신 이 토큰을 참조합니다.
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ring뉴모피즘 표면 토큰
raised, inset, hover, floating 같은 깊이 표현은 공통 그림자 토큰으로 제한합니다.
--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-duration유한한 설정 축
Theme Studio가 조합할 수 있는 값은 source에서 유한한 목록으로 관리합니다.
- Depth
- subtle · balanced · deep
- Light
- top-left · top-right · bottom-left · bottom-right
- Control shape
- rounded · soft · pill
- Motion
- 120ms · 180ms · 260ms
Preset
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
사용 규칙
- 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.