화면에서는 이 이름을 씁니다. 프리미티브를 가리키므로 팔레트를 바꾸면 전부 따라옵니다.
| 토큰 | CSS 변수 | 가리키는 값 | 적용 범위 | 용도 |
|---|
| surface/0 | var(--surface-0) | white #ffffff | FRAME_FILL, SHAPE_FILL | 카드 · 모달 · 입력 필드 바탕 |
| surface/1 | var(--surface-1) | slate/50 #f8fafc | FRAME_FILL, SHAPE_FILL | 페이지 바탕 · 행 호버 · 보조 패널 |
| surface/2 | var(--surface-2) | slate/100 #f1f5f9 | FRAME_FILL, SHAPE_FILL | 막대 트랙 · 중립 배지 바탕 |
| border/base | var(--border-base) | slate/200 #e2e8f0 | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | 카드 · 입력 테두리(기본), 구분선 |
| border/strong | var(--border-strong) | slate/300 #cbd5e1 | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | 진한 테두리 · 비활성 체크 |
| border/inner | var(--border-inner) | slate/100 #f1f5f9 | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | 표 행 · 카드 헤더 아래 옅은 구분선 |
| text/primary | var(--text-primary) | slate/900 #0f172a | TEXT_FILL | 제목 · 강조 수치 |
| text/body | var(--text-body) | slate/700 #334155 | TEXT_FILL | 표 셀 값 · 게이지 라벨 |
| text/tertiary | var(--text-tertiary) | slate/600 #475569 | TEXT_FILL | 사이드바 버전 문자열 등 |
| text/secondary | var(--text-secondary) | slate/500 #64748b | TEXT_FILL | 본문 보조 · 설명문 |
| text/muted | var(--text-muted) | slate/400 #94a3b8 | TEXT_FILL | 캡션 · 라벨 · 플레이스홀더급 보조 텍스트 |
| text/inverse | var(--text-inverse) | white #ffffff | TEXT_FILL | 진한 바탕 위 글자 |
| brand/50 | var(--brand-50) | blue/50 #eff6ff | FRAME_FILL, SHAPE_FILL | 선택 배경 · 아바타 바탕 |
| brand/100 | var(--brand-100) | blue/100 #dbeafe | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | 섹션 테두리 · 라벨형 배지 |
| brand/300 | var(--brand-300) | blue/300 #93c5fd | SHAPE_FILL, TEXT_FILL | 옅은 강조 |
| brand/400 | var(--brand-400) | blue/400 #60a5fa | TEXT_FILL | 진한 바탕 위 링크 |
| brand/500 | var(--brand-500) | blue/500 #2563eb | FRAME_FILL, SHAPE_FILL, TEXT_FILL, STROKE_COLOR | 기본 액션 · 링크 · 활성 · 포커스 · 데이터 채움 |
| brand/600 | var(--brand-600) | blue/700 #1d4ed8 | FRAME_FILL, SHAPE_FILL, TEXT_FILL | 호버 · 배지 위 텍스트 |
| brand/900 | var(--brand-900) | blue/900 #1e3a8a | FRAME_FILL, SHAPE_FILL | 사이드바 활성 항목 · 사용자 아바타 |
| brand/disabled | var(--brand-disabled) | blue/soft #93b4f5 | FRAME_FILL, SHAPE_FILL | 비활성 기본 버튼 |
| sidebar/bg | var(--sidebar-bg) | slate/900 #0f172a | FRAME_FILL, SHAPE_FILL | 사이드바 바탕 |
| sidebar/raised | var(--sidebar-raised) | slate/800 #1e293b | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | 사이드바 호버 · 셀렉트 · 크레딧 박스 |
| sidebar/text | var(--sidebar-text) | slate/200 #e2e8f0 | TEXT_FILL | 사이드바 글자 |
| sidebar/link | var(--sidebar-link) | slate/300 #cbd5e1 | TEXT_FILL | 사이드바 링크 |
| sidebar/active | var(--sidebar-active) | blue/900 #1e3a8a | FRAME_FILL, SHAPE_FILL | 사이드바 활성 항목 바탕 |
| status/success-bg | var(--status-success-bg) | green/100 #dcfce7 | FRAME_FILL, SHAPE_FILL | 유지중 배지 · 저장 완료 알림 |
| status/success-fg | var(--status-success-fg) | green/700 #15803d | TEXT_FILL | 성공 글자 |
| status/success-icon | var(--status-success-icon) | green/600 #16a34a | FRAME_FILL, SHAPE_FILL | 언급됨 점 · 성공 아이콘 |
| status/success-surface | var(--status-success-surface) | green/50 #f0fdf4 | FRAME_FILL, SHAPE_FILL | 성공 안내 박스 바탕 |
| status/success-border | var(--status-success-border) | green/200 #bbf7d0 | STROKE_COLOR | 성공 안내 박스 테두리 |
| status/warning-bg | var(--status-warning-bg) | amber/100 #fef3c7 | FRAME_FILL, SHAPE_FILL | 보류중 배지 |
| status/warning-fg | var(--status-warning-fg) | amber/700 #b45309 | TEXT_FILL | 주의 글자 |
| status/warning-border | var(--status-warning-border) | amber/200 #fde68a | STROKE_COLOR | 주의 박스 테두리 |
| status/danger-bg | var(--status-danger-bg) | red/50 #fef2f2 | FRAME_FILL, SHAPE_FILL | 삭제 버튼 호버 · 오류 박스 |
| status/danger-fg | var(--status-danger-fg) | red/600 #dc2626 | TEXT_FILL | 삭제 · 오류 글자 |
| status/danger-icon | var(--status-danger-icon) | red/600 #dc2626 | FRAME_FILL, SHAPE_FILL | 미언급 점 · 오류 아이콘 |
| status/danger-border | var(--status-danger-border) | red/200 #fecaca | STROKE_COLOR | 삭제 버튼 테두리 |
| status/danger-strong | var(--status-danger-strong) | red/700 #b91c1c | TEXT_FILL | 진한 오류 글자 |
| status/info-bg | var(--status-info-bg) | amber/50 #fffbeb | FRAME_FILL, SHAPE_FILL | 안내 박스(메일이 오지 않았다면) |
| status/info-fg | var(--status-info-fg) | amber/600 #a16207 | TEXT_FILL | 안내 글자 |
| status/info-border | var(--status-info-border) | amber/200 #fde68a | STROKE_COLOR | 안내 박스 테두리 |
| state/error-border | var(--state-error-border) | red/400 #f87171 | STROKE_COLOR | 입력 오류 테두리 |
| state/selected-border | var(--state-selected-border) | blue/200 #bfdbfe | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | 선택된 항목 테두리(AI 자동 제안 카드) |
| platform/gpt | var(--platform-gpt) | platform/gpt #10a37f | FRAME_FILL, SHAPE_FILL | ChatGPT 막대 |
| platform/gemini | var(--platform-gemini) | platform/gemini #6366f1 | FRAME_FILL, SHAPE_FILL | Gemini 막대 |
| platform/perplexity | var(--platform-perplexity) | platform/perplexity #0d9488 | FRAME_FILL, SHAPE_FILL | Perplexity 막대 |
| platform/copilot | var(--platform-copilot) | platform/copilot #0ea5e9 | FRAME_FILL, SHAPE_FILL | Copilot 막대 |