Reference

토큰 값은 DESIGN.md(공유)와 DESIGN.hr.md · DESIGN.desk.md(브랜드)가 원본이다. 이 목록은 빌드할 때 그 파일에서 그대로 뽑는다 — 색 · 글자 · 모서리 · 간격은 YAML 머리말에서, 그림자 · 모션 · 중단점 · 레이아웃 · 터치 영역 · z-index · 딤 · 그라디언트는 본문의 표에서.

모두 627 개다 — 색이 478 개(라이트 · 다크를 따로 센다)다. 토큰의 층과 모드는 Overview 에 있다.

팔레트

가족마다 차례 번호가 붙은 색이다. 단계마다 라이트 · 다크 값이 따로 있고, 다크는 차례가 뒤집혀 작은 번호가 어둡다. 화면은 팔레트를 직접 쓰지 않고 역할 색으로 부른다.

토큰	라이트	다크
`gray-00`	`#FFFFFF`	`#1A1F2E`
`gray-100`	`#F7F8FD`	`#242938`
`gray-200`	`#F5F6FA`	`#2D3346`
`gray-300`	`#EDEFF3`	`#353B4D`
`gray-400`	`#E5E8EF`	`#404757`
`gray-500`	`#8A91A0`	`#656B78`
`gray-600`	`#767C8B`	`#838997`
`gray-700`	`#62697A`	`#A2A8B7`
`gray-800`	`#535866`	`#B7BDCC`
`gray-900`	`#2F3541`	`#D6DDEC`
`gray-1000`	`#1A1F2E`	`#F5F6FA`
`red-100`	`#FFEFEC`	`#3E231F`
`red-200`	`#FFDEDA`	`#532722`
`red-300`	`#FEC4BC`	`#722722`
`red-400`	`#FCA195`	`#93231F`
`red-500`	`#F8776B`	`#B51317`
`red-600`	`#E95046`	`#CC0E17`
`red-700`	`#D72323`	`#D82424`
`red-800`	`#C01016`	`#FF8477`
`red-900`	`#96030C`	`#FFBCB3`
`red-1000`	`#5C0004`	`#FEEDEA`
`green-100`	`#EAF5EC`	`#202D23`
`green-200`	`#D8EADB`	`#223927`
`green-300`	`#BBDAC1`	`#20482B`
`green-400`	`#95C49E`	`#1A582F`
`green-500`	`#6AAC7A`	`#076931`
`green-600`	`#43955B`	`#117539`
`green-700`	`#167F3F`	`#198140`
`green-800`	`#026E33`	`#25C062`
`green-900`	`#075527`	`#AED6B6`
`green-1000`	`#023214`	`#E9F4EB`
`orange-100`	`#FFEFE8`	`#39251E`
`orange-200`	`#FAE0D5`	`#4B2B1F`
`orange-300`	`#F5C7B6`	`#65321D`
`orange-400`	`#EDA98E`	`#833615`
`orange-500`	`#E18663`	`#9F3901`
`orange-600`	`#D1673B`	`#B04209`
`orange-700`	`#BE490D`	`#BF4A10`
`orange-800`	`#A53E0A`	`#FF8758`
`orange-900`	`#822E02`	`#F9BFA9`
`orange-1000`	`#4E1801`	`#FEEEE7`
`blue-100`	`#EAF3FE`	`#1F2A39`
`blue-200`	`#D7E6FB`	`#21344D`
`blue-300`	`#B9D4F6`	`#204069`
`blue-400`	`#92BCF0`	`#1C4E8A`
`blue-500`	`#69A0E7`	`#125AAA`
`blue-600`	`#4387DA`	`#0F65BF`
`blue-700`	`#1D6EC9`	`#1F70CB`
`blue-800`	`#0F5FB3`	`#69ABFF`
`blue-900`	`#06498D`	`#ACCEFB`
`blue-1000`	`#022956`	`#E8F2FE`
`yellow-100`	`#F5F2E8`	`#2D2A1D`
`yellow-200`	`#EAE6D4`	`#3A331D`
`yellow-300`	`#DAD2B4`	`#4A4019`
`yellow-400`	`#C5B98A`	`#5C4D0B`
`yellow-500`	`#AF9E5D`	`#6C5906`
`yellow-600`	`#998331`	`#796400`
`yellow-700`	`#8C7400`	`#846E04`
`yellow-800`	`#725E01`	`#C5A721`
`yellow-900`	`#574805`	`#D7CCA6`
`yellow-1000`	`#332902`	`#F3F1E6`
`indigo-100`	`#EFF2FF`	`#26293A`
`indigo-200`	`#E1E4FC`	`#2F324E`
`indigo-300`	`#CACFF7`	`#383C6A`
`indigo-400`	`#ADB4F1`	`#44468B`
`indigo-500`	`#9098E9`	`#4F51AB`
`indigo-600`	`#767CDC`	`#585AC1`
`indigo-700`	`#5E60C8`	`#6264CC`
`indigo-800`	`#5354B6`	`#99A1FE`
`indigo-900`	`#3F3E92`	`#C3C9FC`
`indigo-1000`	`#242359`	`#EEF0FE`
`violet-100`	`#F7EFFE`	`#302638`
`violet-200`	`#ECE1F8`	`#3D2E4B`
`violet-300`	`#DEC9F2`	`#4F3565`
`violet-400`	`#CCACEA`	`#643C83`
`violet-500`	`#B88BDF`	`#7842A1`
`violet-600`	`#A46DD1`	`#8749B5`
`violet-700`	`#8B4DBA`	`#9153C0`
`violet-800`	`#7F44AA`	`#C793F3`
`violet-900`	`#633089`	`#DCC1F6`
`violet-1000`	`#3B1A53`	`#F5EEFC`
`pink-100`	`#FFEEF4`	`#38242C`
`pink-200`	`#FBDEE9`	`#4C2938`
`pink-300`	`#F5C5D7`	`#642D47`
`pink-400`	`#EDA3C2`	`#813058`
`pink-500`	`#E07FAA`	`#9E3067`
`pink-600`	`#D05E93`	`#B23574`
`pink-700`	`#B83B7A`	`#BD407F`
`pink-800`	`#A7326D`	`#F485B6`
`pink-900`	`#851F55`	`#F9BBD3`
`pink-1000`	`#510E31`	`#FEECF3`
`brown-100`	`#F8F0EB`	`#322821`
`brown-200`	`#EFE3DA`	`#3F3024`
`brown-300`	`#E3CEBD`	`#533B26`
`brown-400`	`#D2B399`	`#694628`
`brown-500`	`#C09573`	`#7E5127`
`brown-600`	`#AC7B51`	`#8E5A2A`
`brown-700`	`#9A6536`	`#986334`
`brown-800`	`#855428`	`#CF9F77`
`brown-900`	`#693F18`	`#E2C7B2`
`brown-1000`	`#3F240A`	`#F7F0EA`

