Spacing · Radius
간격은 4px 단위 12단계, 모서리는 4단계, 테두리는 두 가지 두께만 써요. 표에 없는 값은 만들지 않아요.
간격
1단위 = space/1 = 4px. p-4, gap-4처럼 단계 숫자로 써요. 표에 없는 단계(p-9 등)는 쓰지 않아요.
space/00pxspace/14pxspace/28pxspace/312pxspace/416pxspace/520pxspace/624px- 컨트롤 sm 높이
space/728px - 컨트롤 md 높이
space/832px - 컨트롤 lg 높이, 표 행 높이
space/1040px space/1248pxspace/1664px
기본 간격
자주 쓰는 자리의 간격이에요. 화면을 그릴 때 이 표부터 봐요.
- 페이지 콘텐츠최대 너비 960, 좌우 space/4, 위아래 space/10
- 섹션 사이space/6
- Card 안쪽 / 영역 사이space/5 / space/4
- 폼 필드 사이space/4
- 라벨 ↔ 입력란 ↔ 도움말space/2
- 버튼 묶음 사이space/2
- 목록 항목 안 (아바타 ↔ 텍스트)space/3
- 제목 ↔ 바로 아래 설명space/1
Radius
크기가 클수록 둥근 정도도 커져요. 떠 있는 요소와 Card는 lg예요.
- 배지, 체크박스, 토글 항목
radius/sm2px - Button, Input, Select
radius/md4px - Card, Dialog, Menu, Toast
radius/lg6px - Avatar, 진행 막대, Switch
radius/full9999px
Stroke
높낮이는 그림자 대신 1px 테두리로 나눠요. 포커스 링만 2px이고 간격도 2px이에요.
- 모든 테두리, 구분선
stroke/default1px - 포커스 링 (offset 2px, border/focus)
stroke/focus2px