Spacing scale
값은 catalog/tokens.json에서 가져오며 실제 CSS custom property로 그립니다.
| Step | Token | Value |
|---|---|---|
| 0 | 0 | |
| 1 | 4px | |
| 2 | 8px | |
| 3 | 12px | |
| 4 | 16px | |
| 5 | 20px | |
| 6 | 24px | |
| 8 | 32px | |
| 10 | 40px | |
| 12 | 48px | |
| 16 | 64px | |
| 20 | 80px |
Usage
콘텐츠 그룹과 레이아웃 관계에 맞는 간격을 선택합니다.
간격은 임의의 padding 보정보다 공통 구조의 gap으로 관리합니다. 행과 행 사이에는 부모 Grid/Flex 컨테이너가 간격을 소유하며, 자식의 내부 padding을 행 사이 여백으로 간주하지 않습니다.
한 요소를 강조하기 위해 모든 주변 간격을 늘리지 않습니다. 밀도 높은 Workbench에서도 구분이 필요한 관계만 분리합니다.
Accessibility
간격은 콘텐츠·터치 목표를 줄이는 수단이 아닙니다.
텍스트 200% 확대 및 좁은 화면에서 내용이 겹치지 않아야 합니다. 터치 목표의 최소 크기는 spacing 토큰과 별개로 검증합니다.