브랜드 팔레트

브랜드 파일에서만 정의한다. 파일 안에서는 접미사 없이 brand-100 ~ brand-1000 이다.

토큰	HR 라이트	HR 다크	Desk 라이트	Desk 다크
`brand-100`	`#E8F3EC`	`#202D26`	`#E8F1FE`	`#202A3C`
`brand-200`	`#D6E8DE`	`#21352B`	`#D7E5FC`	`#20314E`
`brand-300`	`#77B193`	`#214132`	`#79A6F3`	`#1F3A69`
`brand-400`	`#469570`	`#1F4E38`	`#6587C1`	`#1A4386`
`brand-500`	`#0D754E`	`#1B583E`	`#3765B1`	`#1049A4`
`brand-600`	`#075B3C`	`#0E6443`	`#0147AD`	`#1052B8`
`brand-700`	`#064F33`	`#0C6C49`	`#013D96`	`#1A5AC2`
`brand-800`	`#033F28`	`#1D9567`	`#00307A`	`#4C83DC`
`brand-900`	`#01301E`	`#2ABE84`	`#002460`	`#7AA9F6`
`brand-1000`	`#012214`	`#BBDCCA`	`#001948`	`#CCD5E3`

역할 색

화면이 부르는 이름이다. 모드마다 팔레트의 한 단계를 가리킨다 — 단계 칸은 라이트 / 다크 다.

