Pier_v1/RAG/design system_v0.1.1/design.foundations.md

# Prism Design System — Foundations (Layer 1)

| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 토큰 명명 규약, GRADE 색 체계, 타입 생성식, 공간·리듬, 그리드, 표면·깊이, 반경·획 | 최초 버전 |
| v0.1.1 | 2026-07-28 | 조선두 | §4.3 베이스라인 리듬에 **적용 매체 범위** 단서 추가 (BL-1·BL-3·BL-4는 print 한정) | Layer 2b 작성 중 발견된 상충 해소 |
| v0.1.2 | 2026-07-29 | HMCM | §2.7 Tip ΔG 58→59 정정(tokens.json 정본 일치), §1.4 다중값 구조 구현 주석 추가 | 진단 N4·G6 보정 |

| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.foundations.md` |
| 계층 | **Layer 1 — Foundation** |
| 역할 | 매체·브랜드 **불변** 규칙. 무단위·상대 정의 |
| 상위 | `Design.md` · `design.brand.md` (Layer 0) |
| 하위 | `design.medium.*.md` (Layer 2) — 본 파일의 상대값을 절대값으로 실체화 |
| 로드 정책 | **항상 로드** |

> **본 계층의 철칙**: Layer 1은 **절대 치수를 갖지 않는다.** `16px`·`10pt`·`24mm` 같은 값이 이 파일에 등장하면 그것은 결함이다. 본 파일이 정의하는 것은 **비율·단계·관계·규칙**이며, 예시로 제시되는 절대값은 반드시 `[예시 — Layer 2 소관]`으로 표기한다.
>
> 예외: §2 색상은 sRGB HEX가 브랜드 고유값이므로 Layer 0에서 공급받아 그대로 사용한다. 색은 매체가 바뀌어도 색상값 자체가 바뀌지 않는다(재현 방식만 바뀐다).

---

## 목차

- [1. 토큰 명명 규약](#1-토큰-명명-규약)
- [2. 색 체계](#2-색-체계)
- [3. 타이포그래피](#3-타이포그래피)
- [4. 공간·리듬](#4-공간리듬)
- [5. 그리드](#5-그리드)
- [6. 표면·깊이](#6-표면깊이)
- [7. 반경·획](#7-반경획)
- [8. 파운데이션 검증 규칙](#8-파운데이션-검증-규칙)

---

# 1. 토큰 명명 규약

## 1.1 3계층 네임스페이스

토큰은 **일반 → 구체** 순서로 마침표 연결한다. [출처: design.benchmark, T13 (MD3 `md.{ref|sys|comp}.*`)]

```
prism . {ref | sys | comp} . {category} . {name} [. {modifier}]
```

| 계층 | 정의 | 값의 성격 | 예 |
| :--- | :--- | :--- | :--- |
| **`ref`** | **원시값.** 브랜드가 공급한 그대로. 컨텍스트 무관 | 리터럴 (HEX·비율·정수) | `prism.ref.color.green` → `#1F524B` |
| **`sys`** | **의미역할.** "무엇에 쓰이는가". **매체 프로파일이 값을 바인딩하는 유일한 지점** | `ref` 참조 또는 매체별 값셋 | `prism.sys.text.body` → `ref.color.brown` |
| **`comp`** | **컴포넌트 속성.** 리터럴 금지, 항상 `sys`/`ref` 참조 | 참조만 | `prism.comp.card.border.color` → `sys.border.subtle` |

**절대 규칙**

| ID | 규칙 |
| :--- | :--- |
| **TN-1** | `comp` 계층에 **리터럴 값을 쓰지 않는다.** 반드시 `sys` 또는 `ref`를 참조한다 |
| **TN-2** | Layer 2·3에서 **`ref`를 직접 참조하지 않는다.** 항상 `sys`를 경유한다 |
| **TN-3** | 산출물(HTML/CSS/PPTX/InDesign)에 **HEX·치수 리터럴이 등장하지 않는다** [출처: design.benchmark, T33] |
| **TN-4** | 정의되지 않은 토큰을 참조하지 않는다. **미정의 참조 0건**이 검증 항목이다 |

> **TN-4의 배경**: 선행 A3 시스템에서 `--astryx-color-border`(그림자 토큰 3종이 참조)와 `--astryx-color-neutral-050`(비교 카드가 참조)이 **정의되지 않은 채 참조**되고 있었다. CSS는 이 경우 조용히 실패하므로 육안 검수로 잡히지 않는다. 토큰 참조 무결성은 **기계 검증 필수 항목**이다.

## 1.2 공간 토큰의 백분율 명명

공간은 서수(`space-01`, `space-02`)가 아니라 **기본 단위 대비 백분율**로 명명한다. [출처: design.benchmark, T14 (Atlassian `space.100` = 기본단위 100%)]

```
prism.sys.space.{N}     여기서 N = 기본 단위 대비 백분율
```

`space.200`은 이름만 보고 **기본 단위의 2배**임을 즉시 안다. `space-07`은 반드시 대조표를 봐야 한다. 지면·화면 조판 중 대조표를 왕복하지 않는 것이 이 명명의 유일한 목적이다.

## 1.3 별칭 토큰 2계층

원시 치수 위에 **용도명 치수**를 1겹 얹는다. 실무자와 에이전트는 숫자가 아니라 **용도로 지시**한다. [출처: design.benchmark, T32 (Polaris `--p-space-card-padding` = `var(--p-space-400)`)]

```
prism.sys.space.card-padding   →  prism.sys.space.300
prism.sys.space.zone-gap       →  prism.sys.space.400
prism.sys.space.text-block     →  prism.sys.space.150
```

- 별칭은 **1단계만** 허용한다. 별칭이 별칭을 참조하면 추적 불가능해진다.
- 별칭 없이 원시 단계를 직접 써도 되지만, **3회 이상 반복되는 용도는 별칭으로 승격**한다.

## 1.4 매체 다중값 구조

**하나의 토큰명이 매체별 값을 동시에 보유**한다. 이것이 본 시스템의 핵심 기제다. [출처: design.benchmark, T1 (GOV.UK `_typography-responsive.scss` — 하나의 스케일 포인트가 mobile/tablet/print 3값 보유)]

```jsonc
"sys": {
  "type": {
    "body": {
      "step": 0,                    // Layer 1: 스케일 인덱스 (불변)
      "lineHeight": 1.70,           // Layer 1: 비율 (불변)
      "print":        { "size": "10pt" },      // Layer 2가 바인딩
      "presentation": { "size": "24px" },
      "screen":       { "size": "1rem"  }
    }
  }
}
```

| ID | 규칙 |
| :--- | :--- |
| **TN-5** | **토큰명은 매체가 달라도 동일하다.** 매체별로 다른 이름을 만들지 않는다 |
| **TN-6** | 매체 값셋에 **누락이 있으면 그 매체에서 해당 토큰을 사용할 수 없다.** 자동 폴백을 두지 않는다 |
| **TN-7** | Layer 1 필드(`step`·`lineHeight`·비율)는 **매체가 덮어쓸 수 없다** |

> **[구현 주석 — v0.1.2]** 위 다중값 구조는 **논리 모델**이다. 현행 `design.tokens.json`은 이를 `foundation.typography`(인덱스·비율)와 `mediums.<medium>.type_scale`(절대값)의 분산 블록으로 구현한다. 해석 경로: 토큰명 → `foundation`에서 인덱스·비율 확인 → 사용 매체의 `mediums` 블록에서 절대값 바인딩. 두 블록 간 불일치는 F9 드리프트로 판정한다.

---

# 2. 색 체계

## 2.1 GRADE 척도

### 정의

