Foundations
Color (색)
정본은 브랜드 상수 문서에서 파생된 토큰이다. 원시 램프(Primitive)에서 역할(Semantic)로, 역할에서 컴포넌트로 흐른다 — 화면 코드는 역할·컴포넌트 토큰만 쓴다.
60-30-10 절제 — 60% 무채(화이트·연그레이, 본문은 딥그레이) · 30% 네이비(표지·표 헤더·다크 면) · 10% 청록·라임·옐로(시선 유도 지점에만).
브랜드 역할
| 역할 | 토큰 | 라이트 | 다크 |
|---|
| 메인(청록) | --color-brand-primary | #069CBB | #38B4CA |
| 액센트(라임) | --color-brand-accent | #CADA1F | #CADA1F |
| 시그니처(옐로) | --color-brand-signature | #FFD200 | #FFD200 |
| 앵커(네이비) | --color-brand-anchor | #16303D | #0F2530 |
텍스트 · 배경 역할
| 역할 | 토큰 | 라이트 | 다크 |
|---|
| 텍스트 heading | --color-text-heading | #0F172A | #FFFFFF |
| 텍스트 primary | --color-text-primary | #1A2227 | #EAF1F2 |
| 텍스트 secondary | --color-text-secondary | #3C4A52 | #B9CCD2 |
| 텍스트 muted | --color-text-muted | #6B7780 | #8FA8B0 |
| 텍스트 link | --color-text-link | #0B6C7D | #7FD2DF |
| 배경 canvas | --color-bg-canvas | #FFFFFF | #16303D |
| 배경 subtle | --color-bg-subtle | #F6F8F8 | #122631 |
상태색 (색 + 텍스트/아이콘 병행 — 색만으로 의미 전달 금지)
| 상태 | solid | bg | fg |
|---|
| info | --color-state-info-solid | --color-state-info-bg | --color-state-info-fg |
| success | --color-state-success-solid | --color-state-success-bg | --color-state-success-fg |
| warning | --color-state-warning-solid | --color-state-warning-bg | --color-state-warning-fg |
| danger | --color-state-danger-solid | --color-state-danger-bg | --color-state-danger-fg |
원시 램프 (직접 쓰지 말 것 — 역할 토큰을 거친다)
teal
navy
lime
yellow
gray