토큰	단계	라이트	다크
`fg-neutral`	`gray-1000` / `gray-1000`	`#1A1F2E`	`#F5F6FA`
`fg-neutral-muted`	`gray-800` / `gray-800`	`#535866`	`#B7BDCC`
`fg-neutral-subtle`	`gray-700` / `gray-700`	`#62697A`	`#A2A8B7`
`fg-neutral-inverted`	`gray-00` / `gray-100`	`#FFFFFF`	`#242938`
`fg-placeholder`	`gray-600` / `gray-600`	`#767C8B`	`#838997`
`fg-disabled`	`gray-500` / `gray-600`	`#8A91A0`	`#838997`
`static-white`	— / —	`#FFFFFF`	`#FFFFFF`
`fg-critical`	`red-700` / `red-800`	`#D72323`	`#FF8477`
`fg-positive`	`green-700` / `green-800`	`#167F3F`	`#25C062`
`fg-warning`	`orange-700` / `orange-800`	`#BE490D`	`#FF8758`
`fg-informative`	`blue-700` / `blue-800`	`#1D6EC9`	`#69ABFF`
`fg-critical-contrast`	`red-800` / `red-900`	`#C01016`	`#FFBCB3`
`fg-positive-contrast`	`green-800` / `green-900`	`#026E33`	`#AED6B6`
`fg-warning-contrast`	`orange-800` / `orange-900`	`#A53E0A`	`#F9BFA9`
`fg-informative-contrast`	`blue-800` / `blue-900`	`#0F5FB3`	`#ACCEFB`
`fg-positive-inverted`	`green-800` / `green-700`	`#25C062`	`#167F3F`
`fg-critical-inverted`	`red-800` / `red-700`	`#FF8477`	`#D72323`
`bg-layer-basement`	`gray-200` / `gray-00`	`#F5F6FA`	`#1A1F2E`
`bg-layer-default`	`gray-00` / `gray-100`	`#FFFFFF`	`#242938`
`bg-layer-default-pressed`	`gray-100` / `gray-300`	`#F7F8FD`	`#353B4D`
`bg-layer-floating`	`gray-00` / `gray-200`	`#FFFFFF`	`#2D3346`
`bg-layer-floating-pressed`	`gray-100` / `gray-300`	`#F7F8FD`	`#353B4D`
`bg-neutral-weak`	`gray-200` / `gray-300`	`#F5F6FA`	`#353B4D`
`bg-neutral-weak-pressed`	`gray-300` / `gray-400`	`#EDEFF3`	`#404757`
`bg-neutral-weak-alpha`	— / —	`#0000000C`	`#FFFFFF20`
`bg-neutral-weak-alpha-pressed`	— / —	`#00000010`	`#FFFFFF2E`
`bg-neutral-inverted`	`gray-1000` / `gray-1000`	`#1A1F2E`	`#F5F6FA`
`bg-neutral-inverted-pressed`	`gray-800` / `gray-800`	`#535866`	`#B7BDCC`
`bg-disabled`	`gray-200` / `gray-300`	`#F5F6FA`	`#353B4D`
`bg-critical-solid`	`red-700` / `red-600`	`#D72323`	`#CC0E17`
`bg-critical-solid-pressed`	`red-800` / `red-700`	`#C01016`	`#D82424`
`bg-critical-weak`	`red-100` / `red-200`	`#FFEFEC`	`#532722`
`bg-critical-weak-pressed`	`red-200` / `red-300`	`#FFDEDA`	`#722722`
`bg-positive-solid`	`green-700` / `green-600`	`#167F3F`	`#117539`
`bg-positive-solid-pressed`	`green-800` / `green-700`	`#026E33`	`#198140`
`bg-positive-weak`	`green-100` / `green-200`	`#EAF5EC`	`#223927`
`bg-positive-weak-pressed`	`green-200` / `green-300`	`#D8EADB`	`#20482B`
`bg-warning-solid`	`orange-700` / `orange-600`	`#BE490D`	`#B04209`
`bg-warning-solid-pressed`	`orange-800` / `orange-700`	`#A53E0A`	`#BF4A10`
`bg-warning-weak`	`orange-100` / `orange-200`	`#FFEFE8`	`#4B2B1F`
`bg-warning-weak-pressed`	`orange-200` / `orange-300`	`#FAE0D5`	`#65321D`
`bg-informative-solid`	`blue-700` / `blue-600`	`#1D6EC9`	`#0F65BF`
`bg-informative-solid-pressed`	`blue-800` / `blue-700`	`#0F5FB3`	`#1F70CB`
`bg-informative-weak`	`blue-100` / `blue-200`	`#EAF3FE`	`#21344D`
`bg-informative-weak-pressed`	`blue-200` / `blue-300`	`#D7E6FB`	`#204069`
`stroke-neutral-subtle`	`gray-300` / `gray-300`	`#EDEFF3`	`#353B4D`
`stroke-neutral-weak`	`gray-400` / `gray-400`	`#E5E8EF`	`#404757`
`stroke-neutral-solid`	`gray-600` / `gray-600`	`#767C8B`	`#838997`
`stroke-neutral-contrast`	`gray-1000` / `gray-1000`	`#1A1F2E`	`#F5F6FA`
`stroke-neutral-overlay`	— / —	`#0000000C`	`#FFFFFF0D`
`stroke-critical-solid`	`red-700` / `red-800`	`#D72323`	`#FF8477`
`stroke-positive-solid`	`green-700` / `green-800`	`#167F3F`	`#25C062`
`stroke-warning-solid`	`orange-700` / `orange-800`	`#BE490D`	`#FF8758`
`stroke-informative-solid`	`blue-700` / `blue-800`	`#1D6EC9`	`#69ABFF`
`stroke-critical-weak`	`red-300` / `red-400`	`#FEC4BC`	`#93231F`
`stroke-positive-weak`	`green-300` / `green-400`	`#BBDAC1`	`#1A582F`
`stroke-warning-weak`	`orange-300` / `orange-400`	`#F5C7B6`	`#833615`
`stroke-informative-weak`	`blue-300` / `blue-400`	`#B9D4F6`	`#1C4E8A`
`stroke-focus-ring`	`gray-1000` / `gray-1000`	`#1A1F2E`	`#F5F6FA`

