디자인 토큰
모든 컴포넌트가 참조하는 단일 진실 공급원(SSOT). CSS 변수, JSON, TS 동시 export.
시맨틱 컬러
라이트/다크 모드는 [data-theme="dark"]로 자동 cascade. 헤더 우측의 토글로 확인하세요.
바탕
--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
xs12px대한민국 — Baneung 디자인 시스템
sm13px대한민국 — Baneung 디자인 시스템
base14px대한민국 — Baneung 디자인 시스템
md16px대한민국 — Baneung 디자인 시스템
lg18px대한민국 — Baneung 디자인 시스템
xl20px대한민국 — Baneung 디자인 시스템
2xl24px대한민국 — Baneung 디자인 시스템
3xl30px대한민국 — Baneung 디자인 시스템
4xl36px대한민국 — Baneung 디자인 시스템
5xl48px대한민국 — Baneung 디자인 시스템
라디우스
각진 디자인 강제 — 0/2/4 세 단계만.
none (0)
sm (2px)
md (4px)
스페이싱
4px 베이스. space-1(4px) ~ space-32(128px).
space-14px
space-28px
space-416px
space-624px
space-832px
space-1248px
space-1664px
space-2496px
space-32128px