# IBM Carbon Design System 토큰 정리

조사일: 2026-09-29
용도: "같은 5장 발표자료를 디자인 시스템별 스타일로" 비교할 때 AI에 붙이는 참고 자료. 아래 값은 모두 공식 문서와 공식 GitHub 소스에서 그대로 옮긴 것이며, 임의로 만든 값은 없다.

## 출처

| 구분 | URL | 비고 |
|---|---|---|
| 공식 사이트 | https://carbondesignsystem.com | 페이지 하단 "Last updated 23 September 2026" 확인 |
| 색상 개요 | https://carbondesignsystem.com/elements/color/overview/ | 테마, 레이어링 모델, 토큰 역할 |
| 타이포그래피 개요 | https://carbondesignsystem.com/elements/typography/overview/ | IBM Plex, 타입 스케일 공식 |
| 간격 개요 | https://carbondesignsystem.com/elements/spacing/overview/ | spacing 스케일 표 |
| 공식 GitHub | https://github.com/carbon-design-system/carbon | 모노레포 |
| 색상 원본 | https://raw.githubusercontent.com/carbon-design-system/carbon/main/packages/colors/src/dtcg/colors.json | 팔레트 HEX |
| 테마 원본 | https://raw.githubusercontent.com/carbon-design-system/carbon/main/packages/themes/src/dtcg/themes.json | White 테마 역할 토큰 |
| 타입 원본 | https://raw.githubusercontent.com/carbon-design-system/carbon/main/packages/type/src/styles.ts , .../scale.ts , .../fontFamily.ts , .../fontWeight.ts | 스타일별 크기, 줄간격, 굵기, 자간 |
| 레이아웃 원본 | https://raw.githubusercontent.com/carbon-design-system/carbon/main/packages/layout/src/dtcg/layout.json | spacing, border-radius |

## 라이선스

- GitHub 코드와 토큰: **Apache-2.0** (저장소 LICENSE 파일 확인). 상업적 사용, 수정, 배포 가능. 재배포 시 저작권 고지와 라이선스 사본 포함.
- 문서 사이트: "Copyright © 2026 IBM". 문서 문장은 인용 정도로만 쓰고 통째로 복제하지 말 것.
- 서체 IBM Plex: 오픈소스 서체 (Carbon 문서 원문 "Carbon uses the open-source typeface IBM Plex"). 배포처는 문서가 안내하는 Plex GitHub 저장소.
- 주의: IBM 로고, "IBM" 브랜드명, 8줄 로고 스타일은 쓰지 말 것. 색과 규칙만 참고.

## 1. 색상 토큰

### 1-1. 코어 팔레트 (colors.json, 10~100 단계)

| 단계 | blue | gray | coolGray | red | green | yellow | purple | cyan | teal | magenta | orange |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 10 | #edf5ff | #f4f4f4 | #f2f4f8 | #fff1f1 | #defbe6 | #fcf4d6 | #f6f2ff | #e5f6ff | #d9fbfb | #fff0f7 | #fff2e8 |
| 20 | #d0e2ff | #e0e0e0 | #dde1e6 | #ffd7d9 | #a7f0ba | #fddc69 | #e8daff | #bae6ff | #9ef0f0 | #ffd6e8 | #ffd9be |
| 30 | #a6c8ff | #c6c6c6 | #c1c7cd | #ffb3b8 | #6fdc8c | #f1c21b | #d4bbff | #82cfff | #3ddbd9 | #ffafd2 | #ffb784 |
| 40 | #78a9ff | #a8a8a8 | #a2a9b0 | #ff8389 | #42be65 | #d2a106 | #be95ff | #33b1ff | #08bdba | #ff7eb6 | #ff832b |
| 50 | #4589ff | #8d8d8d | #878d96 | #fa4d56 | #24a148 | #b28600 | #a56eff | #1192e8 | #009d9a | #ee5396 | #eb6200 |
| **60** | **#0f62fe** | #6f6f6f | #697077 | #da1e28 | #198038 | #8e6a00 | #8a3ffc | #0072c3 | #007d79 | #d02670 | #ba4e00 |
| 70 | #0043ce | #525252 | #4d5358 | #a2191f | #0e6027 | #684e00 | #6929c4 | #00539a | #005d5d | #9f1853 | #8a3800 |
| 80 | #002d9c | #393939 | #343a3f | #750e13 | #044317 | #483700 | #491d8b | #003a6d | #004144 | #740937 | #5e2900 |
| 90 | #001d6c | #262626 | #21272a | #520408 | #022d0d | #302400 | #31135e | #012749 | #022b30 | #510224 | #3e1a00 |
| 100 | #001141 | #161616 | #121619 | #2d0709 | #071908 | #1c1500 | #1c0f30 | #061727 | #081a1c | #2a0a18 | #231000 |

기타: black #000000, white #ffffff. (warmGray 팔레트와 hover 전용 반단계 색도 원본에 있으나 생략.)