브랜드 역할 색

토큰	HR 단계	HR 라이트 · 다크	Desk 단계	Desk 라이트 · 다크
`fg-brand`	`brand-600` / `brand-900`	`#075B3C` · `#2ABE84`	`brand-600` / `brand-900`	`#0147AD` · `#7AA9F6`
`fg-brand-contrast`	`brand-700` / `brand-900`	`#064F33` · `#2ABE84`	`brand-700` / `brand-900`	`#013D96` · `#7AA9F6`
`fg-brand-inverted`	`brand-900` / `brand-600`	`#2ABE84` · `#075B3C`	`brand-900` / `brand-600`	`#7AA9F6` · `#0147AD`
`bg-brand-solid`	`brand-600` / `brand-500`	`#075B3C` · `#1B583E`	`brand-600` / `brand-500`	`#0147AD` · `#1049A4`
`bg-brand-solid-pressed`	`brand-700` / `brand-700`	`#064F33` · `#0C6C49`	`brand-700` / `brand-700`	`#013D96` · `#1A5AC2`
`bg-brand-weak`	`brand-100` / `brand-200`	`#E8F3EC` · `#21352B`	`brand-100` / `brand-200`	`#E8F1FE` · `#20314E`
`bg-brand-weak-pressed`	`brand-200` / `brand-300`	`#D6E8DE` · `#214132`	`brand-200` / `brand-300`	`#D7E5FC` · `#1F3A69`
`stroke-brand-solid`	`brand-600` / `brand-900`	`#075B3C` · `#2ABE84`	`brand-600` / `brand-900`	`#0147AD` · `#7AA9F6`
`stroke-brand-weak`	`brand-300` / `brand-800`	`#77B193` · `#1D9567`	`brand-300` / `brand-800`	`#79A6F3` · `#4C83DC`

옛 이름

역할 색 이전의 이름이다. 컴포넌트 스펙이 아직 쓰고 있어 같은 값의 역할 색을 가리키는 별칭으로 남겼다 — 스펙을 모두 옮기면 지운다.

토큰	가리키는 이름	값
`bg-page`	`bg-layer-basement`	`#F5F6FA`
`bg-page-dark`	`bg-layer-basement-dark`	`#1A1F2E`
`surface-default`	`bg-layer-default`	`#FFFFFF`
`surface-default-dark`	`bg-layer-default-dark`	`#242938`
`surface-input`	`bg-neutral-weak`	`#F5F6FA`
`surface-input-dark`	`bg-neutral-weak-dark`	`#353B4D`
`text-primary`	`fg-neutral`	`#1A1F2E`
`text-primary-dark`	`fg-neutral-dark`	`#F5F6FA`
`text-secondary`	`fg-neutral-muted`	`#535866`
`text-secondary-dark`	`fg-neutral-muted-dark`	`#B7BDCC`
`text-tertiary`	`fg-neutral-subtle`	`#62697A`
`text-tertiary-dark`	`fg-neutral-subtle-dark`	`#A2A8B7`
`text-disabled`	`fg-disabled`	`#8A91A0`
`text-disabled-dark`	`fg-disabled-dark`	`#838997`
`text-on-accent`	`static-white`	`#FFFFFF`
`border-default`	`stroke-neutral-weak`	`#E5E8EF`
`border-default-dark`	`stroke-neutral-weak-dark`	`#404757`
`border-strong`	`stroke-neutral-solid`	`#767C8B`
`border-strong-dark`	`stroke-neutral-solid-dark`	`#838997`
`success`	`fg-positive`	`#167F3F`
`success-light`	`fg-positive-dark`	`#25C062`
`error`	`fg-critical`	`#D72323`
`error-light`	`fg-critical-dark`	`#FF8477`
`warning`	`fg-warning`	`#BE490D`
`warning-light`	`fg-warning-dark`	`#FF8758`
`info`	`fg-informative`	`#1D6EC9`
`info-light`	`fg-informative-dark`	`#69ABFF`
`chart-red-light`	`chart-red-dark`	`#FF8477`
`chart-orange-light`	`chart-orange-dark`	`#FF8758`
`chart-yellow-light`	`chart-yellow-dark`	`#C5A721`
`chart-green-light`	`chart-green-dark`	`#25C062`
`chart-blue-light`	`chart-blue-dark`	`#69ABFF`
`chart-indigo-light`	`chart-indigo-dark`	`#99A1FE`
`chart-violet-light`	`chart-violet-dark`	`#C793F3`
`chart-pink-light`	`chart-pink-dark`	`#F485B6`
`chart-brown-light`	`chart-brown-dark`	`#CF9F77`
`chart-gray-light`	`chart-gray-dark`	`#B7BDCC`
`primary`	`fg-brand`	HR `#075B3C` · Desk `#0147AD`
`primary-light`	`fg-brand-dark`	HR `#2ABE84` · Desk `#7AA9F6`
`border-focus`	`stroke-focus-ring`	HR `#075B3C` · Desk `#0147AD`
`border-focus-light`	`stroke-focus-ring-dark`	HR `#2ABE84` · Desk `#7AA9F6`

