색상
primitive·semantic 색 토큰의 계층과 팔레트를 확인하고, 코드에서 무엇을 먼저 고를지 찾아보세요.
토큰 · Web / Mobile · 진행 중(WIP) · 문서 포맷 시범 적용
진행 중 (Color tokens — work in progress)
- 정의된 토큰부터 우선 정리하고 있습니다. 시맨틱 토큰은 일부만 정의돼 있고(hover·focus·disabled 등 상태별 토큰 미흡),
hr-*family와 같은 legacy 토큰도 혼재합니다. - 최종 목표: 모든 색을
core(primitive + semantic)단일 시스템으로 통합.hr-*legacy family는 단계적으로 deprecate. - 자세한 진행 현황은 본 페이지 목표 & 로드맵을 참고하세요.
규칙 (강제) · 코딩 에이전트용
⚠️ 색 토큰은 진행 중입니다 — 시맨틱 토큰이 일부만 정의돼 있고 hr-* legacy 가 섞여 있습니다. 수치를 하드코딩하지 말고 이 문서를 정본으로 참조하세요. 레거시는 위반이 아니라 마이그레이션 대상입니다.
정본 — 모든 색 토큰은 packages/static/styles/design-system.css 에 정의되고 거기서 자동 전파됩니다(packages/static/src/tokens.ts · tokens.figma.json).
고르는 순서 — 새 UI 를 쓸 때 위에서부터 고른다(사용 우선순위). 2026-10-13 라이트·다크 테마 도입으로 시멘틱이 1순위가 됐다 — 원시 팔레트 유틸은 테마를 모른다. 테마·표면 맥락 규칙 전체: 라이트 · 다크 테마와 표면 맥락.
- 시멘틱 유틸·토큰(글자·면·경계·상태·버튼) —
text-label-normal·text-label-assistive·bg-bg-container·bg-bg-alternative·border-line-normal·.ds-surface--card/--brand/--inverse·.ds-notice/.ds-label·ds-btn역할 클래스 ·var(--color-action-primary)+-fg. 면이 있는 토큰은 짝으로(action-*-fg,status-*-bg/-fg/-border/-icon). - DS 알파 틴트 / 그림자 —
var(--ds-selection-tint-12)·var(--ds-glass-08)·var(--ds-hover-tint-16)·var(--ds-shadow-md)·var(--ds-dim-40). - primitive(테마가 바뀌어도 그대로여야 하는 곳만) —
var(--color-orange-500)·bg-orange-500: 브랜드 그래픽 · 차트 계열색 · BI. 글자·면·경계에는 쓰지 않는다. - 간격 / 모서리 / 투명도 —
var(--ds-spacing-16)·var(--radius-8)·var(--ds-opacity-50)
🚫 금지 — 리뷰에서 막는다
- ❌ 하드코딩 hex:
color: #1b1b1b·background: #fef2ec→var(--color-neutral-900)·var(--color-orange-50) - ❌ 인라인 rgba:
rgba(0,0,0,0.5)·rgba(255,255,255,0.08)→var(--ds-dim-50)·var(--ds-glass-08) - ❌ Tailwind 임의값:
bg-[#1B1B1B]·border-[#E5E5E5]→bg-neutral-900·border-neutral-100 - ❌
--ds-{family}-{shade}형식:var(--ds-orange-500)·var(--ds-neutral-900)·var(--ds-blue-500)— Step 6/7 에서 전부 제거됐다.var(--color-{family}-{shade})를 쓸 것. - ❌ 인라인 box-shadow:
box-shadow: 0 4px 6px rgba(0,0,0,0.1)→box-shadow: var(--ds-shadow-md)(그림자)
⚠️ var() 가 통하지 않는 자리 — 예외이지 위반이 아니다
- canvas API · 인라인 style 문자열:
var()가 안 먹는다.@hereby/static/tokens의dsColor('--color-orange-500')를 쓸 것. - SVG presentation attribute:
<path fill="var(--…)">는 무효다. CSS 클래스(fill-orange-500)나style=""로 쓸 것. - 이메일 HTML: 이메일 클라이언트가 CSS 변수를 지원하지 않아
packages/api/src/services/email.service.ts에서만 인라인 hex 가 허용된다. 색에만 해당하는 예외이고, 그 이메일 안의 브랜드 표기는 여전히 규칙을 따른다(© 2026 hereby,Hereby아님). <meta name="theme-color">: 메타 태그는 CSS 가 아니라 문자열 속성이라var()가 풀리지 않고 브라우저가 조용히 무시한다. 인라인 hex 가 필요하며 대응하는 토큰 값과 같게 유지한다(--color-orange-500=#f66014) — 바꿀 땐 둘을 같이 고친다.- BI 자산(브랜드 심볼·락업): hex 를 하드코딩으로 유지한다 — 공식 예외이고 「고칠 위반」이 아니다. 3-stop 그라디언트의
stop-color와 자산 안의 평면 색(심볼 안쪽 흰색#FFFFFF· 락업 워드마크#1B1B1B)까지 포함한다. BI 자산은 CSS 변수가 없는 곳에서도 열려야 하기 때문이다(이메일 HTML · 내려받은 단독.svg· 파비콘 파일 · 외부 배포).var()를 쓰면 심볼이 검게 렌더되고,fillpresentation attribute 는 애초에var()를 받지 못한다. 대상:packages/components/src/icons.ts(logo-hereby*) ·packages/static/brand/favicon-*.svg· 앱 뷰에 인라인된 BI SVG ·DemoBrandLogo.vue. 자산 바깥의 평면 색(HTML 텍스트로 조판한 서비스명)은 그대로 토큰을 쓴다. 정본: 브랜드 · BI
진짜 새 색이 필요할 때
- 기존 토큰으로 되는지 먼저 확인한다(
packages/static/COLORS.md또는 Figma Variables 패널). - 아주 비슷한 색이 있으면(ΔE ≤ 10) 일관성을 위해 그것을 쓰는 편이 낫다.
- 디자이너 확인 후
design-system.css의@theme블록에 추가한다. - Figma 토큰을 재생성한다:
node scripts/gen-figma-tokens.mjs && node scripts/gen-figma-native.mjs && node scripts/build-figma-plugin.mjs
상세 가이드 + 토큰 변경 이력: packages/static/COLORS.md
Primitive 팔레트
모든 시맨틱 토큰이 궁극적으로 가리키는 단일 출처입니다. 10단계(50~900) 가 표준이며 neutral만 25/75 와 450(#707070, 2026-10-13 — 입력칸·라인 버튼 경계용 --color-line-field, 글자용 단계가 아님)을 추가로 가집니다.
Neutral (13단계)
| 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-450 | #707070 — 2026-10-13 추가 · 경계 전용(--color-line-field · 다크 line-normal), 글자용 아님 | |
--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 토큰 (현재 정의된 것)
「다크」 열은 [data-theme="dark"] 블록이 가리키는 값이에요(정본 CSS 에서 읽어 적음, 2026-10-19). 「(불변)」은 다크에서도 같은 값. 렌더된 값 · 대비는 테마 페이지 → 토큰 표, 점검에서 바뀐 값은 다크 값.
Brand
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-primary | 브랜드 기본색 | --color-orange-500 | (불변) | |
--color-primary-bg | 브랜드 배경 | --color-orange-50 | --color-bg-brand-tint-soft | |
--color-primary-strong | 브랜드 강조 | --color-orange-600 | (불변) | |
--color-primary-heavy | 브랜드 더 강한 강조 | --color-orange-700 | (불변) |
Background
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-bg-normal | 기본 배경 | #ffffff | --color-neutral-800 | |
--color-bg-alternative | 대안 배경 | --color-neutral-50 | --color-neutral-900 | |
--color-bg-container | 컨테이너 배경 | #ffffff | --color-neutral-800 | |
--color-bg-elevated | 부각된 표면(모달 · 드롭다운 · 플라이아웃) | #ffffff(D4) | --color-neutral-700 | |
--color-bg-brand-tint | 브랜드 틴트 면 — 이니셜 아바타 · 아이콘 썸네일 (2026-10-19) | --color-orange-100 | 주황 22% + neutral-800 | |
--color-bg-brand-tint-soft | 옅은 브랜드 틴트 — 강조 칸 · 다크 선택 면 (2026-10-19) | --color-orange-50 | 주황 14% + neutral-800 | |
--color-bg-hover | hover 면 · 메뉴 항목 hover | --color-neutral-100 | --color-neutral-700 | |
--color-bg-selected | 선택 면 · 현재 페이지 버튼 | --color-neutral-200 | --color-neutral-600 | |
--color-bg-sunken | 한 단계 더 가라앉음 · 받은 말풍선 · 캡슐 입력줄 | --color-neutral-75 | --color-neutral-900 | |
--color-bg-inverse | 반전 면 · 툴팁 · 하단 내비 어두운 띠 | --color-neutral-900 | --color-neutral-50 | |
--color-bg-glass | 유리(blur) 베이스 — 앱 헤더 · 하단 내비 캡슐 | #ffffff | --color-neutral-800 |
Label (텍스트)
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-label-normal | 기본 텍스트 | --color-neutral-900 | --color-neutral-50 | |
--color-label-black-normal | 기본 텍스트 (별칭) | --color-neutral-900 | --color-neutral-50 | |
--color-label-black-strong | 순수 검정 텍스트 | #000000 | --color-neutral-25 | |
--color-label-alternative | 보조 텍스트 | --color-neutral-600 | --color-neutral-300 | |
--color-label-assistive | 더 옅은 보조 | --color-neutral-500 | --color-neutral-400 | |
--color-label-muted | 보조 글자 — 플레이스홀더 · 날짜 · 도움말 | --color-neutral-400 | --color-neutral-400 | |
--color-label-disable | 비활성 · 구분점 · 비활성 탭 | --color-neutral-300 | --color-neutral-450 | |
--color-label-white | 흰 텍스트 | #ffffff | (불변) | |
--color-label-white-normal | 거의 흰 텍스트 | --color-neutral-25 | --color-neutral-700 | |
--color-label-body | 부드러운 본문 · body 기본 글자 | --color-neutral-700 | --color-neutral-100 | |
--color-label-brand | 브랜드 강조 글자 · 할 일 건수 · 썸네일 이니셜 | --color-orange-600 | --color-orange-300 | |
--color-label-danger | 위험 글자 · 「반려」 강조 · 메뉴 「로그아웃」 | --color-red-500 | --color-red-400 | |
--color-label-inverse | 반전 면 위 본문(툴팁 글자) | --color-static-white | --color-neutral-900 | |
--color-label-inverse-alternative | 반전 면 위 보조 글자 | --color-neutral-300 | --color-neutral-600 |
Line (경계선)
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-line-normal | 기본 경계선 | --color-neutral-100 | --color-neutral-450 | |
--color-line-alternative | 진한 경계선 | --color-neutral-200 | --color-neutral-400 | |
--color-line-dark | 다크 경계선 | --color-neutral-900 | --color-neutral-100 | |
--color-line-section | 구획 띠 — 목록 묶음 사이 두꺼운 틈 border-t-8 (2026-10-19) | --color-neutral-100 | --color-neutral-900 | |
--color-line-strong | 강한 경계 · 도움말 배지 테두리 | --color-neutral-300 | --color-neutral-300 | |
--color-line-field | 입력칸 · 셀렉트 · 라인 버튼 경계(양 테마 450) | --color-neutral-450 | --color-neutral-450 | |
--color-line-inverse | 반전 면 경계 | --color-neutral-700 | --color-neutral-200 | |
--color-focus-ring | 포커스 링 | --color-blue-500 | --color-blue-400 |
Status
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-status-success | 성공 | --color-green-600 | --color-green-400 | |
--color-status-warning | 경고 | --color-yellow-400 | --color-yellow-400 | |
--color-status-error | 오류 | --color-red-600 | --color-red-400 | |
--color-status-info | 정보 | --color-blue-500 | --color-blue-300 | |
--color-status-success-bg | 성공 틴트 면 | --color-green-50 | green 16% + neutral-800 | |
--color-status-success-fg | 성공 틴트 위 글자 | --color-green-700 | --color-green-200 | |
--color-status-success-border | 성공 틴트 경계 | --color-green-200 | green 40% + neutral-800 | |
--color-status-success-icon | 성공 아이콘 | --color-green-500 | --color-green-400 | |
--color-status-warning-bg | 경고 틴트 면 | --color-yellow-50 | yellow 16% + neutral-800 | |
--color-status-warning-fg | 경고 틴트 위 글자 | --color-yellow-700 | --color-yellow-200 | |
--color-status-warning-border | 경고 틴트 경계 | --color-yellow-200 | yellow 40% + neutral-800 | |
--color-status-warning-icon | 경고 아이콘 | --color-yellow-500 | --color-yellow-400 | |
--color-status-error-bg | 오류 틴트 면 | --color-red-50 | red 16% + neutral-800 | |
--color-status-error-fg | 오류 틴트 위 글자 | --color-red-700 | --color-red-200 | |
--color-status-error-border | 오류 틴트 경계 | --color-red-200 | red 40% + neutral-800 | |
--color-status-error-icon | 오류 아이콘 | --color-red-500 | --color-red-400 | |
--color-status-info-bg | 정보 틴트 면 | --color-blue-50 | blue 16% + neutral-800 | |
--color-status-info-fg | 정보 틴트 위 글자 | --color-blue-700 | --color-blue-200 | |
--color-status-info-border | 정보 틴트 경계 | --color-blue-200 | blue 40% + neutral-800 | |
--color-status-info-icon | 정보 아이콘 | --color-blue-500 | --color-blue-300 |
Static · 정적 흑백
테마가 바뀌어도 그대로여야 하는 값 — 브랜드 · 상태 면 위 흰 글자 등. --ds-bw-white / --ds-bw-black 은 이 둘의 별칭입니다.
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-static-white | 정적 흰색 | #ffffff | (불변) | |
--color-static-black | 정적 검정 | #070707 | (불변) | |
--color-primary-fg | 브랜드 면 위 글자 | --color-static-white | (불변) |
Action · 버튼 역할 (2026-10-13 신설)
버튼 역할 클래스(ds-btn--primary · --primary-soft · --strong · --muted · --tertiary · --normal · --danger)가 읽는 면(기본값) · 글자(-fg) · 경계(-border) 짝입니다. 의미색 솔리드(--color-action-{green,blue,purple,aquablue,yellow})는 테마 불변입니다.
| Swatch | Token | 의미 | 매핑 | 다크 |
|---|---|---|---|---|
--color-action-primary | 주요 채움 | --color-orange-500 | --color-orange-500 | |
--color-action-primary-fg | 주요 글자 | --color-static-white | --color-static-white | |
--color-action-primary-soft | 연한 주요 면(= lightor) | --color-orange-50 | --color-bg-brand-tint | |
--color-action-primary-soft-fg | 연한 주요 글자 | --color-orange-600 | --color-orange-300 | |
--color-action-strong | 중립 강조 채움(= dark) | --color-neutral-900 | --color-neutral-900 | |
--color-action-strong-fg | 중립 강조 글자 | --color-static-white | --color-static-white | |
| — | --color-action-strong-border | 중립 강조 경계(다크에서만 보임) | transparent | --color-neutral-450 |
--color-action-strong-hover | 중립 강조 hover · 체크박스 체크 hover | --color-neutral-800 | --color-neutral-200 | |
--color-action-muted | 회색 채움 | --color-neutral-200 | --color-neutral-600 | |
--color-action-muted-fg | 회색 채움 글자 | --color-neutral-900 | --color-neutral-50 | |
--color-action-assistive | 옅은 회색 채움 | --color-neutral-300 | --color-neutral-500 | |
--color-action-assistive-fg | 옅은 회색 글자 | --color-neutral-900 | --color-neutral-50 | |
--color-action-tertiary | 물러남(= white-bk) | --color-bg-container | --color-bg-container | |
--color-action-tertiary-fg | 물러남 글자 | --color-label-normal | --color-label-normal | |
| — | --color-action-tertiary-border | 물러남 경계(카드 맥락에서만 보임) | transparent | (불변) |
--color-action-outline-fg | 라인 기본 글자 | --color-label-normal | --color-label-normal | |
--color-action-outline-border | 라인 기본 경계 | --color-line-field | --color-line-field | |
--color-action-icon-muted | 아이콘 버튼 muted 잉크 | --color-neutral-500 | --color-neutral-400 | |
--color-action-danger | 위험 채움(= red) | --color-red-600 | --color-red-600 | |
--color-action-danger-fg | 위험 글자 | --color-static-white | --color-static-white | |
--color-action-danger-soft | 연한 위험 면(= lightred) | --color-red-50 | --color-red-900 | |
--color-action-danger-soft-fg | 연한 위험 글자 | --color-red-600 | --color-red-200 | |
--color-action-disabled | 비활성 면 | --color-line-normal | --color-neutral-700 | |
--color-action-disabled-fg | 비활성 글자 | --color-label-disable | --color-neutral-450 | |
--color-action-overlay | hover · focus 오버레이 잉크 | --color-label-muted | --color-neutral-300 | |
--color-action-overlay-strong | pressed 오버레이 잉크 | --color-neutral-900 | --color-neutral-25 | |
--color-action-green | 의미색 솔리드 초록 | --color-green-500 | (불변) | |
--color-action-blue | 의미색 솔리드 파랑 | --color-blue-500 | (불변) | |
--color-action-purple | 의미색 솔리드 보라 | --color-purple-500 | (불변) | |
--color-action-aquablue | 의미색 솔리드 아쿠아 | --color-aquablue-500 | (불변) | |
--color-action-yellow | 의미색 솔리드 노랑(글자 neutral-900) | --color-yellow-300 | (불변) | |
--color-action-green-fg | 의미색 솔리드 초록 글자 | --color-static-white | (불변) | |
--color-action-blue-fg | 의미색 솔리드 파랑 글자 | --color-static-white | (불변) | |
--color-action-purple-fg | 의미색 솔리드 보라 글자 | --color-static-white | (불변) | |
--color-action-aquablue-fg | 의미색 솔리드 아쿠아 글자 | --color-static-white | (불변) | |
--color-action-yellow-fg | 의미색 솔리드 노랑 글자 | --color-neutral-900 | (불변) |
Secondary (보조 family alias)
각 family의 강조용 단계(대부분 500, 단 yellow는 300)를 가리킵니다. 보조 강조 위치에 family 단위로 사용합니다.
| Swatch | Token | 매핑 | 다크 |
|---|---|---|---|
--color-secondary-orange | --color-orange-500 | --color-orange-400 | |
--color-secondary-aquablue | --color-aquablue-500 | --color-aquablue-300 | |
--color-secondary-green | --color-green-500 | --color-green-400 | |
--color-secondary-yellow | --color-yellow-300 | (불변) | |
--color-secondary-purple | --color-purple-500 | --color-purple-300 | |
--color-secondary-purple-bg | --color-purple-50 | 보라 500 을 neutral-800 에 16% 섞은 색 (2026-10-20 신설 — 필수(부서) 대화방 썸네일) | |
--color-secondary-blue | --color-blue-500 | --color-blue-300 | |
--color-secondary-red | --color-red-600 | --color-red-400 |
DS semantic 토큰 (--ds-color-*)
color scale 외 의미 토큰입니다. 2026-10-13 부터 전부 위 시멘틱 토큰의 별칭이라 테마를 따릅니다(하드코딩 hex 없음).
| Swatch | Token | 의미 | 지금 가리키는 것 | 다크 |
|---|---|---|---|---|
--ds-color-text | 본문 텍스트 | --color-label-body | --color-label-body | |
--ds-color-bg | 배경 | --color-bg-normal | --color-bg-normal | |
--ds-color-bg-alt | 대안 배경 | --color-bg-alternative | --color-bg-alternative | |
--ds-color-line | 경계선 | --color-line-normal | --color-line-normal | |
--ds-color-line-strong | 진한 경계선 | --color-line-alternative | --color-line-alternative | |
--ds-color-primary | 브랜드 | --color-primary | --color-primary | |
--ds-color-primary-strong | 브랜드 강조 | --color-primary-strong | --color-primary-strong | |
--ds-color-primary-soft | 브랜드 옅음 | --color-primary-bg | --color-primary-bg | |
--ds-color-focus | 포커스 ring | --color-focus-ring | --color-focus-ring | |
--ds-color-muted | 보조 텍스트 | --color-label-assistive | --color-label-assistive | |
--ds-color-success | 성공 | --color-status-success | --color-status-success | |
--ds-color-danger | 위험 | --color-status-error | --color-status-error |
컴포넌트 변수(--ds-*) — 테마 작업으로 생긴 것
| Token | 라이트 | 다크 | 쓰는 곳 |
|---|---|---|---|
--ds-ink-white-70 | --color-static-white 70% | (불변) | 늘 어두운 면(LNB · 워크스페이스 전환 · *-dark 배지) 위 흰 잉크 — 04 · 08 · 10 · 18 · 30 · 55 · 60 · 70 단계, 테마 불변 |
--ds-tab-inactive-fg | --color-neutral-300 | --color-label-disable | 탭 바 비활성 글자 |
--ds-switch-track | --color-neutral-300 | --color-neutral-600 | 스위치 꺼짐 트랙 |
--ds-switch-track-hover | --color-neutral-400 | --color-neutral-500 | 스위치 꺼짐 트랙 hover |
--ds-switch-knob | --color-static-white | --color-static-white | 스위치 손잡이(불변) |
--ds-fill-soft | #f8f8f8 | --color-neutral-700 | .ds-select--fill-gray 면 |
--ds-cell-focus-bg | #eef4ff | blue 22% + neutral-800 | 시트 셀 포커스 면 |
--ds-textfield-border | --color-line-field | --color-line-field | 입력칸 · 셀렉트 경계 |
--ds-textfield-border-hover | --color-line-strong | --color-line-alternative | 입력칸 hover 경계 |
--ds-textfield-border-focus | --color-line-dark | --color-line-dark | 입력칸 포커스 경계 |
--ds-textfield-placeholder | --color-label-muted | --color-label-muted | 플레이스홀더 |
--ds-dropdown-bg | --color-bg-elevated | --color-bg-elevated | 드롭다운 면 |
--ds-checkbox-glyph-check | url(…) 흰 획 | url(…) 어두운 획 | 체크 글리프(data-URI) |
--ds-checkbox-glyph-mixed | url(…) 흰 획 | url(…) 어두운 획 | 부분 선택(indeterminate) 글리프(data-URI) |
--ds-bottom-nav-capsule-bg | --color-bg-glass 66% | --color-neutral-900 92% | 하단 내비 분리형 캡슐 면(다크에서 화면보다 어둡게, 10-20) |
--ds-bottom-nav-capsule-solid | --ds-bw-white 94% | --color-neutral-900 98% | 「투명도 줄이기」 설정의 불투명 캡슐 |
--ds-bottom-nav-capsule-edge | --ds-glass-55 | --ds-ink-white-10 | 캡슐 안쪽 1px 테두리 |
--ds-bottom-nav-capsule-highlight | --ds-glass-70 | --ds-ink-white-08 | 캡슐 윗면 광택 1px |
--ds-bottom-nav-glow-bg | --color-bg-glass 78% | --color-neutral-700 92% | 선택 탭 유리(캡슐보다 밝게) |
--ds-label-black-bg | --ds-label-black(label-normal) | --color-action-strong | 검정 라벨 칩 면(다크에서 짙은 채움, 10-20) |
--ds-label-black-fg | --ds-label-white | --color-action-strong-fg | 검정 라벨 칩 글자 |
--ds-label-white-bg | --ds-label-white(neutral-25) | --color-bg-elevated(neutral-700) | 흰 라벨 칩 면(다크에서 흰 면이 튀지 않게, 10-20) |
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에서 확인.
단일 출처
모든 색상 토큰의 정의는 한 파일에서 관리합니다.
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>[-<part>] | @theme static | ✅ 테마·맥락 대응(2026-10-13) | 의미별 alias — 코드·디자인 1순위. 테마와 .ds-surface--* 가 이 값만 바꾼다. 짝: action-*-fg · status-*-bg/-fg/-border/-icon. 표: 테마 페이지 → 토큰 표 |
| DS semantic | --ds-color-<role> | :root | 🟡 레거시 별칭(semantic 참조로 전환됨) | 새 코드는 semantic 직접 사용 |
hr-* family | --color-hr-<family>-<N> | @theme | 🔴 legacy | Tailwind 표준 팔레트 호환용 (제거 대상) |
사용 우선순위 (코드 작성 시)
1. Semantic — text-label-normal · bg-bg-container · border-line-normal · .ds-surface--* ·
ds-btn 역할 클래스 · .ds-notice/.ds-label · var(--color-action-primary)+-fg
2. DS α / 그림자 — var(--ds-dim-40), var(--ds-glass-08), var(--ds-shadow-md)
3. Primitive — var(--color-orange-500) · bg-orange-500 (테마 불변이어야 하는 그래픽·차트·BI 에만)
4. (동결) hr-* — var(--color-hr-blue-500) ← legacy · 테마 미적용
5. (금지) 신규 hex — #4a90e2 ← 디자이너 확인 후 등록※ 2026-10-13 부터 코드 작성 기준도 시멘틱 1순위다(CLAUDE.md 「Design System」과 동일). 원시 팔레트 유틸(
bg-orange-500·text-neutral-900)은 테마를 모르므로 글자·면·경계에 새로 쓰지 않는다 — 기존 것은 파일을 건드릴 때만 이관. 자세한 규칙과 라이트·다크 비교: 라이트 · 다크 테마와 표면 맥락.
정리 대기 중인 색상 (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-panel.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