```
GRADE = round(100 − L*)          L* = CIE 1976 명도 (sRGB → XYZ D65 → L*)
```

- **GRADE 0 = 순백(#FFFFFF)**, **GRADE 100 = 순흑(#000000)**
- 값이 클수록 어둡다 (잉크 농도 직관과 일치)

### 왜 GRADE인가

대비비(contrast ratio)는 두 색의 **비(比)**이므로 암산이 불가능하다. GRADE는 **차(差)**이므로 뺄셈만으로 판정된다. [출처: design.benchmark, T4 (USWDS 매직 넘버) · T5 (Carbon 스텝 거리 매트릭스) · T6 (Spectrum contrast-generated)]

세 시스템이 각각 다른 구현으로 같은 발상에 도달했다: **"대비를 계산기 없이 정수 규칙으로 환원한다."** 그리고 GRADE는 **휘도 기반이므로 흑백 복사·그레이스케일 인쇄에서도 그대로 작동한다.**

### 매직 넘버 (본 시스템 산출값)

전 등급쌍(base 0~100 × ΔG 35~74)에 대해 최소 보장 대비를 계산한 결과다.

| ΔG | **보장 최소 대비** | 판정 | 적용 |
| :-: | :---: | :--- | :--- |
| **≥ 40** | **3.17 : 1** | 대형 텍스트 가능 | 18pt+ 또는 14pt+ Bold 상당 |
| **≥ 55** | **5.37 : 1** | **본문 가능** (AA 4.5:1 여유 충족) | 일반 텍스트 |
| **≥ 70** | **9.15 : 1** | **AAA 충족** (7:1 여유 충족) | 저시력 대응·투사 겸용 |
| < 40 | — | **텍스트 금지** | 면(fill)·도형으로만 |

**정확한 경계값** (참고): 3:1 보장은 ΔG 39, 4.5:1 보장은 ΔG 51, 7:1 보장은 ΔG 63. 위 표는 여유를 두어 **40 / 55 / 70**의 기억 가능한 값으로 반올림한 것이다.

### 보수성과 실측 등록

ΔG는 **모든 base 등급에 대한 최악값**(흰 배경 위)이므로 **보수적 하한**이다. 실측 대비는 항상 이 이상이다.

| ID | 규칙 |
| :--- | :--- |
| **CG-1** | ΔG가 임계를 충족하면 **실측 없이 사용 가능**하다 |
| **CG-2** | ΔG가 임계에 미달하나 실측이 통과하는 쌍은 **`contrast.pairs`에 명시 등록해야만** 사용할 수 있다. 암묵 허용은 금지한다 |
| **CG-3** | 실측은 **프로그램으로 계산**한다. 수기·눈대중 판정을 금지한다 |
| **CG-4** | ΔG < 40인 쌍은 **실측이 통과해도 텍스트로 쓰지 않는다** (실측 통과 자체가 불가능하나, 규칙으로 못 박는다) |

### 매체별 목표 대비

[출처: design.benchmark, §16 상충-6 / T7 (Spectrum "dark themes target higher contrast")]

| 매체 | 본문 목표 | 근거 |
| :--- | :--- | :--- |
| **print** | **ΔG ≥ 70 (AAA)** | 조명 환경 통제 불가, 저시력 독자, 흑백 복사 가능성 |
| **presentation** | **ΔG ≥ 70 (AAA)** | 앰비언트 조명에 의한 washout, 램프 노후 색 왜곡, 투사 축소 |
| **screen** | **ΔG ≥ 55 (AA) 필수 / 70 권장** | 사용자가 밝기·확대 제어 가능. 업계 표준(WCAG AA) 준수가 우선 |

> **상충 해소 원칙**: 하나의 산출물이 두 매체에 동시에 쓰이면(예: A3 인쇄본을 그대로 투사) **엄격한 쪽을 채택**한다.

## 2.2 스텝 거리 매트릭스

색 팔레트를 GRADE 사다리로 구성하면, "몇 칸 떨어뜨려야 하는가"가 정수로 확정된다. [출처: design.benchmark, T5]

**권장 사다리 간격**: 브랜드 팔레트를 확장할 때 인접 단계는 **ΔG 10~15**로 둔다. 그러면 2단계 = ΔG 20~30(구분 가능), 4단계 = ΔG 40~60(대형 텍스트~본문), 5~6단계 = ΔG 55~90(본문~AAA)이 자동 성립한다.

| 용도 | 필요 단계 수 (ΔG 12 사다리 기준) |
| :--- | :--- |
| 인접 면 구분 (배경 레이어) | **2단계** 이상 |
| 장식선·구분선 | **3단계** 이상 |
| 대형 텍스트 | **4단계** 이상 |
| 본문 텍스트 | **5단계** 이상 |
| AAA 본문 | **6단계** 이상 |

## 2.3 Container ↔ On-Container 강제 페어링

배경색과 전경색을 **개별 토큰이 아니라 검증된 쌍으로만 공급**한다. 사용자가 임의로 조합해 대비를 깨뜨릴 여지를 구조적으로 제거하는 것이 목적이다. [출처: design.benchmark, T12 (MD3 roles · SLDS "on 색상은 반드시 container와 페어")]

```jsonc
"sys.pair.surface-default": {
  "container": "ref.color.sand",
  "on":        "ref.color.brown",
  "on-subtle": "ref.color.brown",     // 저강조 (§2.8 참조)
  "border":    "ref.color.brown",
  "deltaG":    68,
  "measured":  9.02
}
```

| ID | 규칙 |
| :--- | :--- |
| **CP-1** | 배경을 지정하면 **전경은 자동으로 결정된다.** 개별 지정을 허용하지 않는다 |
| **CP-2** | 모든 페어는 `deltaG`와 `measured`를 **함께 보유**한다 |
| **CP-3** | 신규 페어 추가 시 §2.1 CG-1~CG-4 검증을 통과해야 한다 |
| **CP-4** | 페어에 없는 배경·전경 조합은 **사용 금지**다 |

## 2.4 색공간 원칙

| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CS-1** | 팔레트 설계·보간에 **HSL을 사용하지 않는다.** 지각 균등 색공간(CIELAB / CIECAM02-UCS)을 사용한다 | T54 (Spectrum). HSL의 L은 지각 명도가 아니어서 같은 L 값의 색들이 시각적으로 전혀 다른 밝기로 보인다 |
| **CS-2** | 명도 사다리는 **L\* 등간격**으로 만든다. 그래야 **흑백 출력·복사 시 그레이 사다리가 시각적으로 등간격**을 유지한다 | T54 |
| **CS-3** | 알파(투명도) 색을 팔레트에 두지 않는다. **불투명 등가색으로 사전 평탄화(flatten)** 한다 | ADS Alpha / Spectrum "알파 색은 대비가 예측 가능하지 않다". 인쇄에서는 오버프린트·녹아웃 사고로 직결 |
| **CS-4** | CS-3의 예외는 **screen 매체에 한한다** (`design.medium.screen.md §5.3`) | §19 재판정 |

## 2.5 색 단독 의존 금지

| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CO-1** | 정보를 **색만으로** 전달하지 않는다. 형태·패턴·라벨·기호 중 **최소 1개를 병기**한다 | T38 (Carbon·ADS 공통 규정) |
| **CO-2** | 차트 계열은 **패턴·해칭 또는 직접 라벨링**을 병기한다 | T38 |
| **CO-3** | **차트 색 위에 텍스트를 얹지 않는다.** 라벨은 색 면 옆에 배치한다 | T38 (ADS 차트 3규칙) |
| **CO-4** | 인접한 색 면 사이에는 **여백 또는 보더**를 둔다 | T38 |
| **CO-5** | 추세 기호(`▲▼`)는 **반드시 색 + 라벨과 병기**한다 | 브랜드 §6.4 |

> **투사 환경에서 CO-1~CO-5는 특히 중요하다.** 프로젝터의 색역·명도·램프 상태는 예측 불가하므로, 색이 의도대로 재현된다는 가정 자체가 성립하지 않는다.

## 2.6 정적 식별색 (Static Colors)

테마·매체·출력 방식이 바뀌어도 **동일해야 하는 색**을 별도 팔레트로 분리한다. [출처: design.benchmark, T53 (Spectrum Static color palette)]

| 조건 | 처리 |
| :--- | :--- |
| 안전·위험·금지 표기 | 정적 팔레트. 라이트/다크 테마에 관계없이 동일 색 |
| 법정 색채 기준이 있는 표기 | 정적 팔레트. 해당 기준을 우선 적용 |
| 검측 대상·확인 필요 표기 | 정적 팔레트 |

정적 색은 **대비 페어링(§2.3)의 예외가 아니다.** 정적 색을 쓰는 면에도 검증된 `on` 색이 지정되어야 한다.

## 2.7 상태색 (Status Colors)

**형태가 1차 부호, 색이 2차 부호**다. 아이콘 형태만으로 4상태가 구분되어야 하며, 색은 이를 보강할 뿐이다. [출처: design.benchmark, T21 (Polaris DirectiveCard 4상태 pill) · M13 (적록 축 회피 재선정)]

| 상태 | **기호(1차)** | `on` | G | `container` | G | ΔG | 실측 | sand 위 실측 |
| :--- | :---: | :--- | :-: | :--- | :-: | :-: | :---: | :---: |
| **Do** (승인·준수) | **✓** | `#005A4E` | 66 | `#DCEAE6` | 8 | 58 | 6.59 | 7.36 |
| **Don't** (금지·오류) | **✕** | `#8F2A11` | 67 | `#F6DFDA` | 9 | 58 | 6.58 | 7.55 |
| **Caution** (주의·조건부) | **▲** | `#6B4A00` | 66 | `#F5E7CC` | 8 | 58 | 6.60 | 7.27 |
| **Tip** (참고) | **▣** | `#0A4E86` | 68 | `#DDE8F3` | 9 | 59 | 6.91 | 7.73 |

**[정정] Polaris 원색 기각**: Polaris의 Do `#008656` / Don't `#fa0000`은 **적록 축**이라 성인 남성 약 8%의 적록 색각이상에서 가장 취약한 조합이다. 본 시스템은 **명도(GRADE 66~68 균일) + 기호 형태 + 색상(청록/적갈/황토/청)** 3중 부호화로 재설계했다. [출처: design.benchmark, M13]

| ID | 규칙 |
| :--- | :--- |
| **ST-1** | 상태 표기에서 **기호를 생략하지 않는다.** 색만 있는 상태 표기는 금지 |
| **ST-2** | 4상태의 GRADE를 **의도적으로 균일하게(66~68)** 유지한다. 흑백 출력 시 4색이 비슷한 회색이 되지만, **기호로 구분되므로 정보 손실이 없다** |
| **ST-3** | 상태색은 **브랜드 악센트(§2.9)와 별개**다. 상태색 사용은 악센트 경제 카운트에 포함하지 않는다 |

## 2.8 강조 단계 정량화

강조를 형용사가 아니라 **팔레트 스텝 수**로 정의한다. [출처: design.benchmark, M18 (Carbon "Selected = 1 full step, Active = 2 full steps"에서 발상 추출)]

| 단계 | 정의 | 구현 |
| :--- | :--- | :--- |
| **일반 (default)** | 기준 상태 | `sys.pair.*` 기본 페어 |
| **강조 (emphasis)** | 기준 대비 **+1 스텝** (ΔG +12) | 배경 1단계 진하게 또는 보더 승격 |
| **최강조 (prominent)** | 기준 대비 **+2 스텝** (ΔG +24) 또는 면 반전 | 배경 반전(container ↔ on) |

**저강조 (subdued)**: 참고·기존·철거·비활성 표기는 **불투명도 38%가 아니라 GRADE 하향**으로 표현한다. 인쇄에서 불투명도는 예측 불가하므로, 저강조는 **`on-subtle` 토큰(ΔG 40~54 구간)** 으로 별도 공급한다. [출처: design.benchmark, M19 (MD3 disabled 38%의 발상만 차용, 구현은 대체)]

## 2.9 악센트 경제

브랜드 Layer 0이 공급한 `axis.economy` 값을 그대로 강제한다.

| ID | 규칙 |
| :--- | :--- |
| **AE-1** | `design_role: accent` 색의 사용 개수는 **단위 화면당 `economy` 상한 이하** |
| **AE-2** | "단위 화면"의 정의는 **Layer 2 매체 프로파일**이 공급한다 |
| **AE-3** | 상태색(§2.7)·데이터 시각화 색(§2.10)은 **카운트에서 제외**한다 |
| **AE-4** | 악센트가 상한을 넘으면 그것은 악센트가 아니다. 초과분은 `base` 또는 `ground`로 강등한다 |

## 2.10 데이터 시각화 팔레트

### 범주형 (Categorical)

**상한 5색 + 예비 1색.** [출처: design.benchmark, T39 (Atlassian 5–6색 상한 명시. Carbon은 14색 시퀀스를 제공하나 최대 개수 미규정 — §18-11)]

GRADE를 **의도적으로 사다리 배열**하여 흑백 출력 시 부분적 분리를 확보한다. 사용 순서는 GRADE 순이다.

| 순서 | id | HEX | **GRADE** | sand 위 실측 | 색명 |
| :-: | :--- | :--- | :-: | :---: | :--- |
| 1 | `cat-1` | `#C08A2E` | **39** | 2.74 | Ochre |
| 2 | `cat-2` | `#6E8F3C` | **45** | 3.35 | Moss |
| 3 | `cat-3` | `#3C6E9F` | **55** | 4.82 | Steel Blue |
| 4 | `cat-4` | `#8C3B14` | **64** | 6.88 | Burnt Sienna |
| 5 | `cat-5` | `#1B4A43` | **72** | 8.98 | Deep Teal |
| 예비 | `cat-6` | `#5E4370` | **67** | 7.53 | Plum |

**GRADE 사다리**: 39 → 45 → 55 → 64 → 72 (인접차 6·10·9·8)

| ID | 규칙 |
| :--- | :--- |
| **DV-1** | 범주 **6개 초과 시 차트를 분할**한다. 색을 늘리지 않는다 |
| **DV-2** | 시각화 색은 **면(fill) 전용**이다. `cat-1`(ΔG 35)처럼 텍스트 대비를 충족하지 않는 색이 포함되므로, **라벨은 항상 `sys.text.*` 토큰**을 쓴다 |
| **DV-3** | 범주가 3개 이하여도 **§2.5 CO-2(패턴·직접 라벨) 병기 의무는 면제되지 않는다** |
| **DV-4** | 인쇄 산출 전 **CMYK 색역 이탈 검증**을 수행한다. 진한 파랑·초록 계열이 가장 큰 타격을 받는다 [출처: design.benchmark, M23 · §12.1] |

### 발산형 (Diverging)

선택 기준은 **의미론적**이며 매체와 무관하다. [출처: design.benchmark, T39]

| 데이터에 온도·정오(正誤) 연상이 있는가 | 팔레트 |
| :--- | :--- |
| 있다 (예: 초과/미달, 고온/저온) | **Red ↔ Cyan** 축 |
| 없다 (예: 지역 A/B 편차) | **Purple ↔ Teal** 축 |

중앙값은 **중립 회색**이며 GRADE 사다리 중앙에 놓는다.

## 2.11 색 금지 규칙 총괄

| # | 금지 | 근거 |
| :-: | :--- | :--- |
| 1 | ΔG < 40 조합의 텍스트 사용 | CG-4 |
| 2 | `contrast.pairs` 미등록 조합 사용 | CP-4 |
| 3 | HEX·RGB 리터럴 직접 기재 | TN-3 / T33 |
| 4 | HSL 기반 팔레트 보간 | CS-1 |
| 5 | 알파 색 (screen 제외) | CS-3 |
| 6 | 색 단독 정보 전달 | CO-1 |
| 7 | 차트 색 면 위 텍스트 | CO-3 |
| 8 | 순백 전면 배경 | 브랜드 `forbidden` |
| 9 | 그라디언트 배경 | 브랜드 `forbidden` |
| 10 | 악센트 경제 초과 | AE-1 |

---

# 3. 타이포그래피

## 3.1 스케일 생성식

### 등비 단일 비율

```
size(n) = base × r ^ n          r = 1.125  (Major Second)
```

- `base` = **매체 프로파일이 공급**하는 유일한 값 (Layer 2)
- `n` = 스케일 인덱스 (Layer 1 불변)
- **판형·매체가 바뀌면 `base`만 교체**한다. 비율과 인덱스는 그대로다

[출처: design.benchmark, T11 (Spectrum "font-size 1.125 순수 등비 + base 단일 지정") · §16 상충-1]

> **등차 방식(Carbon `Xₙ = Xₙ₋₁ + {INT[(n−2)/4]+1}×2`) 기각 사유**: 등차는 대형 구간 도약 확보에 유리하나 **판형 파생이 기계적이지 않다.** 본 시스템은 3개 매체에 동시 파생하므로 기계적 파생이 결정적 요구다.

### 명명 역할과 인덱스

MD3가 공식 허용하듯, **15개 스타일이 전부 필요하지는 않다.** 9개 역할만 정의하고 나머지 인덱스는 비워 둔다. [출처: design.benchmark, T46]

| 역할 | `n` | `× base` | 용도 |
| :--- | :-: | :---: | :--- |
| `caption` | **−2** | 0.790 | 캡션·출처·각주·범례 |
| `body-sm` | **−1** | 0.889 | 표 셀·보조 본문 |
| **`body`** | **0** | **1.000** | **본문 (기준)** |
| `body-lg` | **+1** | 1.125 | 리드 문장·강조 본문 |
| `title-sm` | **+2** | 1.266 | 소제목 |
| `title` | **+4** | 1.602 | 절 제목 |
| `title-lg` | **+6** | 2.027 | 장 제목 |
| `display` | **+9** | 2.887 | 히어로 헤드라인 |
| `display-lg` | **+12** | 4.110 | 표지·오프닝 |

### 매체별 실체화 `[예시 — Layer 2 소관]`

| 역할 | print (base 10pt) | presentation (base 24px @1920×1080) | screen (base 16px) |
| :--- | ---: | ---: | ---: |
| `caption` | 7.9pt | 19px | 13px |
| `body-sm` | 8.9pt | 21px | 14px |
| `body` | **10.0pt** | **24px** | **16px** |
| `body-lg` | 11.3pt | 27px | 18px |
| `title-sm` | 12.7pt | 30px | 20px |
| `title` | 16.0pt | 38px | 26px |
| `title-lg` | 20.3pt | 49px | 32px |
| `display` | 28.9pt | 69px | 46px |
| `display-lg` | 41.1pt | 99px | 66px |

**반올림 규칙**: print은 0.1pt, presentation·screen은 1px 단위로 반올림한다. **반올림 후 값이 아니라 생성식이 정본**이며, 파생 시 항상 식에서 다시 계산한다.

**GOV.UK 인쇄 스케일 대조** [출처: design.benchmark, T2]: GOV.UK의 인쇄 4단 골격(14/18/24/32pt, A4 1단)에 대해 본 시스템은 12.7/16.0/20.3/28.9pt로 **약 10~15% 작다.** A4 단단(單段)이 아닌 **A3 다단(多段) 조판**을 전제하므로 의도된 차이이며, measure(§3.7) 검증으로 정당성이 확인된다.

## 3.2 판형 간 √2 전환

**스케일 내부**는 1.125 등비, **판형 간 전환**은 √2 배수다. 두 체계는 층위가 다르므로 병용한다. [출처: design.benchmark, §9.4 · M2]

| 전환 | base 배수 | 근거 |
| :--- | :---: | :--- |
| A4 → A3 | **× √2 (141.4%)** | ISO 216 — A계열은 반절 시 종횡비 보존 |
| A3 → A2 → A1 | 각 **× √2** | 동일 |
| A3 → A4 | **× 1/√2 (70.7%)** | 동일 |

**선 굵기는 별개 기제**다. ISO 128 / ISO 9175-1의 제도펜 굵기(0.13·0.18·0.25·0.35·0.5·0.7·1.0·1.4·2.0mm)도 √2 계열이므로, **판형이 한 단계 커지면 선 굵기도 한 칸 이동**한다. 다만 §7.2 SW-2에 따라 **UI 보더는 스케일하지 않는다.**

## 3.3 이원 타입 세트

동일 스케일 위에서 **밀도가 다른 두 세트**를 운용한다. [출처: design.benchmark, T16 (Carbon Productive / Expressive)]

| 세트 | 성격 | 적용 |
| :--- | :--- | :--- |
| **Compact** | 고밀도·고정. 헤딩 도약이 작다 (`title-sm`·`title` 중심) | 본문 페이지, 표·데이터 밀집면, 웹앱 화면 |
| **Expressive** | 저밀도·큰 헤딩. 장문 가독과 원거리 판독 (`title-lg`·`display` 사용) | 표지·장 도비라, 프레젠테이션 슬라이드, 랜딩 |

세트는 **크기 값을 바꾸지 않는다.** 어떤 인덱스를 쓰느냐, 여백을 얼마나 주느냐만 다르다.

## 3.4 행간 (한글 기준)

라틴 승수를 그대로 쓰면 한글 조판은 답답해진다. [출처: design.benchmark, T9 (Spectrum CJK line-height — Heading 1.5× / Body **1.7×**, 라틴 1.3/1.5 대비) · T47]

| 역할군 | **한글 행간** | (라틴 참고) |
| :--- | :---: | :---: |
| `display-lg` · `display` | **1.25** | 1.05~1.1 |
| `title-lg` · `title` · `title-sm` | **1.50** | 1.30 |
| `body-lg` · `body` · `body-sm` | **1.70** | 1.50 |
| `caption` | **1.55** | 1.40 |

> **Spectrum은 CJK 승수를 명문화한 유일한 공개 시스템**이며, 라틴 승수를 한글에 그대로 적용하면 안 된다는 직접 근거를 제공한다.

**베이스라인 정합**: `body` 행간 1.70은 **베이스라인 그리드와 정확히 일치**하도록 매체가 `base`를 선택해야 한다(§4.3). 예: print base 10pt × 1.70 = 17pt = **5.997mm ≈ 6mm** (오차 0.003mm).

## 3.5 웨이트 역전 규칙

**크기가 위계를 담당하고, 웨이트는 역행한다.** [출처: design.benchmark, T19 (Carbon: "a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger")]

| 역할군 | 웨이트 |
| :--- | :--- |
| `display-lg` · `display` | **Regular 400** 또는 Medium 500 |
| `title-lg` · `title` | **Bold 700** |
| `title-sm` | Medium 500 |
| `body` 계열 | Regular 400 |
| `caption` | Medium 500 (작은 크기 보정) |

> 대형 지면에서 대제목을 Bold로 채우면 시각 소음이 된다. A3·프레젠테이션처럼 큰 판면일수록 이 규칙의 효과가 크다.

## 3.6 자간 (Tracking)

| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **TR-1** | **음수 자간은 60px 상당 이상에서만** 적용한다. 그 이하는 0 | T20 (Carbon: 음수 자간 −0.64px는 60px 이상에서만) |
| **TR-2** | 대형 헤드라인의 음수 자간은 **−0.02em을 상한**으로 한다 | 광학 보정. 과하면 한글 자소가 붙는다 |
| **TR-3** | 한글에는 대소문자가 없다. **캡스 톤은 양수 자간으로 만든다** | 브랜드 §8.6 |
| **TR-4** | 라벨·아이브로 톤 자간은 **+0.10em ~ +0.20em** | 톤 표현 |
| **TR-5** | **All caps 라틴 런을 본문에 쓰지 않는다** (가독성 저하) | T40 (Atlassian) |

### 톤 수식자 (Tone Modifier)

크기 역할과 **직교**하는 수식자다. 크기는 §3.1 인덱스가, 톤은 아래가 담당한다.

| 수식자 | 웨이트 | 자간 | 적용 |
| :--- | :--- | :--- | :--- |
| `.label` | Medium 500 | +0.12em | 구역 라벨·스테이지 표기 |
| `.eyebrow` | Medium 500 | +0.18em | 아이브로·상위 분류 표기 |
| `.metric` | Bold 700 | 0, **tabular** | 수치 강조 |
| `.quiet` | Regular 400 | 0 | 저강조 (`on-subtle` 색과 결합) |

## 3.7 Measure (행 길이) — 한글 재정의

### 왜 em인가

원 출처는 전부 **라틴 글자 수** 기준이다. [출처: design.benchmark, §11.1 (Bringhurst 45–75자, 이상 66자, **다단 40–50자**) · §11.2 (Butterick 45–90자)] 한글은 대부분의 글자가 전각(1em)이고 라틴은 평균 0.5em이므로, **글자 수를 그대로 옮기면 행 길이가 2배가 된다.**

따라서 본 시스템은 measure를 **em 단위 행 길이**로 정의한다. 매체·언어 무관하게 성립하는 유일한 형식이다. `[자체 정의]` [출처: design.benchmark, M10]

### 기준값

| 조판 | **행 길이 (em)** | 한글 환산 (약) | 라틴 환산 (약) |
| :--- | :---: | :---: | :---: |
| **1단 (single column)** | **22 ~ 38 em** (이상 **33 em**) | 22~38자 (이상 33자) | 45~75자 (이상 66자) |
| **다단 (multi column)** | **20 ~ 25 em** | 20~25자 | 40~50자 |
| 허용 확장 상한 | 45 em | 45자 | 90자 |

- 환산 계수: 라틴 평균 글자폭 **0.5em**, 한글 **1.0em**
- **[CONFLICT DETECTED]** Bringhurst 45–75자 vs Butterick 45–90자는 두 원문에서 확인된 실제 불일치다. 본 시스템은 **Bringhurst를 기본, Butterick을 허용 확장 범위**로 병기한다 [출처: design.benchmark, §11.2]
- **[인용 금지]** USWDS의 measure 토큰(44~88ex)은 라틴 x-height 기준이며, USWDS 문서는 **"이상적 characters-per-line"을 명시하지 않았다.** 해당 수치를 CPL 권고로 인용하지 않는다 [출처: design.benchmark, §18-18]

### 검증 방법

```
measure(em) = 컬럼 폭 ÷ body 크기
```

`[예시 — Layer 2 소관]` A3 가로, body 10pt(3.5278mm), 12컬럼(폭 25.5mm, 거터 6mm):

| 조판 | 컬럼 병합 | 폭 | measure | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| 1단 | 12 col | 372.0mm | 105.4 em | **초과 — 부적합** |
| 2단 | 6 col | 183.0mm | 51.9 em | **초과 — 부적합** |
| **3단** | **4 col** | **120.0mm** | **34.0 em** | **✓ 1단 이상값 33em 재현** |
| **4단** | **3 col** | **88.5mm** | **25.1 em** | **✓ 다단 권장 상단** |

## 3.8 위계 규칙

[출처: design.benchmark, T40 (Atlassian applying-typography)]

| ID | 규칙 |
| :--- | :--- |
| **TH-1** | 인접 헤딩 레벨 간 **스케일 인덱스 차 2 이상**을 둔다 (본 스케일에서 `title-sm`→`title`은 차 2, `title`→`title-lg`는 차 2) |
| **TH-2** | **헤딩 크기는 본문의 2배를 넘지 않는다** — 단 `display` 계열(표지·히어로)은 예외 |
| **TH-3** | 위계는 **크기·명도·색 대비**로 만든다. 밑줄·테두리로 만들지 않는다 |
| **TH-4** | **텍스트 잘림(truncation)을 설계에 포함하지 않는다.** 잘림이 필요하면 분량 예산(Layer 3)이 잘못된 것이다 |

## 3.9 숫자 조판

[출처: design.benchmark, T41 (Atlassian Metric 스타일 + tabular figures · Spectrum "표에서 우측 정렬" · MD3 tabular numbers)]

| ID | 규칙 |
| :--- | :--- |
| **NM-1** | **표·치수·수량의 숫자는 등폭(tabular figures)** 을 강제한다 (`font-feature-settings: "tnum"`) |
| **NM-2** | 수치 열은 **우측 정렬** 또는 **소수점 정렬** |
| **NM-3** | 수치 강조에는 `.metric` 톤 수식자를 사용한다 (§3.6) |
| **NM-4** | 단위는 수치와 **분리하지 않는다** (줄바꿈 금지, 비분리 공백 사용) |
| **NM-5** | 자릿수 구분은 **쉼표**를 쓴다. 4자리 이하에서는 생략 가능 |

## 3.10 서체 정규화 `[자체 정의]`

동일 pt에서도 서체마다 **시각 크기가 다르다.** USWDS는 라틴 cap-height 기준으로 보정 계수를 토큰 레벨에 내장한다. [출처: design.benchmark, T44 · M-보정 개념]

**한글에는 cap-height 개념이 없으므로 재정의가 필요하다.**

```
normalizationFactor = 기준 서체의 한글 글자면 비율 ÷ 대상 서체의 한글 글자면 비율
```

- **글자면(字面) 비율** = em 사각형 대비 실제 한글 글자가 차지하는 면적 비율
- 기준 서체(브랜드 `type.family.primary`)의 계수를 **1.000**으로 고정
- 폴백 서체가 적용되는 환경에서만 계수를 곱한다

| ID | 규칙 |
| :--- | :--- |
| **NF-1** | 기준 서체 계수는 항상 1.000이다 |
| **NF-2** | 폴백 서체별 계수는 **실측으로 산출**하고 `design.tokens.json`에 등록한다 |
| **NF-3** | 계수 미등록 폴백 서체는 **사용하지 않는다** |
| **NF-4** | 라틴·숫자 혼용 시, 라틴 런에는 별도 계수를 적용하지 않는다 (혼용 조판의 미세 편차는 허용) |

> **[미검증]** 한글 글자면 비율의 표준 측정 방법에 대한 1차 출처는 확인하지 못했다. 초기 구현에서는 **동일 pt로 조판한 표본의 시각 높이 실측 비교**로 계수를 산출한다.

---

# 4. 공간·리듬

## 4.1 기본 단위와 매체 위임

Layer 1은 **스케일의 형태**만 정의하고, **기본 단위의 실제 크기는 Layer 2가 정한다.**

```
space(N) = baseUnit × (N / 100)
```

**[CONFLICT DETECTED] 해소**: 조사 결과 공개 시스템의 리듬 단위가 상충한다 — USWDS·Carbon·ADS·Spectrum **8px** / GOV.UK **5px** / Polaris **4px**. 셋 다 픽셀이므로 인쇄에 직접 적용 불가하다. 본 시스템은 **매체별 분기**로 해소한다. [출처: design.benchmark, §16 상충-3 · M11]

## 4.2 스페이싱 스케일

| 토큰 | 배수 | 용도 |
| :--- | :---: | :--- |
| `space.025` | 0.25× | 아이콘-텍스트 간격, 미세 조정 |
| `space.050` | 0.5× | 인라인 요소 간격 |
| **`space.100`** | **1×** | **기준 — 텍스트 블록 간격** |
| `space.150` | 1.5× | 문단 간격 |
| `space.200` | 2× | 카드 내부 패딩 |
| `space.300` | 3× | 블록 간 간격 |
| `space.400` | 4× | 존(zone) 간격, 외부 여백 |
| `space.600` | 6× | 섹션 구분 |
| `space.800` | 8× | 대형 여백 |

`[예시 — Layer 2 소관]`

| 토큰 | print (baseUnit 6mm) | presentation (12px) | screen (8px) |
| :--- | ---: | ---: | ---: |
| `space.025` | 1.5mm | 3px | 2px |
| `space.050` | 3mm | 6px | 4px |
| `space.100` | **6mm** | **12px** | **8px** |
| `space.200` | 12mm | 24px | 16px |
| `space.300` | 18mm | 36px | 24px |
| `space.400` | 24mm | 48px | 32px |
| `space.600` | 36mm | 72px | 48px |
| `space.800` | 48mm | 96px | 64px |

## 4.3 베이스라인 리듬

> **적용 범위**: 베이스라인 리듬은 **다단 연속 본문을 조판하는 매체**(`print`)에만 적용한다. 슬라이드·화면처럼 **이산 블록을 배치하는 매체**(`presentation`·`screen`)는 BL-1·BL-4를 적용하지 않고, 수직 간격을 `space.050`의 배수로 스냅하는 것(BL-2)으로 갈음한다. 베이스라인 그리드의 목적이 **좌우 단의 행 정렬**(BL-4)이므로, 연속 본문이 없는 매체에서는 목적 자체가 성립하지 않는다.

| ID | 규칙 | 적용 매체 | 근거 |
| :--- | :--- | :--- | :--- |
| **BL-1** | `body` 행간(px/mm)은 **`space.100`과 정확히 일치**해야 한다 | **print** | T45 (GOV.UK "line-height가 5px 배수 → vertical rhythm") |
| **BL-2** | 모든 수직 간격은 **`space.050`의 배수**로 스냅한다 | 전 매체 | 동일 |
| **BL-3** | **폰트 크기는 배수일 필요가 없다.** 행간만 그리드에 정렬하면 리듬이 성립한다 | print | §10.2 |
| **BL-4** | 다단 조판에서 좌우 단의 **행이 서로 정렬**되어야 한다 | **print** | T45 — A3 다단의 핵심 장치 |

> **BL-1의 실제 효과** `[예시]`: print base 10pt × 행간 1.70 = 17pt = 5.997mm. `space.100` = 6mm. 오차 0.003mm로 **베이스라인 그리드와 사실상 완전 정합**한다. 매체 프로파일은 이 정합이 성립하도록 `base`를 역산해서 정해야 한다.

## 4.4 스페이싱 위계 원칙

> **"여백이 많은 요소가 더 중요한 것으로 지각된다."** [출처: design.benchmark, T43 (Carbon spacing/overview)]

| ID | 규칙 |
| :--- | :--- |
| **SH-1** | 상위 헤딩에 더 많은 여백을 주고, 하위로 갈수록 줄인다 |
| **SH-2** | 헤딩의 **위쪽 여백 > 아래쪽 여백**. 헤딩은 뒤따르는 본문과 묶여 보여야 한다 |
| **SH-3** | 관련 요소는 가깝게, 무관한 요소는 멀게 배치한다 (근접성) |

## 4.5 레이아웃 5원칙

[출처: design.benchmark, T42 (Atlassian spacing). 전부 매체 중립]

| # | 원칙 | 적용 |
| :-: | :--- | :--- |
| 1 | **유사성 (Similarity)** | 같은 종류의 정보는 같은 형식으로 표현한다 |
| 2 | **근접성 (Proximity)** | 간격이 그룹을 만든다. 선·박스보다 간격을 먼저 쓴다 |
| 3 | **위계 (Hierarchy)** | 크기·명도·간격 3축으로 만든다 |
| 4 | **리듬 (Rhythm)** | 반복되는 간격 패턴이 예측 가능성을 만든다 (= PF 규칙군) |
| 5 | **광학 보정 (Optical Adjustment)** | 수치가 아니라 눈으로 정렬한다. **단 보정도 스케일 단위를 사용해서** 한다 |

> 5번 단서가 중요하다. "눈으로 맞췄다"는 이유로 `space.100` 대신 `7px`을 쓰는 것은 허용되지 않는다. 보정이 필요하면 **한 단계 위아래 토큰**을 쓴다.

## 4.6 여백률

| ID | 규칙 |
| :--- | :--- |
| **WS-1** | 지면·화면의 **비어 있는 면적 비율은 40~55%** |
| **WS-2** | 하한(40%) 위반 = 과밀. 상한(55%) 위반 = 정보 부족 |
| **WS-3** | 콘텐츠는 가용 밴드를 **위→아래로 채운다.** 상단 쏠림 후 하단 공백을 남기지 않는다 (하단 빈 면적 < 25%) |
| **WS-4** | WS-1의 목표값은 매체별로 조정 가능하다. `screen`은 스크롤이 있으므로 viewport 단위로 판정한다 |

---

# 5. 그리드

## 5.1 책임 분할 원칙

> **"최상위 컨테이너만 그리드에 정렬한다. 내부는 스페이싱 토큰을 쓴다."**
> [출처: design.benchmark, T15 (Atlassian "Only top-level containers need to align to the grid" · Spectrum "Layout regions are the only aspect that should align")]

| ID | 규칙 |
| :--- | :--- |
| **GR-1** | **그리드 정렬 대상 = 최상위 존(zone)·블록**뿐이다 |
| **GR-2** | 존 **내부** 요소는 그리드가 아니라 **스페이싱 스케일**에 스냅한다 |
| **GR-3** | 수평·수직 정렬은 **동등하게 중요**하다. 컬럼만 맞추고 행을 방치하지 않는다 [출처: T18 (Carbon 키 라인)] |

> 이 원칙 하나로 조판 규칙이 극도로 단순해진다. "이 아이콘이 몇 번째 컬럼에 걸리는가"를 계산할 필요가 없어진다.

## 5.2 12컬럼과 2x 파생

기본 컬럼 수는 **12**다. 판형·뷰포트가 작아지면 **2로 나눈다.** [출처: design.benchmark, M3 (Carbon 2x Grid 원리만 채택)]

```
12 → 6 → 3          (또는 12 → 8 → 4, 콘텐츠 성격에 따라)
```

| ID | 규칙 |
| :--- | :--- |
| **GC-1** | 컬럼 수는 **12·8·6·4·3** 중에서만 선택한다 |
| **GC-2** | 마진·거터는 **반드시 매체 단위로 재산정**한다. 제본 여유·재단 여유는 화면에 없는 변수다 |
| **GC-3** | `12 × 컬럼폭 + 11 × 거터 = 콘텐츠 폭`의 **정합이 성립해야 한다.** 소수점 잔차를 남기지 않는다 |

### 정합 검증 `[예시 — Layer 2 소관]`

| 매체 | 전체 폭 | 마진 | 거터 | 콘텐츠 폭 | 컬럼 폭 | 검증 |
| :--- | ---: | ---: | ---: | ---: | ---: | :--- |
| print A3 가로 | 420mm | 24mm | 6mm | 372mm | **25.5mm** | 12×25.5 + 11×6 = 372 ✓ |
| print A4 세로 | 210mm | 12mm | 6mm | 186mm | **10mm** | 12×10 + 11×6 = 186 ✓ |
| presentation | 1920px | 48px | 24px | 1824px | **130px** | 12×130 + 11×24 = 1824 ✓ |
| screen (1440 컨테이너) | 1440px | 24px | 24px | 1392px | **94px** | 12×94 + 11×24 = 1392 ✓ |

## 5.3 허용 분할

임의 분할을 금지하고 **정의된 유형만** 사용한다. 예측 가능성이 "처음 보지만 익숙한"의 실체다.

| 분할 | 컬럼 | 용도 |
| :--- | :--- | :--- |
| `12` | 전폭 | 표지, 대형 도판, 전폭 표 |
| `6:6` | 대칭 2분할 | 비교·대조 |
| `8:4` / `4:8` | 비대칭 2분할 | 본문 + 사이드바 |
| `4:4:4` | 균등 3분할 | 3요소 병렬 |
| `3:3:6` | 가중 3분할 | 맥락 2 + 결론 1 |
| `3:3:3:3` | 균등 4분할 | 4단계 프로세스 |

| ID | 규칙 |
| :--- | :--- |
| **GS-1** | 위 목록 외 분할을 쓰지 않는다 |
| **GS-2** | 신규 분할이 필요하면 **본 파일에 등재 후** 사용한다 (MINOR 버전 증가) |

## 5.4 도판 종횡비 제한

도판·이미지 프레임은 **6개 비율**로 제한한다. [출처: design.benchmark, T17 (Carbon 6종). **[주의]** Carbon 공식 목록은 1:1, 2:1, **2:3, 3:2**, 4:3, 16:9이며, 3:4·1:2는 포함되지 않는다 — §18-7]

| 비율 | 용도 |
| :--- | :--- |
| `1:1` | 아이콘 프레임, 정방 도판 |
| `2:1` | 와이드 배너, 단면도 |
| `3:2` | 사진 표준 (가로) |
| `2:3` | 사진 표준 (세로) |
| `4:3` | 도면 프레임 |
| **`16:9`** | **프로젝션 직결** — A3↔슬라이드 겸용 시 필수 |

> 인쇄물에서 종횡비 제한의 일관성 효과는 화면보다 크다. 지면에서는 이웃한 도판의 비율 불일치가 즉시 눈에 띈다.

---

# 6. 표면·깊이

## 6.1 톤차 기반 표면 분리

> **표면은 그림자가 아니라 톤 차이로 분리한다.**

MD3가 M2→M3에서 그림자를 버리고 톤차로 이행한 것은 **정적 매체에 오히려 유리한 방향**이다. [출처: design.benchmark, M6 · T50]

| ID | 규칙 |
| :--- | :--- |
| **SF-1** | 표면 레벨은 **GRADE 차**로 정의한다 |
| **SF-2** | 인접 레벨의 **ΔG ≥ 5**를 확보한다. 미만이면 인쇄·투사에서 구별되지 않는다 |
| **SF-3** | 표면 레벨은 **최대 3단계**로 제한한다 |

**[정정] Carbon Layering model 축소**: Carbon의 4단계(base/L1/L2/L3, White ↔ Gray 10 교차)는 **인쇄에서 White ↔ `#f4f4f4` 교차가 사실상 구별되지 않고, 프로젝션에서는 완전히 소실**된다. 본 시스템은 3단계로 축소하고 인접 명도차를 확대한다. [출처: design.benchmark, M4]

| 레벨 | 정의 | 라이트 테마 예 |
| :--- | :--- | :--- |
| `surface.base` | 캔버스 | `sand` (G4) |
| `surface.raised` | 카드·패널 | `white` (G0) — ΔG 4… **[주의] SF-2 미달** |
| `surface.sunken` | 함몰 영역·표 헤더 | ΔG ≥ 9 확보 필요 |

> **[CONFLICT DETECTED]** 브랜드 SAMAN의 `sand`(G4)와 `white`(G0)는 ΔG 4로 **SF-2(≥5)에 미달**한다. 두 색의 교차만으로는 표면을 분리할 수 없다. **해소**: `surface.raised`는 **톤차가 아니라 §6.2의 보더**로 분리한다. 이는 SAMAN이 이미 채택한 방식("카드는 흰 면 + 1px 헤어라인 보더, 그림자 없음")과 일치한다.

## 6.2 매체별 Elevation 치환

그림자는 인쇄에서 토너를 낭비하고 투사에서 뭉개진다. Atlassian이 **자체 문서에서 대안을 명시**한다 — *"a border or white space would suffice"*, *"A border is the default approach"*. [출처: design.benchmark, M5]

| 의미 레벨 | **print** | **presentation** | **screen** |
| :--- | :--- | :--- | :--- |
| `sunken` | 옅은 배경 톤 (ΔG +5~9) | 옅은 배경 톤 | 배경 톤 + inset 보더 |
| `default` | 무처리 | 무처리 | 무처리 |
| `raised` | **헤어라인 보더** | 헤어라인 보더 | 보더 + **elevation 그림자 허용** |
| `overlay` | 굵은 보더 + 여백 격리 | 굵은 보더 + 여백 격리 | **그림자 + scrim** |

| ID | 규칙 |
| :--- | :--- |
| **EL-1** | **토큰명은 4레벨 모두 동일**하다. 매체가 표현 방식만 바꾼다 |
| **EL-2** | print·presentation에서 **그림자(box-shadow) 산출을 금지**한다 |
| **EL-3** | screen의 그림자는 `design.medium.screen.md §9`가 정의한다 |
| **EL-4** | 그림자로 표현할 수 있는 것을 **보더로도 표현할 수 있는지 먼저 검토**한다 |

## 6.3 테마 대칭 미러링

라이트 ↔ 다크는 **GRADE 축 대칭**으로 정의한다. [출처: design.benchmark, M17 (Atlassian 다크 모드 대칭 미러링 700↔400, 100↔1000)]

```
GRADE_dark(x) = 100 − GRADE_light(x)      (근사)
```

| ID | 규칙 |
| :--- | :--- |
| **TM-1** | 미러링은 **출발점**이지 결론이 아니다. 미러링 후 **전 페어 대비를 재검증**한다 |
| **TM-2** | 미러링이 성립하지 않는 색(브랜드 악센트 등)은 **테마별 값을 개별 지정**한다 |
| **TM-3** | 정적 식별색(§2.6)은 **미러링 대상이 아니다** |
| **TM-4** | 다크 테마는 **목표 대비를 상향**한다. 흑색 재현이 붕괴되는 환경(투사·저품질 패널)을 전제한다 [출처: T7] |

> **미러링의 실제 한계 예시**: SAMAN `green`(G69)을 미러링하면 G31이 되어야 하나, 브랜드 색상값은 고정이다. 따라서 **다크 테마에서 green은 텍스트가 아니라 면·도형으로만** 쓴다는 규칙이 성립한다 (실측 2.13:1). TM-2의 전형적 사례다.

## 6.4 강조 페이지 (Inline Theme)

> *"고대비 순간(high contrast moments)을 만들기 위해 페이지 일부만 반전 색조로 처리한다."*

Carbon의 인라인 테마는 런타임 기능이지만, **편집 장치로서는 인쇄에서 오히려 강력하다.** [출처: design.benchmark, T50 (Carbon "Only use inline theming for major shifts in color, like high contrast moments")]

| ID | 규칙 |
| :--- | :--- |
| **IT-1** | 강조 페이지·강조 박스는 **다크 테마 페어를 그대로 적용**한다 |
| **IT-2** | 남용 금지 — 문서 전체에서 **10% 이하 지면**으로 제한한다 |
| **IT-3** | 강조 영역 내부에서도 §2.3 페어링 규칙이 그대로 적용된다 |

---

# 7. 반경·획

## 7.1 반경 스케일

| 토큰 | 값 | 적용 |
| :--- | :---: | :--- |
| `radius.none` | 0 | 구조 바, 전폭 요소, 표 |
| `radius.sm` | 0.5× | 뱃지·태그·칩 |
| `radius.md` | 1× | **카드 기본** |
| `radius.lg` | 1.5× | 대형 컨테이너 |
| `radius.pill` | ∞ | 페르소나 칩·필 |

기준값(`1×`)은 Layer 2가 공급한다. `[예시]` print 3mm / presentation 12px / screen 8px.

| ID | 규칙 |
| :--- | :--- |
| **RD-1** | 구조적 요소(전폭 바·표·구분선)는 **항상 `radius.none`** |
| **RD-2** | 중첩된 컨테이너는 **안쪽이 바깥쪽보다 작은 반경**을 갖는다 |
| **RD-3** | 반경은 **판형 확대 시 비례 확대한다** (선 굵기와 반대) |

## 7.2 획 스케일

| 토큰 | 값 | 적용 |
| :--- | :---: | :--- |
| `stroke.hairline` | 1× | 헤어라인 구분선·카드 보더 |
| `stroke.regular` | 2× | 강조 보더·표 외곽 |
| `stroke.bold` | 3× | 구조 강조선 |
| `stroke.icon` | 4× | 아이콘 획 |
| `stroke.connector` | 5× | 프로세스 커넥터 |

| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **SW-1** | 획 굵기는 **매체별 절대 하한**을 갖는다 (Layer 2 소관). print은 0.5pt(0.15mm) 미만을 금지한다 | §12 (역상 최소치) |
| **SW-2** | **판형이 커져도 UI 보더 굵기를 비례 확대하지 않는다** | T10 (Spectrum "border width는 스케일되지 않는다") |
| **SW-3** | SW-2의 예외는 **제도 선(도면 선)** 이다. ISO 128 √2 계열에 따라 **판형 한 단계당 한 칸 이동**한다 | §9.4 |
| **SW-4** | 아이콘 획은 **아이콘 그리드에 대한 비율**이므로 아이콘과 함께 스케일된다 | 브랜드 IC-6과 구분 |

> **SW-2와 SW-3의 구분이 중요하다.** "카드 테두리"는 UI 요소이므로 A3→A1에서도 동일 굵기를 유지한다. "단면 외형선"은 제도 선이므로 0.35mm → 0.5mm로 한 칸 이동한다.

---

# 8. 파운데이션 검증 규칙

## 8.1 자동 검증 항목 (기계 판정)

| # | 항목 | 판정 기준 | 실패 시 |
| :-: | :--- | :--- | :--- |
| **F1** | **토큰 참조 무결성** | 미정의 토큰 참조 **0건** | 빌드 중단 |
| **F2** | **리터럴 검출** | `comp` 계층 및 산출물의 HEX·치수 리터럴 **0건** | 빌드 중단 |
| **F3** | **`hex` ↔ `rgb` 정합** | 전 색 일치 | 빌드 중단 |
| **F4** | **대비 페어 검증** | `contrast.pairs` 전 쌍 프로그램 재계산, 등록값과 일치 | 빌드 중단 |
| **F5** | **ΔG 임계 준수** | 매체별 목표(§2.1) 충족 또는 CG-2 명시 등록 | 빌드 중단 |
| **F6** | **그리드 정합** | `cols × colW + (cols−1) × gutter = contentW` 오차 0 | 빌드 중단 |
| **F7** | **베이스라인 정합** | `body 크기 × 행간 = space.100` (허용 오차 0.5%) | 경고 |
| **F8** | **매체 값셋 완전성** | 사용 토큰의 해당 매체 값 누락 0건 (TN-6) | 빌드 중단 |
| **F9** | **md ↔ json 드리프트** | 본 파일 표의 수치와 `design.tokens.json` 일치 | 빌드 중단 |

> **F9의 배경**: 조사 대상 8개 시스템 중 **최소 5개**에서 공개 문서와 공식 토큰 패키지 간 값 불일치(버전 드리프트)가 확인됐다. MD3 state layer(10% vs 12%), Spectrum 컬러 스톱 수(14 vs 13 vs 16), Carbon 컬럼 수(16 vs 4/8/16 vs 12) 등. 선행 SAMAN 시스템도 **4중 버전 표기**로 같은 실패를 겪었다. 드리프트는 예외적 사고가 아니라 **디자인 시스템의 기본 실패 모드**이므로 검증을 강제한다. [출처: design.benchmark, §12 조사 방법 · §18]

## 8.2 육안 검수 항목 (기계 판정 불가)

| # | 항목 | 근거 |
| :-: | :--- | :--- |
| V1 | measure가 §3.7 범위 내인가 | 실제 조판 결과 확인 필요 |
| V2 | 여백률 40~55% (WS-1) | 면적 측정 |
| V3 | 악센트 경제 준수 (AE-1) | 개수 계수 |
| V4 | 색 단독 의존 없음 (CO-1) | 흑백 출력 후 판독 시험 |
| V5 | 위계가 크기·명도로 식별되는가 (TH-3) | 축소 판독 시험 |
| V6 | 다단 행 정렬 (BL-4) | 겹쳐보기 |
| V7 | 광학 보정이 스케일 단위로 되었는가 (§4.5-5) | 값 확인 |

> GDS 인용: **"자동 도구로 발견되는 문제는 전체의 약 30%에 불과하다."** 자동 검증(§8.1)과 육안 검수(§8.2)는 대체 관계가 아니라 병행 관계다. [출처: design.benchmark, M22]

---

## 근거 출처 요약

본 파일이 인용한 벤치마킹 항목:
**T1 · T4 · T5 · T6 · T7 · T9 · T10 · T11 · T12 · T13 · T14 · T15 · T16 · T17 · T18 · T19 · T20 · T32 · T33 · T38 · T39 · T40 · T41 · T43 · T44 · T45 · T46 · T47 · T50 · T53 · T54 · M3 · M4 · M5 · M6 · M10 · M11 · M13 · M17 · M18 · M19 · M22 · M23 · §9.4 · §11.1 · §11.2 · §12 · §16 · §18**

전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`

**`[자체 정의]` 항목**: §3.7 em 기반 measure 재정의 · §3.10 한글 글자면 비율 정규화 · §2.7 상태색 4종 재선정 · §2.10 범주형 GRADE 사다리 · §2.1 매직 넘버 40/55/70 산출

**[미검증] 항목**: §3.10 한글 글자면 비율의 표준 측정 방법 (1차 출처 미발견 — 실측 대체)

**[CONFLICT DETECTED] 해소 이력**: §3.7 Bringhurst ↔ Butterick 행장 불일치 (병기 처리) · §4.1 8px/5px/4px 리듬 상충 (매체별 분기) · §6.1 `sand`↔`white` ΔG 4 미달 (보더 분리로 해소)