차트

데이터 시각화 · 카테고리 색의 10색이다. 팔레트 단계를 가리킨다 — 라이트 700, 다크 800-dark(v110). 다크 짝의 옛 이름 chart-*-light 는 옛 이름 표에 있다.

토큰	단계	라이트	다크
`chart-red`	`red-700` / `red-800`	`#D72323`	`#FF8477`
`chart-orange`	`orange-700` / `orange-800`	`#BE490D`	`#FF8758`
`chart-yellow`	`yellow-700` / `yellow-800`	`#8C7400`	`#C5A721`
`chart-green`	`green-700` / `green-800`	`#167F3F`	`#25C062`
`chart-blue`	`blue-700` / `blue-800`	`#1D6EC9`	`#69ABFF`
`chart-indigo`	`indigo-700` / `indigo-800`	`#5E60C8`	`#99A1FE`
`chart-violet`	`violet-700` / `violet-800`	`#8B4DBA`	`#C793F3`
`chart-pink`	`pink-700` / `pink-800`	`#B83B7A`	`#F485B6`
`chart-brown`	`brown-700` / `brown-800`	`#9A6536`	`#CF9F77`
`chart-gray`	`gray-700` / `gray-800`	`#62697A`	`#B7BDCC`

차트 옅은 바탕

카테고리 색을 옅게 깐 면과 그 위 글자다(v111) — -weak 는 작은 면(타일 · 칩), -subtle 은 넓은 면(메모 카드), -contrast 는 그 위 글자. 아이콘은 차트 색 그대로다.

토큰	단계	라이트	다크
`chart-red-weak`	`red-200` / `red-300`	`#FFDEDA`	`#722722`
`chart-red-subtle`	`red-100` / `red-200`	`#FFEFEC`	`#532722`
`chart-red-contrast`	`red-800` / `red-900`	`#C01016`	`#FFBCB3`
`chart-orange-weak`	`orange-200` / `orange-300`	`#FAE0D5`	`#65321D`
`chart-orange-subtle`	`orange-100` / `orange-200`	`#FFEFE8`	`#4B2B1F`
`chart-orange-contrast`	`orange-800` / `orange-900`	`#A53E0A`	`#F9BFA9`
`chart-yellow-weak`	`yellow-200` / `yellow-300`	`#EAE6D4`	`#4A4019`
`chart-yellow-subtle`	`yellow-100` / `yellow-200`	`#F5F2E8`	`#3A331D`
`chart-yellow-contrast`	`yellow-800` / `yellow-900`	`#725E01`	`#D7CCA6`
`chart-green-weak`	`green-200` / `green-300`	`#D8EADB`	`#20482B`
`chart-green-subtle`	`green-100` / `green-200`	`#EAF5EC`	`#223927`
`chart-green-contrast`	`green-800` / `green-900`	`#026E33`	`#AED6B6`
`chart-blue-weak`	`blue-200` / `blue-300`	`#D7E6FB`	`#204069`
`chart-blue-subtle`	`blue-100` / `blue-200`	`#EAF3FE`	`#21344D`
`chart-blue-contrast`	`blue-800` / `blue-900`	`#0F5FB3`	`#ACCEFB`
`chart-indigo-weak`	`indigo-200` / `indigo-300`	`#E1E4FC`	`#383C6A`
`chart-indigo-subtle`	`indigo-100` / `indigo-200`	`#EFF2FF`	`#2F324E`
`chart-indigo-contrast`	`indigo-800` / `indigo-900`	`#5354B6`	`#C3C9FC`
`chart-violet-weak`	`violet-200` / `violet-300`	`#ECE1F8`	`#4F3565`
`chart-violet-subtle`	`violet-100` / `violet-200`	`#F7EFFE`	`#3D2E4B`
`chart-violet-contrast`	`violet-800` / `violet-900`	`#7F44AA`	`#DCC1F6`
`chart-pink-weak`	`pink-200` / `pink-300`	`#FBDEE9`	`#642D47`
`chart-pink-subtle`	`pink-100` / `pink-200`	`#FFEEF4`	`#4C2938`
`chart-pink-contrast`	`pink-800` / `pink-900`	`#A7326D`	`#F9BBD3`
`chart-brown-weak`	`brown-200` / `brown-300`	`#EFE3DA`	`#533B26`
`chart-brown-subtle`	`brown-100` / `brown-200`	`#F8F0EB`	`#3F3024`
`chart-brown-contrast`	`brown-800` / `brown-900`	`#855428`	`#E2C7B2`
`chart-gray-weak`	`gray-400` / `gray-400`	`#E5E8EF`	`#404757`
`chart-gray-subtle`	`gray-300` / `gray-300`	`#EDEFF3`	`#353B4D`
`chart-gray-contrast`	`gray-800` / `gray-900`	`#535866`	`#D6DDEC`