### 1-2. White 테마 역할 토큰 (themes.json의 white 값을 HEX로 풀어 적음)

| 토큰 | 팔레트 | HEX |
|---|---|---|
| background | white | #ffffff |
| background-inverse | gray 80 | #393939 |
| background-brand | blue 60 | #0f62fe |
| layer-01 | gray 10 | #f4f4f4 |
| layer-02 | white | #ffffff |
| layer-03 | gray 10 | #f4f4f4 |
| layer-accent-01 | gray 20 | #e0e0e0 |
| field-01 | gray 10 | #f4f4f4 |
| border-subtle-00 | gray 20 | #e0e0e0 |
| border-subtle-01 | gray 30 | #c6c6c6 |
| border-strong-01 | gray 50 | #8d8d8d |
| border-interactive | blue 60 | #0f62fe |
| text-primary | gray 100 | #161616 |
| text-secondary | gray 70 | #525252 |
| text-helper | gray 60 | #6f6f6f |
| text-on-color | white | #ffffff |
| text-error | red 60 | #da1e28 |
| link-primary | blue 60 | #0f62fe |
| link-secondary | blue 70 | #0043ce |
| link-visited | purple 60 | #8a3ffc |
| icon-primary | gray 100 | #161616 |
| icon-secondary | gray 70 | #525252 |
| interactive | blue 60 | #0f62fe |
| focus | blue 60 | #0f62fe |
| highlight | blue 20 | #d0e2ff |
| support-error | red 60 | #da1e28 |
| support-success | green 50 | #24a148 |
| support-warning | yellow 30 | #f1c21b |
| support-info | blue 70 | #0043ce |

## 2. 타이포그래피

- 서체: **IBM Plex Sans** (Serif, Mono 계열도 있음)
  - 문서의 폰트 스택: `'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif`
  - 현재 소스(fontFamily.ts)의 스택: `'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif`
  - Carbon 문서에는 한글 서체 지정이 없다. 한글 발표자료에 쓸 때 어떤 한글 서체를 짝지을지는 사용자가 정해야 함 (문서 근거 없음).
- 굵기: **Light 300, Regular 400, SemiBold 600** 세 가지 권장. "semibold weight is ideal for section headers, but should not be used for long text."
- 타입 스케일 (px): 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 54, 60, 68, 76, 84, 92 (공식: Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2, 시작값 12px)
- Productive(제품 화면, 고정 크기)와 Expressive(편집/마케팅, 반응형) 두 세트가 있다. 발표자료처럼 크게 보여주는 용도는 Expressive(fluid) 계열이 맞다.

### 2-1. Productive 스타일 (고정)

| 토큰 | 크기(px) | 줄간격 | 굵기 | 자간 |
|---|---|---|---|---|
| label-01 | 12 | 1.33333 | 400 | 0.32px |
| helper-text-01 | 12 | 1.33333 | (지정 없음) | 0.32px |
| body-compact-01 | 14 | 1.28572 | 400 | 0.16px |
| body-01 | 14 | 1.42857 | 400 | 0.16px |
| body-compact-02 | 16 | 1.375 | 400 | 0 |
| body-02 | 16 | 1.5 | 400 | 0 |
| code-01 | 12 | 1.33333 | 400 | 0.32px |
| code-02 | 14 | 1.42857 | 400 | 0.32px |
| heading-compact-01 | 14 | 1.28572 | 600 | 0.16px |
| heading-01 | 14 | 1.42857 | 600 | 0.16px |
| heading-compact-02 | 16 | 1.375 | 600 | 0 |
| heading-02 | 16 | 1.5 | 600 | 0 |
| heading-03 | 20 | 1.4 | 400 | 0 |
| heading-04 | 28 | 1.28572 | 400 | 0 |
| heading-05 | 32 | 1.25 | 400 | 0 |
| heading-06 | 42 | 1.199 | 300 | 0 |
| heading-07 | 54 | 1.199 | 300 | 0 |

### 2-2. Expressive(fluid) 스타일 (브레이크포인트별 변화, 기본값 > md > lg > xlg > max)

