색상
진행 중 (Color tokens — work in progress)
- 정의된 토큰부터 우선 정리하고 있습니다. 시맨틱 토큰은 일부만 정의돼 있고(hover·focus·disabled 등 상태별 토큰 미흡),
hr-*family와 같은 legacy 토큰도 혼재합니다. - 최종 목표: 모든 색을
core(primitive + semantic)단일 시스템으로 통합.hr-*legacy family는 단계적으로 deprecate. - 자세한 진행 현황은 본 페이지 목표 & 로드맵을 참고하세요.
단일 출처
모든 색상 토큰의 정의는 한 파일에서 관리합니다.
packages/static/styles/design-system.css여기서 정의된 값이 packages/static/src/tokens.ts, packages/static/tokens.figma.json, Figma 플러그인 등으로 자동 전파됩니다.
자세한 사용 가이드: packages/static/COLORS.md
토큰 계층 (현재)
| 계층 | 접두사 | 정의 위치 | 상태 | 사용 시점 |
|---|---|---|---|---|
| Primitive | --color-<hue>-<N> | @theme | ✅ 정리 완료 | 모든 color scale의 단일 출처 |
| Semantic | --color-<group>-<name> | @theme inline | 🟡 부분 정의 | 의미별 alias — 디자인 시 1순위 |
| DS semantic | --ds-color-<role> | :root | 🟡 중복 정의 있음 | 디자인 시스템 의미 토큰 (color scale 외) |
hr-* family | --color-hr-<family>-<N> | @theme | 🔴 legacy | Tailwind 표준 팔레트 호환용 (제거 대상) |
Primitive 팔레트
모든 시맨틱 토큰이 궁극적으로 가리키는 단일 출처입니다. 10단계(50~900) 가 표준이며 neutral만 25/75를 추가로 가집니다.
Neutral (12단계)
| Swatch | Token | Hex |
|---|---|---|
--color-neutral-25 | #fdfdfd | |
--color-neutral-50 | #f5f5f5 | |
--color-neutral-75 | #f1f1f1 | |
--color-neutral-100 | #e5e5e5 | |
--color-neutral-200 | #dadada | |
--color-neutral-300 | #c1c1c1 | |
--color-neutral-400 | #8f8f8f | |
--color-neutral-500 | #5e5e5e | |
--color-neutral-600 | #4a4a4a | |
--color-neutral-700 | #2c2c2c | |
--color-neutral-800 | #252525 | |
--color-neutral-900 | #1b1b1b |
Orange (Hereby Brand Primary)
| Swatch | Token | Hex |
|---|---|---|
--color-orange-50 | #fef2ec | |
--color-orange-100 | #fee6d9 | |
--color-orange-200 | #fdd7c4 | |
--color-orange-300 | #faaf89 | |
--color-orange-400 | #f8884f | |
--color-orange-500 ← brand | #f66014 | |
--color-orange-600 | #d3440e | |
--color-orange-700 | #b12c0a | |
--color-orange-800 | #8e1a06 | |
--color-orange-900 | #760c03 |
Blue (정보·링크)
| Swatch | Token | Hex |
|---|---|---|
--color-blue-50 | #edf3fd | |
--color-blue-100 | #dce6fc | |
--color-blue-200 | #c8d8fa | |
--color-blue-300 | #91b1f5 | |
--color-blue-400 | #5b8af0 | |
--color-blue-500 | #2463eb | |
--color-blue-600 | #0243cf | |
--color-blue-700 | #003bbb | |
--color-blue-800 | #002c8c | |
--color-blue-900 | #00287d |
Green (성공·긍정)
| Swatch | Token | Hex |
|---|---|---|
--color-green-50 | #f0fdea | |
--color-green-100 | #e8fddf | |
--color-green-200 | #bdf9ad | |
--color-green-300 | #8eee81 | |
--color-green-400 | #62de5f | |
--color-green-500 | #30c93a | |
--color-green-600 | #23ac38 | |
--color-green-700 | #189035 | |
--color-green-800 | #0f7431 | |
--color-green-900 | #09602e |
Red (오류·위험)
| Swatch | Token | Hex |
|---|---|---|
--color-red-50 | #fff5f4 | |
--color-red-100 | #ffd7d4 | |
--color-red-200 | #ffafa9 | |
--color-red-300 | #ff877e | |
--color-red-400 | #ff5f53 | |
--color-red-500 | #ff3728 | |
--color-red-600 | #e63224 | |
--color-red-700 | #cc2c20 | |
--color-red-800 | #a62920 | |
--color-red-900 | #802018 |
Yellow (경고·주의)
| Swatch | Token | Hex |
|---|---|---|
--color-yellow-50 | #fefae8 | |
--color-yellow-100 | #fef3cb | |
--color-yellow-200 | #fde498 | |
--color-yellow-300 | #fad064 | |
--color-yellow-400 | #f6bc3d | |
--color-yellow-500 | #f09c00 | |
--color-yellow-600 | #ce7e00 | |
--color-yellow-700 | #ac6300 | |
--color-yellow-800 | #8b4b00 | |
--color-yellow-900 | #733a00 |
Aquablue (보조 강조)
| Swatch | Token | Hex |
|---|---|---|
--color-aquablue-50 | #f4fefe | |
--color-aquablue-100 | #d5fbfc | |
--color-aquablue-200 | #adf1f9 | |
--color-aquablue-300 | #81dcee | |
--color-aquablue-400 | #5fc0de | |
--color-aquablue-500 | #309bc9 | |
--color-aquablue-600 | #237aac | |
--color-aquablue-700 | #185c90 | |
--color-aquablue-800 | #0f4174 | |
--color-aquablue-900 | #092e60 |
Purple (보조 강조)
| Swatch | Token | Hex |
|---|---|---|
--color-purple-50 | #f6f6fe | |
--color-purple-100 | #dbdcfc | |
--color-purple-200 | #b8bafa | |
--color-purple-300 | #9294f0 | |
--color-purple-400 | #7375e2 | |
--color-purple-500 | #484acf | |
--color-purple-600 | #3436b2 | |
--color-purple-700 | #242595 | |
--color-purple-800 | #161778 | |
--color-purple-900 | #0d0e63 |
트랩 주의
--color-blue-*는 한때--color-orange-*로 리맵되어 있었으나(Step 7) 영구 제거됐습니다. 지금--color-blue-500은 진짜 blue(#2463eb)이고, brand color는--color-primary또는--color-orange-500을 직접 사용하세요.--ds-{family}-{shade}형태의 토큰(예:--ds-orange-500)은 모두 제거됐습니다.--color-{family}-{shade}만 사용.
Semantic 토큰 (현재 정의된 것)
Brand
| Swatch | Token | 의미 | 매핑 |
|---|---|---|---|
--color-primary | 브랜드 기본색 | --color-orange-500 | |
--color-primary-bg | 브랜드 배경 | --color-orange-50 | |
--color-primary-strong | 브랜드 강조 | --color-orange-600 | |
--color-primary-heavy | 브랜드 더 강한 강조 | --color-orange-700 |
Background
| Swatch | Token | 의미 | 매핑 |
|---|---|---|---|
--color-bg-normal | 기본 배경 | #ffffff | |
--color-bg-alternative | 대안 배경 | --color-neutral-50 | |
--color-bg-container | 컨테이너 배경 | #ffffff | |
--color-bg-elevated | 부각된 표면 | --color-neutral-25 |
Label (텍스트)
| Swatch | Token | 의미 | 매핑 |
|---|---|---|---|
--color-label-normal | 기본 텍스트 | --color-neutral-900 | |
--color-label-black-normal | 기본 텍스트 (별칭) | --color-neutral-900 | |
--color-label-black-strong | 순수 검정 텍스트 | #000000 | |
--color-label-alternative | 보조 텍스트 | --color-neutral-600 | |
--color-label-assistive | 더 옅은 보조 | --color-neutral-500 | |
--color-label-muted | 비활성 텍스트 | --color-neutral-400 | |
--color-label-disable | 비활성 | --color-neutral-300 | |
--color-label-white | 흰 텍스트 | #ffffff | |
--color-label-white-normal | 거의 흰 텍스트 | --color-neutral-25 |
Line (경계선)
| Swatch | Token | 의미 | 매핑 |
|---|---|---|---|
--color-line-normal | 기본 경계선 | --color-neutral-100 | |
--color-line-alternative | 진한 경계선 | --color-neutral-200 | |
--color-line-dark | 다크 경계선 | --color-neutral-900 |
Status
| Swatch | Token | 의미 | 매핑 |
|---|---|---|---|
--color-status-success | 성공 | --color-green-600 | |
--color-status-warning | 경고 | --color-yellow-400 | |
--color-status-error | 오류 | --color-red-600 | |
--color-status-info | 정보 | --color-blue-500 |
Secondary (보조 family alias)
각 family의 강조용 단계(대부분 500, 단 yellow는 300)를 가리킵니다. 보조 강조 위치에 family 단위로 사용합니다.
| Swatch | Token | 매핑 |
|---|---|---|
--color-secondary-orange | --color-orange-500 | |
--color-secondary-aquablue | --color-aquablue-500 | |
--color-secondary-green | --color-green-500 | |
--color-secondary-yellow | --color-yellow-300 | |
--color-secondary-purple | --color-purple-500 | |
--color-secondary-blue | --color-blue-500 | |
--color-secondary-red | --color-red-600 |
DS semantic 토큰 (--ds-color-*)
color scale 외 의미 토큰입니다. 일부는 위 Semantic과 중복 정의돼 있어 정리 대상입니다.
| Swatch | Token | 의미 |
|---|---|---|
--ds-color-text | 본문 텍스트 | |
--ds-color-bg | 배경 | |
--ds-color-bg-alt | 대안 배경 | |
--ds-color-line | 경계선 | |
--ds-color-line-strong | 진한 경계선 | |
--ds-color-primary | 브랜드 | |
--ds-color-primary-strong | 브랜드 강조 | |
--ds-color-primary-soft | 브랜드 옅음 | |
--ds-color-focus | 포커스 ring | |
--ds-color-muted | 보조 텍스트 | |
--ds-color-success | 성공 | |
--ds-color-danger | 위험 |
Legacy — hr-* family
Tailwind 표준 팔레트 호환을 위해 14개 family(slate · gray · neutral · blue · indigo · violet · pink · red · orange · amber · yellow · green · emerald · aquablue)를 별도 보존했습니다. 각 family는 50~900 = 약 140개 토큰.
예: --color-hr-blue-500 = Tailwind 표준 blue #3b82f6 (Hereby brand blue와 다름).
상태: 🔴 점진적으로 제거 예정. 새 코드에서는 사용하지 마세요. 전체 hex는 packages/static/styles/design-system.css에서 확인.
사용 우선순위 (코드 작성 시)
1. Semantic — var(--color-primary), var(--color-status-error)
2. DS semantic — var(--ds-color-line), var(--ds-color-focus)
3. Primitive — var(--color-orange-500), var(--color-neutral-900)
4. Tailwind 유틸 — bg-orange-500, text-neutral-900
5. (지양) hr-* — var(--color-hr-blue-500) ← legacy
6. (금지) 신규 hex — #4a90e2 ← 디자이너 확인 후 등록※
CLAUDE.md의 "사용 우선순위"는 Tailwind utility를 1순위로 둠(표기 간결성 우선). 위 목록은 의미(semantic) 우선 관점이며, 새 UI 코드 작성 기준은 CLAUDE.md를 따른다.
정리 대기 중인 색상 (Uncovered colors)
토큰화 안 되고 코드에 직접 hex로 박힌 색들입니다. 인접 primitive 토큰으로 흡수하거나, 신규 의미가 있다면 semantic 토큰으로 등록해야 합니다.
🟠 1순위 — 컴포넌트 패키지 (packages/components/)
디자인 시스템 자체 패키지라 가장 먼저 정리해야 합니다.
| Swatch | Hex | 인접 토큰 제안 | 사용처 |
|---|---|---|---|
#ea580c | --color-orange-600 (#d3440e ΔE 미세) | messenger-content.html:3 — chat bubble sent | |
#f3f4f6 | --color-neutral-50 (#f5f5f5) | messenger-content.html:4 — chat bubble received | |
#1f2937 | --color-neutral-800 (#252525) | messenger-content.html:4 — chat bubble text | |
#22c55e | --color-green-500 (#30c93a) 또는 --color-status-success | messenger-content.html:5 — online status | |
#d1d5db | --color-neutral-200 (#dadada) | messenger-content.html:6 — offline status | |
#ef4444 | --color-red-500 (#ff3728) 또는 --color-status-error | messenger-content.html:7 — busy status | |
#f59e0b | --color-yellow-500 (#f09c00) 또는 --color-status-warning | messenger-content.html:8 — away status |
add-employee-wizard.html
233-239행의 var(--ds-label-black, #1b1b1b)는 fallback hex이므로 정리 대상 아님(토큰 부재 시에만 적용).
🟡 2순위 — DS 사용 앱 (admin · hr-system · team-manager)
| Swatch | Hex | 인접 토큰 제안 | 사용처 |
|---|---|---|---|
#3b82f6 | --color-blue-500 (#2463eb) 또는 --ds-color-focus | team-manager/app.ts:3738,3845-48,3858,3992 · hr-system/app.ts:3418-27,4730 — focus ring·border highlight | |
#2563eb | --color-blue-500 (정확히 동일) | team-manager/app.ts:3858 · inventory/main.css | |
#e8f0fe | --color-blue-50 (#edf3fd) | team-manager/app.ts:3738 — selection background | |
#dc2626 | --color-red-600 (#e63224) | hr-system/perf.ts:95 — console error color | |
#16a34a | --color-green-700 (#189035) | hr-system/perf.ts:98 — console ok color | |
#b4b4b4 | --color-neutral-300 (#c1c1c1) | admin/organization.html:483 — tree chevron icon | |
#6b6b6b | --color-neutral-500 (#5e5e5e) | admin/organization.html:494 — tree sub-team text | |
#a8a8a8 | --color-neutral-400 (#8f8f8f) | admin/organization.html:497 — tree count badge | |
#fecaca | --color-red-100 (#ffd7d4 ΔE 미세) | admin/organization.html:867 — danger button border | |
#111827 | --color-neutral-900 (#1b1b1b) | team-manager/treatment-incentive.html:131 — input text |
의도된 보존 (정리 대상 아님)
#FF4141— 브랜드 로고 그라데이션 stop color (team-manager/dashboard.html:58, hr-system/dashboard.html:27)
제거 대상(보존 아님): team-manager/main.css:8-17의
--color-orange-*10건은design-system.css토큰 정의의 중복 재정의라 삭제 권장 (packages/static을 import하므로 삭제해도 동작 동일).
🔵 3순위 — Phase 8 non-DS 앱 (보류 중)
inventory · module-manager는 디자인 시스템 import 패턴이 아직 적용되지 않아 보류 중입니다. 모두 Tailwind 표준 색이라 hr-* family로 1:1 흡수 가능. 각 앱을 펼치면 모든 hex가 보입니다. (general-affairs는 이 브랜치에서 토큰화 완료 — 잔여 hex 0건. 아래 표는 적용된 매핑 기록.)
general-affairs — ✅ 완료 (이 브랜치에서 토큰화, 잔여 0건 / 아래는 적용된 매핑 기록) (main.css)
| Swatch | Hex | 인접 토큰 제안 | 사용처 (line) |
|---|---|---|---|
#fef3c7 | --color-hr-amber-100 | 22, 60 | |
#b45309 | --color-hr-amber-700 | 23, 61 | |
#d1fae5 | --color-hr-emerald-100 | 26 | |
#047857 | --color-hr-emerald-700 | 27 | |
#fee2e2 | --color-hr-red-100 | 30, 34, 64 | |
#dc2626 | --color-hr-red-600 / --color-status-error (#e63224 인접) | 31, 35, 65 | |
#dbeafe | --color-hr-blue-100 | 38, 56 | |
#1d4ed8 | --color-hr-blue-700 | 39, 57 | |
#f3f4f6 | --color-hr-gray-100 / --color-neutral-50 인접 | 42, 52 | |
#6b7280 | --color-hr-gray-500 | 43, 53 | |
#e0e7ff | --color-hr-indigo-100 | 46 | |
#4338ca | --color-hr-indigo-700 | 47 |
inventory — 19건 (main.css)
| Swatch | Hex | 인접 토큰 제안 | 사용처 (line) |
|---|---|---|---|
#2563eb | --color-blue-500 (#2463eb 거의 동일) | 6, 8 | |
#fee2e2 | --color-hr-red-100 | 20 | |
#dc2626 | --color-hr-red-600 | 21 | |
#ffedd5 | --color-hr-orange-100 | 24 | |
#ea580c | --color-hr-orange-600 / --color-orange-600 인접 | 25 | |
#fef9c3 | --color-hr-yellow-100 | 28 | |
#ca8a04 | --color-hr-yellow-600 | 29 | |
#d1fae5 | --color-hr-emerald-100 | 32 | |
#047857 | --color-hr-emerald-700 | 33 | |
#ede9fe | --color-hr-violet-100 | 36 | |
#7c3aed | --color-hr-violet-600 | 37 | |
#f3f4f6 | --color-hr-gray-100 | 40, 48 | |
#6b7280 | --color-hr-gray-500 | 41, 54 | |
#e5e7eb | --color-hr-gray-200 / --color-neutral-100 인접 | 55 | |
#f1f5f9 | --color-hr-slate-100 | 73 | |
#cbd5e1 | --color-hr-slate-300 | 76 |
module-manager — 8건 (main.css)
| Swatch | Hex | 인접 토큰 제안 | 사용처 (line) |
|---|---|---|---|
#e5e7eb | --color-hr-gray-200 / --color-neutral-100 | 9 | |
#d1d5db | --color-hr-gray-300 / --color-neutral-200 인접 | 18, 19 | |
#f3f4f6 | --color-hr-gray-100 | 20 | |
#f0f7ff | --color-hr-blue-50 인접 (정확 매칭 없음) | 28 | |
#2563eb | --color-blue-500 (거의 동일) | 32 | |
#1d4ed8 | --color-hr-blue-700 | 33 | |
#cbd5e1 | --color-hr-slate-300 | 43 |
🟢 인라인 rgba — standalone 컨텍스트
DS 사용 앱·컴포넌트에는 0건 (Step 5에서 모두 토큰화). 남은 14건은 별도 컨텍스트입니다.
| 컨텍스트 | 건수 | 비고 |
|---|---|---|
| packages/test/src/reporter/html-generator.ts | 11 | 테스트 결과 standalone HTML — 별도 색 체계 OK |
| apps/admin/404.html | 2 | 404 정적 페이지 — 자체 --ds-shadow-* 정의. design-system.css import 검토 가능 |
목표 & 로드맵
최종 목표
모든 색을
core(primitive + semantic)단일 시스템으로 통합한다.
우선순위 작업
| # | 작업 | 상태 |
|---|---|---|
| 1 | Primitive scale 단일화 (Step 6/7) | ✅ 완료 |
| 2 | rgba / shadow alpha 토큰화 (Step 5) | ✅ 완료 (DS 사용처 0건) |
| 3 | Tailwind blue→orange 리맵 영구 제거 (Step 7) | ✅ 완료 |
| 4 | Tailwind arbitrary bg-[#xxx] 정리 (Step 8) | ✅ 완료 (0건) |
| 5 | Semantic 토큰 누락분 정의 (hover · focus · disabled 상태별, container/surface 변형) | 🟡 진행 중 |
| 6 | --ds-color-*와 --color-* semantic 중복 해소 (단일 alias 체계로 통일) | 🟡 진행 중 |
| 7-A | 정리 대기 hex — 컴포넌트 패키지 7건 | 🟠 진행 중 (위 1순위 표) |
| 7-B | 정리 대기 hex — DS 사용 앱 ~25건 | 🟡 진행 중 (위 2순위 표) |
| 7-C | 정리 대기 hex — Phase 8 non-DS ~27건 (general-affairs 완료, inventory·module-manager 잔여) | 🔴 보류 (DS import 패턴 도입 선행) |
| 8 | hr-* family 사용처 정리 후 토큰 자체 제거 | 🔴 보류 (사용처 정리 선행) |
| 9 | 다크 모드 토큰 정의 | 🔴 미정 |
정의가 부족한 영역 (TODO)
- 상태별 surface: hover/pressed/focus/disabled의 배경·텍스트 색이 컴포넌트별로 hard-coded
- 컨테이너 변형: card/modal/panel 등 표면의 grade 구분
- 이중 의미:
--color-primary와--ds-color-primary가 같은 의미로 양립 → 단일화 필요 - 다크 모드: 모든 토큰의 다크 매핑이 미정의
변경 이력
- 2026-05-20: Step 5/6/7/8/9 — alpha 토큰화 + family 통합 + blue 리맵 영구 제거 + hex 정리 + 중복 토큰 8개 제거
- 2026-05-13: Step 1 — extended 72색 →
hr-*14 family 정리 - 2026-05-13: Step 2 — spacing/radius/opacity 토큰 추가
- 2026-05-13: Step 3/4 — pre-commit 신규 컬러 안내 훅 +
COLORS.md작성
전체 토큰 정의 확인: packages/static/styles/design-system.css