타이포그래피

글꼴은 모두 Pretendard, Inter, sans-serif 입니다.

토큰	크기	굵기	줄 높이	자간
`t1`	`11px`	`400`	`15px`	—
`t2`	`12px`	`400`	`16px`	—
`t3`	`13px`	`400`	`18px`	—
`t4`	`14px`	`400`	`19px`	—
`t5`	`16px`	`400`	`22px`	—
`t6`	`18px`	`400`	`24px`	—
`t7`	`20px`	`400`	`27px`	—
`t8`	`22px`	`400`	`30px`	—
`t9`	`24px`	`400`	`32px`	—
`t10`	`26px`	`400`	`35px`	—
`t11`	`28px`	`400`	`38px`	—
`t12`	`32px`	`400`	`42px`	—
`t13`	`40px`	`400`	`52px`	—
`t14`	`48px`	`400`	`60px`	—
`screen-title`	`26px`	`700`	`35px`	—
`article-body`	`16px`	`400`	`24px`	—
`article-note`	`14px`	`400`	`22px`	—
`display-xl`	`56px`	`700`	`1.05`	`-1.12px`
`display-lg`	`40px`	`700`	`1.1`	`-0.4px`
`display-md`	`32px`	`700`	`1.2`	`-0.32px`
`display-sm`	`24px`	`700`	`1.3`	—
`title-lg`	`20px`	`700`	`1.4`	—
`title-md`	`18px`	`600`	`1.4`	—
`title-sm`	`16px`	`500`	`1.4`	—
`body-lg`	`16px`	`400`	`1.6`	—
`body-md`	`15px`	`400`	`1.6`	—
`body-sm`	`14px`	`400`	`1.5`	—
`label-md`	`14px`	`500`	`1.4`	—
`label-sm`	`13px`	`400`	`1.4`	—
`caption`	`12px`	`400`	`1.5`	—
`badge`	`11px`	`600`	`1.2`	—
`overline`	`10px`	`700`	`1.3`	`0.8px`

라운드

토큰	값
`r0_5`	`2px`
`r1`	`4px`
`r1_5`	`6px`
`r2`	`8px`
`r2_5`	`10px`
`r3`	`12px`
`r3_5`	`14px`
`r4`	`16px`
`r5`	`20px`
`r6`	`24px`
`full`	`9999px`
`xs`	`2px`
`sm`	`4px`
`md`	`8px`
`lg`	`12px`
`xl`	`16px`
`2xl`	`20px`

간격

토큰	값
`x0_5`	`2px`
`x1`	`4px`
`x1_5`	`6px`
`x2`	`8px`
`x2_5`	`10px`
`x3`	`12px`
`x3_5`	`14px`
`x4`	`16px`
`x4_5`	`18px`
`x5`	`20px`
`x6`	`24px`
`x7`	`28px`
`x8`	`32px`
`x9`	`36px`
`x10`	`40px`
`x12`	`48px`
`x13`	`52px`
`x14`	`56px`
`x16`	`64px`
`xs`	`4px`
`sm`	`8px`
`md`	`12px`
`lg`	`16px`
`xl`	`24px`
`2xl`	`32px`
`3xl`	`48px`
`global-gutter`	`24px`
`between-chips`	`8px`
`component-default`	`12px`
`between-text`	`6px`
`nav-to-title`	`20px`
`screen-bottom`	`56px`

중단점

토큰	값	비고
`breakpoint-sm`	`480px`	480 – 767 · 큰 폰 · 작은 태블릿
`breakpoint-md`	`768px`	768 – 1279 · 사이드 내비게이션이 보이기 시작한다
`breakpoint-lg`	`1280px`	1280 – 1439 · 데스크톱
`breakpoint-xl`	`1440px`	1440 이상 · 넓은 데스크톱

레이아웃

토큰	값	비고
`layout-max-low`	`720px`	low 밀도의 최대 폭 · medium 밀도의 768 – 1279 최대 폭
`layout-max-medium`	`1040px`	medium 밀도의 1280 이상 최대 폭
`layout-max-content`	`1040px`	콘텐츠 레이아웃 기본 최대 폭 — 읽기에 몰입하게
`layout-max-content-wide`	`1280px`	넓게 훑어보는 페이지(검색 결과 · 목록)의 최대 폭
`layout-margin`	`32px`	웹 페이지 좌우 여백 · 768 이상
`layout-gutter`	`24px`	웹 칸 · 카드 사이 · 768 이상
`layout-gutter-narrow`	`16px`	칸 사이 · 768 미만(v103) — 위아래로 쌓은 카드 사이는 8(2026-10-08)
`layout-sidebar`	`240px`	사이드 내비게이션 폭
`layout-sidebar-collapsed`	`56px`	접은 사이드 내비게이션(아이콘만)

