Spacing
4px 단위 간격 스케일이에요. 정해진 값만 쓰면 레이아웃이 일관되고 밀도 조절도 쉬워져요.
기본 단위
4px가 기본 단위예요. 간격 값은 전부 4의 정수 배수로 0~64px 12단계만 써요. 예외로 미세 조정용 2px(spacing-4xs)가 있어요.
Space token
이름은 t-shirt 사이즈(spacing-{size})예요. spacing-sm이 16px, 한 단계 아래 xs가 12px, 위 md가 20px.
| Token | 기본 단위 배수 | REM | px | Example |
|---|---|---|---|---|
| spacing-none | 0 | 0 | 0 | |
| spacing-4xs | 0.5 | 0.125 | 2 | |
| spacing-3xs | 1 | 0.25 | 4 | |
| spacing-2xs | 2 | 0.5 | 8 | |
| spacing-xs | 3 | 0.75 | 12 | |
| spacing-sm | 4 | 1 | 16 | |
| spacing-md | 5 | 1.25 | 20 | |
| spacing-lg | 6 | 1.5 | 24 | |
| spacing-xl | 8 | 2 | 32 | |
| spacing-2xl | 10 | 2.5 | 40 | |
| spacing-3xl | 12 | 3 | 48 | |
| spacing-4xl | 16 | 4 | 64 |
Usage
쓰임에 따라 세 범위로 나눠요.
Small
spacing-none ~ spacing-xs · 0–12px
- 아이콘과 텍스트 사이
- 배지·아이콘 버튼·테이블 셀 안쪽 여백
- 버튼 그룹처럼 반복되는 요소 사이, 입력 필드 안쪽 여백
- 카드 안 제목·설명·액션 사이 세로 간격
- 드롭다운 버튼과 메뉴 사이
Medium
spacing-sm ~ spacing-lg · 16–24px
- 버튼 등 큰 요소의 안쪽 여백
- 아바타·큰 아이콘과 콘텐츠 사이
- 카드 안 블록 사이 세로 간격
- 느슨한 목록이나 큰 컴포넌트의 항목 사이
Large
spacing-xl ~ spacing-4xl · 32–64px
- 페이지 섹션 사이, 헤더와 본문 사이
- 큰 영역 안 콘텐츠 정렬