색상과 테마
작성 중다크·라이트 모드, 강조색, 상태색
브랜드 색
tokens/primitive/brand.json — 브랜드가 정해지면 이 11개 값만 교체합니다.
50
100
200
300
400
500
600
700
800
900
950
의미 색
화면과 컴포넌트는 이 이름만 씁니다. 오른쪽 위에서 색 모드·크기 모드를 바꾸면 이 화면의 견본도 함께 바뀝니다.
기본 글자보조 글자흐린 글자강조성공경고오류정보
| 토큰 | 다크 (기본) | 라이트 | 설명 |
|---|---|---|---|
surface.canvas--ds-surface-canvas | #111214 {neutral.950} | #ffffff {neutral.0} | |
surface.sidebar--ds-surface-sidebar | #17181b {neutral.850} | #f6f6f8 {neutral.100} | |
surface.panel--ds-surface-panel | #151619 {neutral.900} | #fafafb {neutral.50} | |
surface.raised--ds-surface-raised | #202126 {neutral.825} | #eeeef2 {neutral.150} | |
surface.hover--ds-surface-hover | #24252b {neutral.800} | #e9e9ed {neutral.200} | |
surface.scrim--ds-surface-scrim | #111214 {neutral.950} | #111214 {neutral.950} | 대화상자 뒤를 덮는 막. 불투명도는 쓰는 곳에서 준다 |
text.primary--ds-text-primary | #e9e9ed {neutral.200} | #24252b {neutral.800} | |
text.secondary--ds-text-secondary | #999ba5 {neutral.400} | #5a5c66 {neutral.600} | |
text.muted--ds-text-muted | #818794 {neutral.450} | #6b6d78 {neutral.500} | |
border.default--ds-border-default | #292b31 {neutral.750} | #e3e3e8 {neutral.250} | |
border.strong--ds-border-strong | #3a3c44 {neutral.700} | #c9cad2 {neutral.300} | |
accent.default--ds-accent-default | #8b8df8 {brand.400} | #625bdd {brand.600} | 링크·아이콘·포커스 링 |
accent.solid--ds-accent-solid | #625bdd {brand.600} | #625bdd {brand.600} | 주요 버튼 배경 |
accent.on-solid--ds-accent-on-solid | #ffffff {neutral.0} | #ffffff {neutral.0} | |
accent.subtle--ds-accent-subtle | #232048 {brand.950} | #f1f0fe {brand.50} | 선택된 행 배경 |
status.success--ds-status-success | #68b597 {green.400} | #237a58 {green.600} | |
status.warning--ds-status-warning | #d5b56a {yellow.400} | #8a6508 {yellow.600} | |
status.danger--ds-status-danger | #ee7f86 {red.400} | #c53a46 {red.600} | |
status.info--ds-status-info | #75a8ef {blue.400} | #2f6bc9 {blue.600} | |
chart.1--ds-chart-1 | #8b8df8 {brand.400} | #625bdd {brand.600} | 차트 첫째 계열 |
chart.2--ds-chart-2 | #75a8ef {blue.400} | #2f6bc9 {blue.600} | |
chart.3--ds-chart-3 | #68b597 {green.400} | #237a58 {green.600} | |
chart.4--ds-chart-4 | #d5b56a {yellow.400} | #8a6508 {yellow.600} | |
chart.5--ds-chart-5 | #ee7f86 {red.400} | #c53a46 {red.600} | |
syntax.foreground--ds-syntax-foreground | #e9e9ed {neutral.200} | #24252b {neutral.800} | 코드 강조(Code Block). Shiki CSS 변수 테마가 --ds-syntax-*를 읽는다 |
syntax.token-keyword--ds-syntax-token-keyword | #8b8df8 {brand.400} | #625bdd {brand.600} | |
syntax.token-string--ds-syntax-token-string | #68b597 {green.400} | #237a58 {green.600} | |
syntax.token-string-expression--ds-syntax-token-string-expression | #68b597 {green.400} | #237a58 {green.600} | |
syntax.token-comment--ds-syntax-token-comment | #818794 {neutral.450} | #6b6d78 {neutral.500} | |
syntax.token-function--ds-syntax-token-function | #75a8ef {blue.400} | #2f6bc9 {blue.600} | |
syntax.token-constant--ds-syntax-token-constant | #d5b56a {yellow.400} | #8a6508 {yellow.600} | |
syntax.token-parameter--ds-syntax-token-parameter | #ee7f86 {red.400} | #c53a46 {red.600} | |
syntax.token-punctuation--ds-syntax-token-punctuation | #999ba5 {neutral.400} | #5a5c66 {neutral.600} | |
syntax.token-link--ds-syntax-token-link | #75a8ef {blue.400} | #2f6bc9 {blue.600} |
명도 대비
npm run tokens:check가 다크·라이트 28개 조합을 검사하며, 4.5:1 미만이면 빌드가 실패합니다.