터치 영역

토큰	값	비고
`touch-min`	`44px`	WCAG 2.5.5 AAA minimum (default, 모든 hit target 권장)
`touch-pill-w`	`100px`	Pill CTA min-width (Apple Store: ~44 × 100)
`touch-circular`	`44px`	Circular chip / icon button (= touch-min, explicit alias)

z-index

토큰	값	비고
`z-base`	`auto`	L0 페이지 — 쌓임 맥락을 만들지 않는다
`z-sticky`	`50`	L1 페이지에 붙은 것 — 상단 바(Top Navigation) · 하단 탭 바(Bottom Navigation) · 떠 있는 버튼(Floating Action Button) · 스피드 다이얼
`z-modal`	`100`	L2 딤 — Dialog · Bottom Sheet · Menu Sheet · Side Panel(옆 패널)
`z-modal-content`	`101`	L2 표면 — 자기 딤 바로 위
`z-floating`	`200`	L3 트리거에 붙어 뜨는 것 — Popover · Select 목록 · Menu. 페이지에서도 모달 안에서도 같은 값
`z-tooltip`	`210`	L4 말풍선 — Help Bubble · Tooltip
`z-alert`	`300`	L5 Alert Dialog 딤
`z-alert-content`	`301`	L5 Alert Dialog 표면
`z-snackbar`	`400`	L6 Snackbar 자리
`z-dev`	`9999`	L9 개발 환경 표시 — 운영에서는 그리지 않는다

그림자

토큰	값	비고
`shadow-s1`	`0 1px 2px 0 rgba(15, 18, 28, 0.05)`	옛 `shadow-sm` — 슬라이더 손잡이(2026-10-09) · 카드(2026-10-08)는 그림자를 걷었다
`shadow-s2`	`0 2px 8px -1px rgba(15, 18, 28, 0.08), 0 1px 3px -1px rgba(15, 18, 28, 0.04)`	드롭다운 · 툴팁 · 떠 있는 버튼(옛 `shadow-md`)
`shadow-s3`	`0 8px 24px -4px rgba(15, 18, 28, 0.10), 0 2px 6px -2px rgba(15, 18, 28, 0.05)`	팝오버 · 작은 모달(옛 `shadow-lg`)
`shadow-s4`	`0 24px 48px -8px rgba(15, 18, 28, 0.16), 0 8px 16px -4px rgba(15, 18, 28, 0.08)`	큰 모달 · 서랍(옛 `shadow-xl`)
`shadow-s1-dark`	`0 1px 2px 0 rgba(0, 0, 0, 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)`	다크 — s1
`shadow-s2-dark`	`0 2px 8px -1px rgba(0, 0, 0, 0.40), 0 1px 3px -1px rgba(0, 0, 0, 0.20), inset 0 1px 0 0 rgba(255, 255, 255, 0.06)`	다크 — s2
`shadow-s3-dark`	`0 8px 24px -4px rgba(0, 0, 0, 0.50), 0 2px 6px -2px rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.08)`	다크 — s3
`shadow-s4-dark`	`0 24px 48px -8px rgba(0, 0, 0, 0.60), 0 8px 16px -4px rgba(0, 0, 0, 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.10)`	다크 — s4
`shadow-sm`	`0 1px 2px 0 rgba(15, 18, 28, 0.05)`	작은 손잡이(매우 미묘) — 옛 카드 정지 상태, 카드는 2026-10-08 부터 그림자 없음
`shadow-md`	`0 2px 8px -1px rgba(15, 18, 28, 0.08), 0 1px 3px -1px rgba(15, 18, 28, 0.04)`	드롭다운·툴팁(카드의 hover 그림자는 2026-10-08 걷었다)
`shadow-lg`	`0 8px 24px -4px rgba(15, 18, 28, 0.10), 0 2px 6px -2px rgba(15, 18, 28, 0.05)`	popover·작은 모달
`shadow-xl`	`0 24px 48px -8px rgba(15, 18, 28, 0.16), 0 8px 16px -4px rgba(15, 18, 28, 0.08)`	큰 모달·drawer·hero overlay
`shadow-sm-dark`	`0 1px 2px 0 rgba(0, 0, 0, 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)`	다크 — 작은 손잡이(카드는 그림자 없음)
`shadow-md-dark`	`0 2px 8px -1px rgba(0, 0, 0, 0.40), 0 1px 3px -1px rgba(0, 0, 0, 0.20), inset 0 1px 0 0 rgba(255, 255, 255, 0.06)`	다크 드롭다운·툴팁
`shadow-lg-dark`	`0 8px 24px -4px rgba(0, 0, 0, 0.50), 0 2px 6px -2px rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.08)`	다크 popover·작은 모달
`shadow-xl-dark`	`0 24px 48px -8px rgba(0, 0, 0, 0.60), 0 8px 16px -4px rgba(0, 0, 0, 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.10)`	다크 큰 모달·drawer·hero overlay