| 토큰 | 기본 | md | lg | xlg | max | 굵기 |
|---|---|---|---|---|---|---|
| fluid-heading-03 | 20 / 1.4 | | | 20 / 1.4 | 24 / 1.334 | 400 |
| fluid-heading-04 | 28 / 1.28572 | | | 32 / 1.25 | 32 | 400 |
| fluid-heading-05 | 32 / 1.25 | 36 / 1.22 (300) | 42 / 1.19 | 48 / 1.17 | 60 | 400, md부터 300 |
| fluid-heading-06 | 32 / 1.25 | 36 / 1.22 | 42 / 1.19 | 48 / 1.17 | 60 | 600 |
| fluid-paragraph-01 | 24 / 1.334 | | 28 / 1.28572 | | 32 / 1.25 | 300 |
| fluid-quotation-02 | 32 / 1.25 | 36 / 1.22 | 42 / 1.19 | 48 / 1.17 | 60 | 300 |
| fluid-display-01 | 42 / 1.19 | 42 | 54 | 60 / 1.17 | 76 / 1.13 | 300 |
| fluid-display-02 | 42 / 1.19 | 42 | 54 | 60 / 1.16 | 76 / 1.13 | 600 |
| fluid-display-03 | 42 / 1.19 | 54 / 1.18 | 60 / 1.16, 자간 -0.64px | 76 / 1.13 | 84 / 1.11, 자간 -0.96px | 300 |
| fluid-display-04 | 42 / 1.19 | 68 / 1.15 | 92 / 1.11, 자간 -0.64px | 122 / 1.07, 자간 -0.64px | 156 / 1.05, 자간 -0.96px | 300 |

(표기: "크기px / 줄간격". 빈 칸은 해당 브레이크포인트에서 변화 없음.)

## 3. 간격 (spacing)

문서의 spacing 스케일 표 원문 그대로:

| 토큰 | rem | px |
|---|---|---|
| $spacing-01 | 0.125 | 2 |
| $spacing-02 | 0.25 | 4 |
| $spacing-03 | 0.5 | 8 |
| $spacing-04 | 0.75 | 12 |
| $spacing-05 | 1 | 16 |
| $spacing-06 | 1.5 | 24 |
| $spacing-07 | 2 | 32 |
| $spacing-08 | 2.5 | 40 |
| $spacing-09 | 3 | 48 |
| $spacing-10 | 4 | 64 |
| $spacing-11 | 5 | 80 |
| $spacing-12 | 6 | 96 |
| $spacing-13 | 10 | 160 |

- "The Carbon spacing scale complements the 2x Grid and typography scale by using multiples of two, four, and eight."
- 가로 배치는 12컬럼 그리드(2x Grid)와 gutter 사용 권장.

## 4. 래디어스 (radius)

GitHub 소스 layout.json의 border-radius 토큰:

| 토큰 | 값 | 소스 설명 요약 |
|---|---|---|
| border-radius-00 | 0px | 둥글림 없음, 각진 요소 |
| border-radius-02 | 2px | 태그, 배지 같은 작은 컴포넌트 |
| border-radius-04 | 4px | 인풋, 카드 등 일반 컴포넌트 기본 |
| border-radius-08 | 8px | 패널, 모달, 컨테이너 |
| border-radius-16 | 16px | 큰 카드, 강조 컨테이너 |
| border-radius-24 | 24px | 알약형에 가까운 컴포넌트 |
| border-radius-max | 999999px | 알약형 버튼, 칩, 원형 |

주의: 이 radius 토큰은 GitHub 소스에서만 확인했고, carbondesignsystem.com 문서의 별도 radius 안내 페이지는 확인하지 못했다. 현재 버튼 기본값은 **0 (각진 모서리)** 이다 (소스 `packages/styles/scss/components/button/_vars.scss`의 `$button-border-radius: 0 !default;`). 같은 소스에 `enable-v12-release` 기능 플래그를 켜면 버튼이 border-radius-max(알약형)로 바뀌는 코드가 있어, 앞으로 둥근 쪽으로 바뀔 가능성이 있다. 현 시점 "Carbon 느낌"을 내려면 0px를 기본으로 두는 것을 권장.

## 5. 핵심 사용 규칙 (문서 원문 기반)

1. **파랑은 주요 액션 전용.** "The core blue family serves as the primary action color across all IBM products and experiences. Additional colors are used sparingly and purposefully." 기준 파랑은 Blue 60 #0f62fe.
2. **회색이 지배적.** "The neutral gray family is dominant in the default themes." 영역 구분은 색이 아니라 회색 값의 미세한 차이로.
3. **레이어링 모델.** 라이트 테마에서 레이어는 White와 Gray 10(#f4f4f4)을 번갈아 쌓는다. White 테마: 배경 White, 첫 레이어(카드 등) Gray 10, 둘째 레이어 White.
4. **본문 글자색은 중립.** "Keep type color neutral in running text. Use primary blue for primary actions." 본문 #161616, 보조 #525252.
5. **굵기와 간격 절제.** SemiBold(600)는 섹션 제목에만, 긴 글에는 쓰지 않는다. 간격은 스케일 밖 값을 가능한 쓰지 않는다 ("deviating from the spacing scales should be avoided whenever possible").

## AI에 붙일 때 한 줄 요약

흰 배경(#ffffff), 카드/구획 배경 #f4f4f4, 본문 #161616, 보조 글자 #525252, 강조는 Blue 60 #0f62fe 하나(주요 액션/핵심 수치에만), 서체 IBM Plex Sans, 굵기 300/400/600, 큰 제목은 Light(300) 42~60px, 모서리 0px(각진 사각형), 간격은 2/4/8/16/24/32/48px 스케일.