디자인 토큰
설치 가능한 컴포넌트가 공유하는 의미·표면·깊이 토큰을 확인합니다.
의미 토큰
역할과 상태를 나타내는 값입니다. 컴포넌트는 고정 색상 대신 이 토큰을 참조합니다.
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ring뉴모피즘 표면 토큰
돌출, 함몰, 호버, 떠 있는 표면의 깊이를 공통 그림자 토큰으로 표현합니다.
--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는 테마 소스에 정의된 유한한 값만 조합합니다. 아래 이름은 코드에서 사용하는 값입니다.
- 깊이
- subtle · balanced · deep
- 빛 방향
- top-left · top-right · bottom-left · bottom-right
- 컨트롤 형태
- rounded · soft · pill
- 모션 시간
- 120ms · 180ms · 260ms
프리셋
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
사용 규칙
- 컴포넌트는 별도 팔레트를 만들지 않고 의미·표면 변수를 사용합니다.
- 지속되는 선택 상태와 일시적인 호버 상태를 시각적으로 구분합니다.
- 모션 줄이기는 깊이나 포커스 의미를 없애지 않고 전환 동작을 조정합니다.
- 생성된 CSS, 초기화 스크립트와 레지스트리 스타일 항목은 같은 테마 엔진에서 만듭니다.