AXIS

# UPINTER AXIS — Design System v3.2

> 유피인터 통합 디자인 가이드 · AI 연동용 정본 (Markdown)
> 시각 원본: `Reference/UPINTER_2026_Company_Profile.pdf` · 토큰 정본: `tokens/upinter.tokens.json`
> 이 문서와 토큰 파일이 어긋나면 토큰 파일이 이깁니다.

---

## 0. 이 문서를 AI에게 주는 방법

이 문서는 LLM·에이전트가 유피인터 산출물(웹, 문서, 슬라이드, 솔루션 UI, 영업 자료)을 **생성하거나 검토할 때** 참조하는 규칙서입니다.

- 시스템 프롬프트, 프로젝트 지식, 또는 저장소 루트의 `DESIGN.md`로 제공합니다.
- 산출물을 생성한 뒤 반드시 **§12 출고 전 체크리스트**를 스스로 통과시킵니다.
- 우선순위: **사용자의 명시적 지시 > 이 문서 > 일반 디자인 관행.** 이 문서와 충돌하는 일반 관행(둥근 카드, 그라디언트, 다색 팔레트)은 따르지 않습니다.
- 확신이 없으면 **더 적게** 합니다 — 색을 빼고, 굵기로 해결하고, 요소를 줄입니다.

---

## 1. 브랜드 기반

### 1.1 회사
- **UPINTER(유피인터)** — Global Execution Company. 한국 브랜드의 해외 진출을 **직접 실행**하는 회사.
- 마케팅으로 수요를 만들고(콘텐츠·KOL·현지 채널), 세일즈로 거래에 연결하고(바이어·리테일·라이브 커머스), 데이터·AX로 다음 실행을 정확하게 만든다.
- 시장: 중국 · 일본 · 대만 · 동남아. 파트너 브랜드 120+. 본사 대구, 지사 서울.
- 태도: **전략을 제안하는 회사가 아니라 시장에서 직접 파는 회사.** 장식이 아니라 정확함, 인상이 아니라 근거.

### 1.2 다섯 원칙 (판단이 갈릴 때 이 순서로)
1. **색은 셋, 강조는 하나.** 흰색·검정·버밀리온. 버밀리온은 화면당 한 곳.
2. **볼드가 위계를 만든다.** 색으로 위계를 만들지 않는다. 굵기·크기가 먼저, 색은 마지막에 한 번.
3. **구조는 번호와 흐름으로.** 순서가 있으면 `01 → 02 → 03`, 병렬이면 패널. 화살표는 항상 왼쪽→오른쪽.
4. **숫자가 말한다.** 형용사 대신 수치. 큰 숫자는 버밀리온, 라벨은 작은 회색 대문자.
5. **읽히지 않으면 없는 것.** §5의 가독성 하한선은 미학보다 우선한다.

### 1.3 말하는 방식 (카피)
- 짧은 단언 · 능동태 · 수치 우선 · 주어 분명.
- 영문 대문자 슬로건 한 줄 + 한글 풀이 한 줄. 예: `MARKETING CREATES DEMAND.` / 마케팅은 수요를 만든다.
- 판별법: **그 문장을 경쟁사 이름으로 바꿔도 성립하면 지운다.**
- 금지: "혁신적인", "최적화된", "원스톱 토탈 솔루션", "시너지 창출", "니즈에 맞춘" 등 검증 불가 형용사와 피동태.