딤

토큰	값	비고
`overlay-dim-light`	`rgba(0, 0, 0, 0.50)`	라이트 모드 modal/sheet 배경 dim
`overlay-dim-dark`	`rgba(0, 0, 0, 0.65)`	다크 모드 modal/sheet 배경 dim — 다크 표면 위 분리감 강화

모션 — 지속 시간

토큰	값	비고
`motion-duration-d1`	`50ms`	아주 작은 상태 변화
`motion-duration-d2`	`100ms`	작은 상태 변화(옛 앱 `instant` 80ms 는 여기로)
`motion-duration-d3`	`150ms`	마이크로 모션 기본 — 색 전환 · 눌림
`motion-duration-d4`	`200ms`	마이크로 모션 상한 — 메뉴 · 툴팁
`motion-duration-d5`	`250ms`	매크로 모션 — 시트 · 서랍
`motion-duration-d6`	`300ms`	매크로 모션 상한 — 모달 · 페이지 전환
`motion-duration-color-transition`	`150ms`	역할 — 색 전환(= d3)
`motion-duration-pressed-scale`	`150ms`	역할 — 눌림 축소(= d3)
`motion-duration-fast`	`150ms`	작은 hover/focus 전환, ripple
`motion-duration-base`	`200ms`	default — drawer/dropdown 일반 UI 전환
`motion-duration-slow`	`300ms`	modal/page-level 전환
`motion-duration-slower`	`500ms`	hero/large layout shift
`motion-duration-loop`	`1500ms`	스켈레톤 반짝임 1주기(곡선은 `motion-ease-easing` — 2026-10-03), pulse 1주기

모션 — 이징

토큰	값	비고
`motion-ease-easing`	`cubic-bezier(0.35, 0, 0.35, 1)`	버튼 · 포커스 같은 기능적 마이크로 모션
`motion-ease-enter`	`cubic-bezier(0, 0, 0.15, 1)`	다이얼로그 · 시트가 나타날 때
`motion-ease-exit`	`cubic-bezier(0.35, 0, 1, 1)`	다이얼로그 · 시트가 사라질 때
`motion-ease-enter-expressive`	`cubic-bezier(0.03, 0.4, 0.1, 1)`	특히 강조해야 하는 등장
`motion-ease-exit-expressive`	`cubic-bezier(0.35, 0, 0.95, 0.55)`	특히 강조해야 하는 퇴장
`motion-ease-pressed-scale`	`cubic-bezier(0, 0, 0.15, 1)`	눌림 축소
`motion-ease-out`	`cubic-bezier(0.16, 1, 0.3, 1)`	default — 자연스러운 감속(Toss·Material 공통)
`motion-ease-linear`	`linear`	일정한 속도가 필요한 반복 (`ease-out` 반복은 끝에 멈춰 어색) — 스켈레톤 · Progress Circle 은 쓰지 않는다(2026-10-03)

그라디언트

토큰	값	비고
`gradient-fade-mask`	`linear-gradient(#00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%)`	가림 마스크 — `mask-image` 로 써서 스크롤 영역의 끝을 부드럽게(Scroll Fog — `specs/components/scroll-fog.yaml`, 2026-10-03). 라이트 · 다크 같음
`gradient-shimmer-neutral`	`linear-gradient(90deg, #ffffff00 0%, #ffffffab 46%, #ffffffab 54%, #ffffff00 100%)`	스켈레톤 반짝임 띠 — 라이트
`gradient-shimmer-neutral-dark`	`linear-gradient(90deg, #ffffff00 0%, #ffffff1a 46%, #ffffff1a 54%, #ffffff00 100%)`	스켈레톤 반짝임 띠 — 다크

팔레트제목 링크 복사

브랜드 팔레트제목 링크 복사

역할 색제목 링크 복사

브랜드 역할 색제목 링크 복사

옛 이름제목 링크 복사

차트제목 링크 복사

차트 옅은 바탕제목 링크 복사

타이포그래피제목 링크 복사

라운드제목 링크 복사

간격제목 링크 복사

중단점제목 링크 복사

레이아웃제목 링크 복사

터치 영역제목 링크 복사

z-index제목 링크 복사

그림자제목 링크 복사

딤제목 링크 복사

모션 — 지속 시간제목 링크 복사

모션 — 이징제목 링크 복사

그라디언트제목 링크 복사

이 페이지

팔레트