03 — Typography & Spacing Scales
이 문서가 답하는 질문: 디자인 시스템에서 “스케일(scale)“이라고 부르는 것들 —
font-size,spacing,radius,shadow,z-index— 은 각각 어떤 원칙으로 만들어지는가? 그리고 같은 스케일을 Tailwind와 Panda CSS 양쪽에 어떻게 동시에 주입하는가? 한 줄 답 (Pyramid Top): 스케일은 “비율(ratio) 또는 그리드(grid)에 단단히 묶인 유한한 토큰 집합” 이다 — 타이포는 modular ratio(1.125·1.25·1.333), spacing은 4·8px grid, radius·shadow·z-index는 의미적 tier 로 각각 다른 규칙을 따르되 모두 “임의의 중간값을 만들 수 없도록 닫혀 있다” 는 점에서 같다.
이 챕터의 위치
01-tokens가 “토큰의 형식”(DTCG, primitive→semantic 계층)을 다뤘다면, 이 챕터는 “각 카테고리의 토큰을 어떤 수학으로 채울 것인가” 를 다룬다.
| 카테고리 | 채우는 규칙 | 산출물 예시 |
|---|---|---|
font-size | Modular Ratio (1.125·1.25·1.333…) | text.xs=12 / sm=14 / base=16 / lg=18 / xl=20 / 2xl=24 … |
spacing | 4 또는 8px grid | space.1=4 / 2=8 / 3=12 / 4=16 / 6=24 / 8=32 … |
radius | 반-기하급수 + 의미 tier | none=0 / sm=2 / md=6 / lg=12 / xl=24 / full=9999 |
shadow | elevation tier (5~7단) | sm / md / lg / xl / 2xl / inner |
z-index | stack tier (10·100·1000 단위) | base=0 / dropdown=1000 / modal=1300 / toast=1500 |
line-height | role tier (display·heading·body) | tight=1.1 / snug=1.3 / normal=1.5 / loose=1.75 |
챕터 지도 (Mermaid)
챕터 인덱스
| # | 파일 | 다루는 것 | 핵심 키워드 |
|---|---|---|---|
| 01 | 01-modular-scale-and-type-system | Modular ratio·type role(display/heading/body/caption)·fluid type | 1.125 / 1.25 / 1.333 / clamp() |
| 02 | 02-spacing-scale-4-8-grid | 4·8px grid·T-shirt vs numeric·Tailwind/Panda 비교 | space.1=4px, gap, padding |
| 03 | 03-radius-shadow-zindex | radius scale·shadow elevation·z-index stack tier | rounded-md, shadow-lg, z-modal |
| 04 | 04-line-height-and-leading-trim | line-height token·text-box-trim·Capsize polyfill | half-leading, optical alignment |
| 05 | 05-variable-fonts-and-axes | variable font axes·font-feature-settings·font-display | wght, wdth, opsz, slnt |
| 06 | 06-responsive-type-and-fluid-scale | clamp + cqi·rem 우선·접근성 줌 | vw vs cqi, rem, A11y |
핵심 원칙 (5개)
- 닫힌 집합이 자유보다 낫다 — 임의의
padding: 13px를 못 쓰게 막아야 시스템이 산다. - 4 또는 8의 배수에 모든 spacing을 정렬 — 그 외의 값은 디자인 부채.
- 타입 ratio 하나를 골라 끝까지 밀고 간다 — 1.25면 1.25, 중간에 1.333 섞지 말 것.
px가 아니라rem— 사용자 폰트 크기 설정을 존중하는 것은 접근성 의무.- 같은 토큰을 Tailwind와 Panda 양쪽에 주입 — DTCG JSON → 두 프리셋 생성기.
What-if — 이 챕터의 한계
- 컬러 스케일은 별도 — 색은 OKLCH·contrast·12-step Radix 규칙을 따르므로
02-color-system에서 다룬다. - 컴포넌트별 spacing (Button 내부 padding 등)은
04-recipes-variants에서 다룬다. 여기서는 원시 스케일만 정의한다. - Figma 측 변수 동기화는
08-pipeline-distribution의 Tokens Studio 절에서.
요약
- 디자인 시스템의 “스케일”은 카테고리마다 다른 수학을 따른다 — typography는 비율, spacing은 그리드, elevation은 tier.
- 공통점은 닫힌 집합과 의미적 이름이다.
- 이 챕터의 6개 문서는 각 스케일의 생성 규칙과 Tailwind/Panda 양쪽 주입 방법을 코드와 표로 정리한다.