Foundations
Spacing & Radius
Consistent spacing and corners tie different components together into one product.일관된 간격과 모서리는 서로 다른 컴포넌트를 하나의 제품으로 연결합니다.
4px spacing scale
4px is the base unit. Start with 8-16px inside components, 24px between related elements, and 48-96px between sections.4px을 기본 단위로 사용합니다. 컴포넌트 내부는 8~16px, 관련 요소 사이는 24px, 섹션 사이는 48~96px을 시작점으로 삼습니다.
--dy-space-14px--dy-space-28px--dy-space-312px--dy-space-416px--dy-space-520px--dy-space-624px--dy-space-832px--dy-space-1040px--dy-space-1248px--dy-space-1664px--dy-space-2080px--dy-space-2496pxRadius
xs / Tags / small elements태그 / 작은 요소
sm / Buttons / inputs버튼 / 입력
md / Cards / tables카드 / 표
lg / Panels / dialogs패널 / 다이얼로그
xl / Brand tiles / chapter headers브랜드 타일 / 챕터 헤더
full / Chips, switches, CTAs칩, 스위치, CTA
Responsive layout
| Screen화면 | Recommended rules권장 규칙 |
|---|---|
| Mobile / 0-639px | 16-22px side margins, single column, collapsible navigation16~22px 좌우 여백, 한 열, 접히는 내비게이션 |
| Tablet / 640-1099px | 24-40px margins, content first, secondary TOC hidden24~40px 여백, 본문 우선, 보조 목차 생략 |
| Desktop / 1100px and upDesktop / 1100px 이상 | Three columns: side navigation, content, TOC; brand areas up to 1640px사이드 내비게이션, 본문, 목차 3단, 브랜드 영역은 최대 1640px |
Usage사용 가이드
Closer means related가까울수록 관련 있음
Keep a label 6-8px from its field and 24px from the next field, so pairs read as one unit.레이블은 입력창과 6~8px, 다음 입력창과는 24px 떨어뜨려 한 쌍이 하나로 읽히게 합니다.
Don't space everything evenly. People can't tell which label belongs to which field.모든 것을 같은 간격으로 두지 않습니다. 어느 레이블이 어느 입력창 것인지 알 수 없습니다.
Nested corners중첩된 모서리
Inner radius = outer radius − padding. A 24px card with 12px padding holds a 12px image.안쪽 반경 = 바깥 반경 − 여백. 여백 12px인 24px 카드에는 12px 이미지를 넣습니다.
Don't reuse the same radius inside and out. The corners look pinched.안팎에 같은 반경을 쓰지 않습니다. 모서리가 꼬집힌 듯 보입니다.
Density밀도
| Density밀도 | Control height컨트롤 높이 | Gap간격 | Use for사용처 |
|---|---|---|---|
| Comfortable여유 | 48px | 16-24px | Consumer apps, onboarding, forms소비자 앱, 온보딩, 폼 |
| Default기본 | 44px | 12-16px | Most screens대부분의 화면 |
| Compact촘촘 | 36px | 8px | Tables, admin tools, filters표, 관리 도구, 필터 |
Example적용 예시
.card {
padding: var(--dy-space-6);
border-radius: var(--dy-radius-md);
}
.section {
margin-top: var(--dy-space-12);
}