디자인 토큰
컬러 · 타이포그래피 · 스페이싱 · 라디우스 · 모션의 단일 진실 공급원 (CSS / JSON / TS 동시 export).
시맨틱 컬러
컴포넌트가 직접 참조하는 의미 단위. 라이트/다크 테마에서 같은 토큰이 다른 RGB로 매핑됩니다.
바탕
--color-bg-canvas
표면
--color-bg-surface
표면 강
--color-bg-surface-strong
반전
--color-bg-inverse
본문
--color-text-primary
보조
--color-text-secondary
보더
--color-border-default
포커스 링
--color-focus-ring
성공
--color-status-success
경고
--color-status-warning
오류
--color-status-danger
정보
--color-status-info
타이포그래피
Pretendard Variable — 한·영 단일 폰트. 4px 베이스 스케일.
xs12pxBaneung Design System — 바능 디자인 시스템
sm13pxBaneung Design System — 바능 디자인 시스템
base14pxBaneung Design System — 바능 디자인 시스템
md16pxBaneung Design System — 바능 디자인 시스템
lg18pxBaneung Design System — 바능 디자인 시스템
xl20pxBaneung Design System — 바능 디자인 시스템
2xl24pxBaneung Design System — 바능 디자인 시스템
3xl30pxBaneung Design System — 바능 디자인 시스템
4xl36pxBaneung Design System — 바능 디자인 시스템
5xl48pxBaneung Design System — 바능 디자인 시스템
라디우스
바능의 각진 디자인 원칙 — 토큰은 0/2/4 세 개만 정의됩니다. 큰 라운드는 의도적으로 미정의.
none (0)
sm (2px)
md (4px)
스페이싱
4px 베이스 — 1=4px, 2=8px, 4=16px, 8=32px ...
space-14px
space-28px
space-416px
space-624px
space-832px
space-1248px
space-1664px
space-2496px
space-32128px