### 1.4 CI — 심볼과 워드마크
- 정식 CI = 지구본 심볼(여섯 화살표) + `UP INTER` 워드마크의 세로 조합. 단색만. 원본 `brand/UPINTER_CI.png`(2480×1636 · #231F20), 시스템 안에서는 잉크 `#121113`으로 통일. 가이드 헤더·슬라이드 상단의 "UPINTER + 밑줄"은 디지털 전용 약식 텍스트 마크이며 정식 CI를 대신하지 않는다.
- 변형 네 가지 × 색 세 가지: 세로(기본) · 가로(높이 부족) · 심볼 단독(아이콘 · 프로필) · 워드마크 단독(심볼 자리 없을 때) × 잉크 · 흰색 · 버밀리온 → `brand/logo-<vertical|horizontal|symbol|wordmark>-<ink|white|vermilion>.png`, `logo-symbol-*-512.png`. 가이드 01.4에서 타일을 클릭하면 PNG가 클립보드에 복사된다. 새 조합은 만들지 않는다.
- 색: 잉크(흰 · 틴트 · 회색 바탕) · 흰색(검정 · 버밀리온 · 사진 위) · 버밀리온(흰 바탕, 그 페이지의 강조 한 곳일 때만 — §3.5). 그라디언트 · 듀오톤 · 외곽선 · 그림자 금지.
- 여백: 워드마크 대문자 높이(x)만큼 사방(세로 조합은 심볼 폭의 1/6). 최소 크기: 세로 폭 32mm · 128px, 가로 50mm · 200px, 심볼 12mm · 48px, 워드마크 20mm · 80px. 32px 이하 파비콘용 단순화 마크는 미정.
- 가로 조합 규칙: 심볼 높이 = 워드마크 높이 × 2.2 · 간격 = 워드마크 높이 × 0.6 · 세로 중앙 정렬(`brand/build-brand.mjs`).
- 금지: 비율 변경 · 회전 · 간격 변경 · 워드마크 재조판 · 색 변경 · 효과 · 저해상 확대 · 대비 3:1 미만 배경 · 다른 로고 옆 밀착.

---

## 2. 금지 규칙

패널(둥근 틴트 면)은 허용한다. 금지하는 것은 생성형 도구의 기본값이다.

| # | 금지 | 이유 | 대체 |
|---|---|---|---|
| 01 | 한쪽에 붙인 색 바(left accent border) | 생성형 도구의 최다 출력 형태 | 패널 안 36px 짧은 밑줄 또는 상단 번호 |
| 02 | 그림자(box-shadow)로 만드는 고저 | 흰 바탕에서 탁하고 인쇄에서 사라짐 | 틴트 면 전환 또는 1px 테두리 |
| 03 | 그라디언트 | 색이 늘고 문서에서 재현 불가 | 단색. 예외: 사진 위 가독성 스크림(불투명도만 변화) |
| 04 | 버밀리온 외 유채색 | 팔레트에 없음 | 없음. 차트 4계열 이상에서만 확장(§9) |
| 05 | 이모지 마커 · 컬러풀 클립아트 | 플랫폼마다 다르게 그려짐 | 얇은 원 안 라인 아이콘(§8) |
| 06 | 본문 가운데 정렬 | 읽는 속도 저하 | 왼쪽 정렬. 패널 내부·스트립만 예외 |
| 07 | 바운스 · 스프링 · 확대 호버 | 톤에 맞지 않음 | 200ms 감속, 색·불투명도만 변화 |
| 08 | 회색 농도로만 위계 만들기 | 대비 하한 위반 | 굵기·크기·간격(§5.4) |
| 09 | 작은 글자에 원색 버밀리온 `#F9431C` | 흰 바탕 3.59:1, AA 미달 | 13–17px는 `#DE2F00` |
| 10 | 패널 안에 패널 | 위계가 평평해짐 | 패널 안은 텍스트와 괘선만 |

추가 금지: 인디고·퍼플·시안 계열, 글래스모피즘, 아이콘+제목+두 줄 카드 3단 나열, 100vh 히어로, 스크롤 트리거로 숨긴 콘텐츠, 3D 일러스트, 지구본 위 화살표, 제네릭 스톡 사진.

---

## 3. 컬러

### 3.1 기본 세 값 (소개서 실측 · 변경 금지)
```
BRAND  #F9431C   버밀리온 · oklch(65% 0.223 33)
INK    #121113   본문 · 제목 · 챕터 디바이더 바탕
PAPER  #FFFFFF   콘텐츠 바탕
TINT   #FFF7F4   패널 · 스트립 배경
GREY   #F6F6F6   회색 패널
```

### 3.2 버밀리온 램프
| step | hex | 흰 바탕 대비 | 잉크 대비 | 용도 |
|---|---|---|---|---|
| 50 | #FFF2EF | 1.09 | 17.21 | 틴트 |
| 100 | #FFE2DB | 1.22 | 15.38 | 틴트 |
| 200 | #FFC9BC | 1.47 | 12.85 | 그래픽 |
| 300 | #FFA28D | 1.94 | 9.69 | 다크 모드 그래픽 |
| 400 | #FF7457 | 2.66 | 7.07 | 다크 모드 그래픽 · 차트 |
| **500** | **#F9431C** | **3.59** | **5.24** | **브랜드 원색 — 큰 글자·면·밑줄·아이콘** |
| **600** | **#DE2F00** | **4.65** | 4.05 | **작은 글자(13–17px) · 버튼 면** |
| 700 | #B52100 | 6.60 | 2.85 | 버튼 호버 면 (라이트·다크 동일) |
| 800 | #8D1600 | 9.34 | 2.01 | — |
| 900 | #670D00 | 12.85 | 1.47 | — |

### 3.3 뉴트럴 (순중립)
`#FFFFFF` 0 · `#FAFAFA` 50 · `#F6F6F6` 100 · `#EBEBEB` 200 · `#D9D9D9` 300 · `#BDBDBD` 400 · `#9E9E9E` 500 · `#6B6B6B` 650 · `#5F5F5F` 700 · `#3D3D3D` 800 · `#262626` 900 · `#121113` 950

### 3.4 시맨틱 토큰 (라이트 / 다크) — 컴포넌트는 이것만 참조
| 토큰 | Light | Dark | 대비(L/D) | 역할 |
|---|---|---|---|---|
| `surface-canvas` | #FFFFFF | #121113 | — | 주 바탕 |
| `surface-panel` | #F6F6F6 | #1E1D1F | — | 회색 패널 |
| `surface-tint` | #FFF7F4 | #2A1A15 | — | 틴트 패널 |
| `surface-inverse` | #121113 | #FFFFFF | — | 반전 밴드 · 챕터 디바이더 |
| `surface-brand` | #F9431C | #F9431C | — | 브랜드 면 (큰 글자만 얹음) |
| `surface-action` | #DE2F00 | #DE2F00 | — | 버튼 면 (흰 글자 4.65) |
| `text-primary` | #121113 | #FFFFFF | 18.83 / 18.83 | 본문 · 제목 |
| `text-secondary` | #5F5F5F | #BDBDBD | 6.39 / 10.02 | 보조 설명 |
| `text-tertiary` | #6B6B6B | #9E9E9E | 5.33 / 7.03 | 메타 · 캡션 |
| `text-accent` | #DE2F00 | #F9431C | 4.65 / 5.24 | **작은** 강조 · 아이브로우 · 링크 |
| `text-brand` | #F9431C | #F9431C | 3.59 / 5.24 | **큰** 강조 (19px 볼드↑ 또는 24px↑) |
| `text-on-brand` | #FFFFFF | #FFFFFF | — | 브랜드·액션 면 위 글자 |
| `text-inverse` | #FFFFFF | #121113 | 18.83 / 18.83 | 반전 면(`surface-inverse`) 위 글자 |
| `rule-hairline` | #EBEBEB | #2C2B2D | — | 기본 괘선 1px |
| `rule-default` | #D9D9D9 | #3A393B | — | 패널 테두리 1px |
| `rule-strong` | #121113 | #FFFFFF | — | 제목 아래 · 표 헤더 2px |
| `rule-brand` | #F9431C | #F9431C | 3.59 / 5.24 | 밑줄 3px · 화살표 · 원 테두리 |
| `action-hover` | #B52100 | #B52100 | 6.60 / 6.60 | 버튼 호버 면 (흰 글자) · 라이트·다크 동일 |
| `focus-ring` | #DE2F00 | #F9431C | — | 키보드 포커스 2px |

CSS 변수명: `--up-<토큰>` (예: `var(--up-text-accent)`). `dist/upinter.css` 참조.

### 3.5 핵심 규칙
- **원색 `#F9431C`는 크게만.** 19px 볼드 이상 또는 24px 이상 텍스트, 면, 밑줄, 아이콘, 화살표에 사용. 13–17px 텍스트에는 `#DE2F00`.
- **버튼 = `#DE2F00` 면 + 흰 글자.** 라이트·다크 동일. 호버는 `#B52100`(흰 글자 6.60:1), 색만 바뀌고 크기·위치는 그대로. 브랜드 면 `#F9431C` 위에는 큰 흰 글자만.
- **강조 예산: 화면당 버밀리온 한 곳.** 헤드라인 밑줄, 큰 숫자 하나, 버튼 하나, 버밀리온 채움 원형 아이콘(`filled`, §8.1) 중 하나만. 번호·화살표·짧은 밑줄·원 테두리 아이콘(`circle`)은 구조 요소라 예산에 세지 않음(단 화면당 8개 이하).
- 버밀리온 면적(디바이더 제외) ≤ 화면의 6%. 전면 버밀리온은 문서당 한 번(챕터 디바이더).
- 본문 안 강조는 색이 아니라 굵기 700.
- **그레이스케일 테스트:** 채도 0으로 낮춰도 위계가 읽혀야 한다.

### 3.6 기능색 (상태 전용 · 브랜드 맥락 사용 금지 · 항상 텍스트 병기)
| 상태 | Light text | Light tint | Light line | Dark text | Dark tint | Dark line |
|---|---|---|---|---|---|---|
| 완료 | #397D4B | #E9F8EB | #5CA46D | #4A995D | #112716 | #236E3A |
| 대기 | #946600 | #FEF2DF | #C18A22 | #B57E00 | #2F1E00 | #825900 |
| 중단 | #C14349 | #FFEFEF | #E86F73 | #D0666A | #391415 | #AB3841 |
| 안내 | #2876A5 | #E9F6FF | #4D9CD1 | #3690C7 | #0B2435 | #046697 |

CSS 변수: `--up-<success|warning|danger|info>-<text|tint|line>`. text는 같은 계열 틴트 위와 캔버스(흰/잉크) 위 모두 4.5:1 이상(v3.2에서 한 단계 조정), line은 캔버스 대비 3:1(필·테두리용). 상태 필은 13px 700 텍스트를 반드시 병기한다.

### 3.7 차트
- 3계열 이하: `#F9431C` + 회색(`#7A7A7A` / dark `#BDBDBD`)만.
- 4계열 이상 확장(light): #F9431C · #7A7A7A · #A86556 · #008298 · #438353 · #836BAC
- 4계열 이상 확장(dark): #FF866C · #BDBDBD · #E19989 · #58BED5 · #7FC08C · #B7A0E4
- 강도(sequential, light): #FFF0EC → #FFD2C8 → #FFB19F → #FF866C → #FC4925 → #CC2C03
- 강도(sequential, dark): #580D00 → #861500 → #B52100 → #E63100 → #FF6647 → #FFAC99
- CSS 변수: `--up-chart-1…6` · `--up-seq-1…6` (테마에 따라 자동 전환)
- 단일 계열 차트는 최고값 하나만 버밀리온, 나머지 회색.

---

## 4. 타이포그래피

### 4.1 서체
- **Pretendard Variable** — 한글·라틴 전부. 표제 700–800, 본문 400, 라벨 700.
  스택: `'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif`
- **IBM Plex Mono** — 코드·토큰명·데이터 화면의 수치에만. 라벨에 남용 금지.
- 웹 폰트 없는 환경(문서·PPT): Pretendard 설치본. 대체는 Inter(라틴) + Noto Sans KR(한글).

### 4.2 스케일 (웹 기준)
| 이름 | 크기 | 행간 | 자간 | 굵기 |
|---|---|---|---|---|
| display | 96px | 0.96 | −0.03em | 800 |
| h1 | 64px | 1.02 | −0.025em | 800 |
| h2 | 44px | 1.12 | −0.02em | 700 |
| h3 | 32px | 1.22 | −0.015em | 700 |
| h4 | 24px | 1.32 | −0.01em | 700 |
| h5 | 19px | 1.42 | −0.005em | 700 |
| lead | 20px | 1.65 | 0 | 400 |
| body | 17px | 1.75 | 0 | 400 |
| small | 15px | 1.68 | 0 | 400 |
| micro | 13px | 1.50 | 0 | 400 — 절대 하한 |
| eyebrow | 13px | 1.40 | +0.12em | 700 · 대문자 · `text-accent` |
| kicker | 15px | 1.40 | +0.04em | 700 · 대문자 · 잉크 |

인접 단계 크기 비 ≥ 1.25 (속성 2개 이상 동시 변경 시 1.15 허용).

### 4.3 페이지 헤드 스택 (모든 콘텐츠 페이지의 시작)
```
[좌상단]
1. eyebrow   13px · 700 · 대문자 · +0.12em · #DE2F00     ← 페이지 주제 (영문)
2. kicker    15px · 700 · 대문자 · 잉크                    ← 영문 슬로건 한 문장
3. desc      13–15px · 400 · 회색 · 60자까지 한 줄          ← 한글 한두 줄. 문단이 아니므로 §5.3 측정 규칙과 별개
4. headline  32–44px · 700 · 잉크                          ← 핵심 구절 하나에만 버밀리온 밑줄 3px
[우상단] 페이지 번호 26px · 800
[하단]   좌 www.up-inter.com · 우 문서명 · 13px 회색
```

### 4.4 한·영 혼용
- 한 문장 안 한글·라틴 같은 크기. 라틴을 키우지 않음.
- 한글 본문 자간 0. 라틴 표제 −0.02~−0.03em. 대문자 라벨 +0.04~+0.12em.
- 혼용 문단 행간 1.75(한글 기준).
- 한글 이탤릭 금지. 강조는 700.
- 한글 본문 400 이상. 표제 700, 디스플레이만 800.
- 큰 숫자 800 + `font-variant-numeric: tabular-nums`. 단위 기호(+ % M K)는 같은 굵기로 붙임: `12M+` `2.4M+` `+187%`.
- **`word-break: keep-all; overflow-wrap: break-word;`** — 한글 어절 중간 줄바꿈 금지. 표제 `text-wrap: balance`, 문단 `text-wrap: pretty`.
- 밑줄(`.ul`)은 헤드라인당 **하나**, 결론이 되는 구절에만.

---

## 5. 가독성과 위계 (하한선 · 미학보다 우선)

### 5.1 최소 크기
| 매체 | 본문 최소 | 보조 최소 | 절대 하한 |
|---|---|---|---|
| 웹 (데스크톱·모바일 동일) | 17px | 15px | 13px |
| 솔루션 UI | 15px | 13px | 13px |
| 문서·제안서 A4 | 10.5pt | 9pt | 8pt (각주만) |
| 슬라이드 16:9 발표용 | 20pt | 16pt | 14pt |
| 슬라이드 화면 열람용 | 12pt | 10pt | 9pt |
| 인쇄 콜래터럴 | 9.5pt | 8pt | 7pt (법정 고지만) |

**하한을 깎아서 내용을 넣지 않는다.** 자리가 부족하면 내용을 줄이거나 페이지를 나눈다.

### 5.2 행간
한글 본문 1.70–1.80(기본 1.75) · 라틴 1.50–1.60 · 혼용 1.75 · 표제 19–32px 1.22–1.42 · 대형 표제 44px↑ 0.96–1.12 · 표·패널 내부 1.45–1.55.

### 5.3 한 줄 길이
한글 25–40자(최적 33) · 라틴 45–75자(최적 66) · CSS `max-width: 34em` (17px 기준 약 590–650px). 넓은 화면은 본문 폭을 고정하고 여백을 남긴다.
예외: 페이지 헤드의 설명 줄(§4.3 desc)은 문단이 아니라 한 문장이므로 60자까지 한 줄로 둔다. 캡을 40자로 걸면 여백이 남는데도 접힌다.

### 5.4 위계
- 한 화면 최대 **4단** (아이브로우 → 헤드라인 → 본문 → 메타). 5단이 필요하면 화면을 나눈다.
- 인접 단계는 크기·굵기·색·간격 중 **최소 2가지**를 동시에 바꾼다.
- 인접 단계 크기 비 ≥ **1.25배** (속성 2개↑ 변경 시 1.15배).

### 5.5 근접성
**그룹 사이 간격 ≥ 그룹 내부 간격 × 2.**
라벨↔값 4–8px · 항목 내 줄 8–12px · 항목↔항목 24–32px · 병렬 패널 16px · 별개 블록 48px · 절↔절 64–96px · 표제 위:아래 ≥ 2:1 (표제는 아래 본문에 붙는다).

### 5.6 정렬
왼쪽 정렬 기본. 가운데 정렬은 패널 내부·스트립·플로우 스텝·챕터 디바이더 우측 문장만. 같은 층위는 같은 기준선. 화살표는 →. 숫자는 우측 정렬.

### 5.7 구조
한 화면 한 메시지 · 목록 5±2 · 플로우 3–5단계 · 문단 3–4줄 · 첫 문장이 결론 · 수치는 문장 밖(스탯) · 단위는 라벨에.

---

## 6. 그리드

### 6.1 간격 스케일 (`--up-space-N`)
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160 px. 스케일 밖 값 사용 금지.

### 6.2 판면
| 매체 | 컬럼 | 거터 | 판면·여백 |
|---|---|---|---|
| 웹 데스크톱 | 12 | 32px | 최대 1200px · 좌우 72px |
| 웹 모바일 | 4 | 16px | 유동 · 좌우 24px |
| 슬라이드 16:9 | 12 | 24px | 1920×1080 · 상하 60 · 좌우 86px |
| 문서 A4 | 12 | 5mm | 상 20 · 하 25 · 좌우 20mm |
| 솔루션 UI | 12 | 16px | 사이드바 240px · 4px 단위 |

### 6.3 페이지 해부 (16:9)
좌상단 아이브로우·키커·설명 / 우상단 번호 / 본문 좌 5 : 우 7 (왼쪽 헤드라인·근거, 오른쪽 시각 요소) / 하단 URL·문서명.

### 6.4 형태
- 반경: 패널 16px · 작은 요소 8px · 필·원형 아이콘 999px · 괘선 목록·표·이미지 0.
- 그림자 없음. 테두리는 1px `rule-hairline` 또는 `rule-default`.

---

## 7. 구획 체계 (카드 대신 이 여섯 가지)

### 7.1 틴트 패널 — 병렬 항목 2–3개
```
[면] #FFF7F4 틴트 또는 #F6F6F6 회색 · 번갈아 배치 · 반경 16px · 테두리·그림자 없음
[내부] 상하 32 · 좌우 24 · 요소 간 12px · 가운데 정렬
[순서] 번호(32px 800 #F9431C) → 제목(19px 700 대문자) → 밑줄(36×3px #F9431C) → 태그(13px 700 대문자 회색 · 아래 1px 괘선) → 설명(15px 회색)
[금지] 패널 안 패널 · 한쪽 색 바 · 아이콘 남용
```

### 7.2 번호 플로우 — 순서 있는 과정 3–5단계
```
원 64px · 테두리 1.5px #F9431C · 채움 없음 · 안에 라인 아이콘 26px #F9431C (둥근 종단)
기본 5단계 아이콘(§8.1 라이브러리): diagnose → prioritize → pilot → scale → operate · 순환 화살표는 loop
위: 번호 13px 800 #F9431C · 아래: 제목 15px 700 대문자 잉크 · 설명 13px 회색
화살표 20px · 2px 획 · #F9431C · 항상 →
순환은 원형 배치(4개 이하)
```

### 7.3 스탯 블록 — 한 줄에 2–4개
```
숫자 34–44px · 800 · #F9431C · 단위 기호 0.55배로 붙임 (12M+ · KRW 2.3B+ · 76%)
라벨 13px · 700 · 대문자 · 회색 · +0.08em
설명 13px 회색
넷 이상이면 마지막은 잉크(#121113)
```

### 7.4 스트립 — 페이지 하단 결론 한 줄
```
테두리형: 1px #F9431C · 반경 8px · 흰 바탕
틴트형: #FFF7F4 면 · 테두리 없음
내용: 영문 대문자 슬로건(첫 구절만 #F9431C 700) + 한글 풀이 15px 회색
페이지에 한 번
```

### 7.5 괘선 목록 — 텍스트 나열
```
행: 제목 19px 700 + 설명 15px 회색 (좌) · 대문자 라벨 13px 700 #DE2F00 (우)
구분: 1px rule-hairline만 · 배경·테두리·그림자 없음
```

### 7.6 챕터 디바이더 — 장 사이 전면 페이지
```
바탕 #121113 (문서당 한 번 #F9431C)
좌상단 로고(밑줄 2px #F9431C) · 우상단 번호
좌: "0N—" 40px 800 + 영문 단어 100–124px 800 −0.035em 흰색 (Marketing / Sales / Data / AX / What's Next)
우하단: 한글 두 줄 19px 우측 정렬 · 핵심 구절만 700
사진 없음
```

---

## 8. 아이콘과 이미지

### 8.1 아이콘
24×24 그리드 · 획 1.5px 고정 · 둥근 종단(round cap · join) · 채움 없음 · `currentColor` · 크기 16/20/24/32.
기본 형식: **64px 얇은 원(1.5px #F9431C) 안 26px 라인 아이콘.** 단독 사용 시 잉크·회색, 버밀리온 단독 아이콘은 화면당 하나.
금지: 채움 · 듀오톤 · 3D · 이모지 · 컬러풀 클립아트.
- **라이브러리 `icons/`** — 142종 · 5묶음 · 8변형. 이름은 영문 소문자-하이픈.
  - 파일: `svg/<name>.svg`(currentColor) · `png/<변형>/<name>.png`(512px 투명) · 웹 스프라이트 `upinter-icons.svg`(`<use href="#up-<name>">`) · 매니페스트 `icons.json`(이름 · 묶음 · 한글 · `kw` 검색어).
  - 변형: 라인 `ink · vermilion · white` · 원형 `circle · circle-white`(64 원 테두리 1.5 안 26 아이콘, §7.2) · 채움 원형 `filled · filled-ink · filled-tint`(면 위 흰 라인 — 아이콘 자체는 채우지 않음. `filled`는 강조 예산(§3.5)에 세어 화면당 하나, 나열에는 `circle` 또는 `filled-tint`).
  - 실행 프로세스: diagnose · prioritize · pilot · scale · operate · loop · schedule · milestone · timeline · adjust · roadmap · history · stopwatch · layers · kanban · presentation
  - 마케팅: campaign · content · live · kol · reach · engagement · chat · share · review · hashtag · camera · image · film · mic · gift · ticket · trophy · thumbs-up · bookmark · newspaper · smartphone · cursor · award · layout · quote
  - 세일즈 · 물류: buyer · store · bag · cart · tag · global · location · export · delivery · inventory · payment · contract · ship · plane · warehouse · factory · building · return · coins · wallet · receipt · barcode · qr-code · percent · translate · headphones · stamp · map
  - 데이터 · AX: bar-chart · line-chart · pie-chart · database · ai · automation · dashboard · filter · table · cloud · code · insight · trend-down · activity · bot · sparkles · server · shield · key · terminal · report · network
  - 인터페이스: user · bell · mail · phone · arrow-right · arrow-up-right · chevron-down · check · close · plus · download · copy · edit · trash · menu · settings · info · alert · help · x-circle · lock · unlock · link · external-link · home · file · folder · upload · print · more · chevron-up · chevron-right · chevron-left · arrow-left · arrow-up · arrow-down · minus · paperclip · eye-off · grid · list · save · log-out · sun · moon · zoom-in · clipboard · user-plus · monitor · id-card · toggle
  - 찾기: 갤러리(HTML §08.1 · `icons/index.html`)에서 변형을 고르고 이름·한글·키워드로 검색해 클릭 복사 · PNG 저장. 없는 아이콘은 같은 규격으로 `src/icons.mjs`에 `kw`와 함께 추가하고 `node build.mjs`.

### 8.2 사진
피사체는 **현장**(매장·팝업·라이브·이벤트·창고). 스크린샷은 실제 UI 그대로, 기기 프레임 없이.
2–5장 그리드, 간격 8–12px, 반경 0(패널 안 8px). 캡션 13px 회색 대문자(`BOHEMSEO × NUBIAN`). 보정 최소, 필터 없음.
금지: 제네릭 스톡 · 악수 · 지구본 화살표 · 3D 렌더.

---

## 9. 데이터

### 9.1 표
세로 괘선 없음 · 헤더 13px 700 대문자 회색 + 하단 2px 잉크 · 행 하단 1px 얇은 괘선 · 얼룩말 배경 없음 · 수치 우측 정렬 tabular-nums · 단위는 열 제목에 · 넘치면 컨테이너 가로 스크롤.

### 9.2 차트
막대 반경 0 · 가로 격자만 · 축 0에서 시작 · 값은 막대 끝에 직접 표기 · 범례 대신 직접 라벨 · 3계열 이하 버밀리온+회색 · 단일 계열은 최고값만 버밀리온.

### 9.3 수치 표기
축약 `12M+` `2.4M+` `23K+` `KRW 312M+` · 표 안에서만 천 단위 쉼표 `82,400` · 증감 `+187%` `−6.2%`(U+2212) · 기간 `2025.01 – 2026.03` · 비교 수치는 같은 줄·같은 크기·같은 소수점.

---

## 10. 적용

### 10.1 슬라이드·소개서·제안서 (정본 매체)
- 16:9 1920×1080 · 상하 60 · 좌우 86px. §6.3 골격.
- 챕터: 검정 디바이더 + `0N—` + 영문 단어. 문서당 버밀리온 디바이더 한 번.
- 페이지당: 헤드라인 1 · 패널 ≤3 · 스탯 ≤4 · 스트립 1.
- 표지: 검정 · UPINTER 96px 800 · 아래 한 줄 400 · 로고 밑줄 · 우상단 01.
- 마지막 장: 회사 정보 + 점 지도, 사무실은 버밀리온 핀, 시장(중국 · 일본 · 대만 · 동남아)은 흰 링. 지도는 실제 국경 데이터를 메르카토르로 투영한 점 격자(`templates/build-map.mjs`).
- 본문 크기: 화면 열람 12pt · 발표 20pt↑ · 인쇄 10.5pt.
- 헤드 설명(desc)은 60자까지 한 줄. 넘으면 두 줄까지, 세 줄이 되면 문장을 줄인다.
- 템플릿 `templates/UPINTER-Slide-Templates.pptx` — 표지 3 · 간지 6 · 유형별 14(목차 · 헤드+본문 5:7 · 틴트 패널 3 · 번호 플로우+스트립 · 케이스 · 괘선 목록 · 표 · 막대 차트 · 비교 2단 · 타임라인 · 풀 사진 · 한 문장 · 핵심 요약 · 마지막 장). 레이아웃 7종(표지 3 · 간지 2 · 본문 헤드 스택 · 마지막 장). 새 페이지는 같은 유형을 복제해 내용만 바꾼다. 서체 Pretendard, 아이콘은 `icons/png/circle`, 상단 로고는 `brand/logo-horizontal-white.png`. 표지 우하단 결론 두 줄 · 간지 챕터 인덱스 · 목차 페이지 참조 · 타임라인 현재 단계(버밀리온 이중 원, 지난 단계 잉크). Google Slides용 `UPINTER-Slide-Templates-GoogleSlides.pptx`는 Noto Sans KR · 일반 밑줄로 만들어졌고 Drive에 올려 Slides로 연다.

### 10.2 웹사이트
- 라이트 기본. 챕터 디바이더 구조를 섹션 밴드로.
- 히어로 = 표지 구조(검정, 로고 밑줄, 브랜드 라인, 주 버튼 1). **100vh 금지.**
- 섹션 헤드 = §4.3 스택. 서비스는 틴트 패널 3, 케이스는 사진 그리드 + 스탯, 파트너는 로고 격자.
- 버튼: 주 `#DE2F00` 필 + 흰 글자 + 반경 pill, 보조 1.5px 잉크 테두리. 화면당 주 버튼 1. 현재 메뉴는 버밀리온 밑줄 2px.
- 모션: 불투명도 + 8px 상승, 200ms 감속. 확대·바운스 없음.

### 10.3 솔루션 UI (UPro)
- 라이트·다크 모두 정본. 4px 단위. 행 높이 표 40 · 리스트 48 · 툴바 56. 사이드바 240px.
- 본문 15px/1.55. 표 내 보조 메타만 13px. 라벨 13px 700. 입력 15px, 높이 42px, 반경 8px.
- 회색 패널 `#F6F6F6` 반경 12px. 틴트는 알림·강조 패널에만.
- 사이드바 240px: 그룹 라벨은 캡션처럼 13px 500 대문자 회색(+0.12em), 라벨 위 1px 괘선, 그룹 사이 24px. 항목은 라벨보다 10px 들여 15px 500 잉크, 행 36px, 항목 사이 2px. 현재 항목 700 + 회색 패널 배경(한쪽 색 바 금지). 라벨이 항목보다 굵으면 목록의 한 줄로 읽힌다 — 라벨은 항목보다 작고·가볍고·옅게, 항목은 들여쓰기(§5.4 · §5.5).
- 대시보드: 핵심 수치 **하나만** 버밀리온, 나머지 잉크. 차트도 최고값 하나만.
- 상태: 기능색 필 + 텍스트. 색만으로 알리지 않음.
- 포커스: 2px `focus-ring` 아웃라인. 오류: 무엇이 잘못됐고 어떻게 고치는지 한 문장.
- 화면당 채워진 버튼 1, 나머지 테두리형.

### 10.4 영업 자료
- 명함 90×50mm: 앞면 검정 + UPINTER + 로고 밑줄, 뒷면 흰 바탕 연락처(라벨 M/E/W `#DE2F00`).
- 이메일 서명: 텍스트 전용, 이미지 로고 금지. 이름 800 · 직함 400 · 연락처 13px 회색 · 32px 버밀리온 짧은 선. 실제 서명은 가이드 §10.5 생성기로 만든다 — HTML 표 + 인라인 스타일(이메일 HTML은 토큰을 쓸 수 없어 hex 직접 지정, §11의 문서화된 예외), Gmail 설정 › 서명에 붙여넣기. 명함 사진을 올리면 브라우저 안 OCR(Tesseract.js kor+eng)로 이름 · 영문 이름 · 직함 · 전화 · 이메일 · 주소를 읽어 채우고, 전화번호는 숫자만 넣어도 국내 규칙으로 하이픈을 붙인다. 주소는 "Head Office: …"처럼 라벨을 붙이면 라벨이 M · T · E와 같은 방식으로 표시된다.
- 소셜 1:1·4:5: 검정 또는 버밀리온 바탕 + 흰 대문자 한 줄(12자 이내) + 한글 두 줄 + 하단 로고.
- 배너: 좌 텍스트 5 : 우 사진 7. 헤드라인 밑줄 하나. 가운데 정렬 금지.
- 인쇄 하한 9.5pt를 깎지 않는다.

---

## 11. 운영

**고정(변경 불가):** 세 색과 틴트 · Pretendard · 페이지 골격 · 강조 한 곳 · 가독성 하한 · 금지 목록 · 작은 글자의 `#DE2F00`.
**가변:** 밀도 · 패널 수(2–3) · 사진:텍스트 비중 · 라이트/다크 · 챕터 순서·이름 · 스탯 수(2–4).

| 프리셋 | 본문 | 행간 | 단위 | 패널 반경 | 강조 | 테마 |
|---|---|---|---|---|---|---|
| DECK | 12pt 화면 / 20pt 발표 | 1.6 | 8px | 16px | 페이지당 1 | 라이트(디바이더 검정) |
| WEB | 17px | 1.75 | 8px | 16px | 섹션당 1 | 라이트 |
| CONSOLE | 15px | 1.55 | 4px | 12px | 화면당 1 | 사용자 설정 |

규칙: 시맨틱 토큰만 사용(`#F9431C` 직접 참조 금지) · 새 색 추가 금지 · 예외는 문서화 · 토큰 변경은 semver · 소개서가 바뀌면 이 문서도 바뀐다.

---

## 12. 출고 전 체크리스트 (10항 전부 통과)

1. **SIZE** — 가장 작은 글자가 §5.1 하한선 이상인가?
2. **DEPTH** — 한 화면의 위계가 4단 이하인가?
3. **RATIO** — 인접 위계 크기 차가 1.25배(속성 2개↑ 변경 시 1.15배) 이상인가?
4. **PROXIMITY** — 그룹 사이 간격이 그룹 내부의 2배 이상인가?
5. **BINDING** — 표제가 자기 위보다 아래 본문에 더 가까운가?
6. **MEASURE** — 한 줄이 한글 40자 / 라틴 75자를 넘지 않는가?
7. **CONTRAST** — 13–17px 버밀리온이 `#DE2F00`인가? 본문 대비 4.5:1 이상인가?
8. **GRAYSCALE** — 채도 0에서도 위계가 읽히는가?
9. **ACCENT** — 버밀리온 강조가 화면당 한 곳인가?
10. **MESSAGE** — 3초 안에 이 화면을 한 문장으로 말할 수 있는가?

---

## 13. 빠른 참조

### 13.1 HTML · CSS 시작점
```html
<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head>
<!-- charset이 없으면 서버에 따라 한글이 깨진다 · lang="ko"는 한글 글리프 선택에 필요 -->
<!-- 아이콘: 스프라이트를 <use>로 참조. 색은 color로 -->
<svg width="24" height="24" style="color:var(--up-text-primary)"><use href="icons/upinter-icons.svg#up-diagnose"/></svg>
```
```css
@import url("dist/upinter.css");
body { font-family: 'Pretendard Variable', Pretendard, Inter, 'Noto Sans KR', sans-serif;
       font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: break-word;
       color: var(--up-text-primary); background: var(--up-surface-canvas); }
h1,h2,h3 { font-weight: 700; text-wrap: balance; }
p { max-width: 34em; text-wrap: pretty; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--up-text-accent); }
.kicker  { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ul { background: linear-gradient(var(--up-rule-brand),var(--up-rule-brand)) no-repeat 0 100%/100% 3px; padding-bottom: 2px; }
.panel { background: var(--up-surface-tint); border-radius: 16px; padding: 32px 24px; text-align: center; }
.btn { background: var(--up-surface-action); color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; border: 0; }
.stat .v { font-size: 44px; font-weight: 800; color: var(--up-text-brand); }
.stat .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--up-text-secondary); }
.pill { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--up-success-tint); color: var(--up-success-text); } /* 상태 필 · 텍스트 병기 · warning/danger/info 동일 */
```

### 13.2 한 문장으로
**색을 더하고 싶어지면 굵기가 부족한 것이고, 카드를 그리고 싶어지면 번호가 없는 것이며, 글자를 줄이고 싶어지면 내용이 많은 것이다.**

## 14. 변경 이력

- **v3.2** (2026.09) — 토큰 값 변경: 다크 `action-hover` #B52100(흰 글자 6.60:1), 기능색 글자색 8값 조정(같은 계열 틴트 위 AA 4.5:1). 슬라이드 템플릿 23장(`templates/`, PowerPoint · Google Slides용) · CI 변형 자산(`brand/`)과 §1.4 CI 규격 추가. 가이드 색인에 CI(01.4) · 적용 항목(10.1–10.5) 서브 메뉴, §10.5 Gmail 메일 서명 생성기(명함 사진 OCR 자동 입력 · 전화번호 자동 하이픈 · 주소 2줄) 추가.
- **v3.1** (2026.09) — §10 적용 예시 12종, AI 연동용 md 정본, 아이콘 라이브러리 142종 · 8변형 · 검색, HTML doctype·charset, 헤드 설명 60자 한 줄, UPro 사이드바 위계.
- **v3.0** (2026.09) — 2026 Company Profile을 시각 원본으로 전면 재정렬. 버밀리온 #F9431C · 잉크 #121113 · 틴트 #FFF7F4 · 작은 글자 #DE2F00.

---
UPINTER AXIS v3.2 · 2026.09 · W3C DTCG 2025.10 · WCAG 2.1 AA