Color
화면에서는 Semantic 토큰만 써요. 차가운 회색을 바탕으로 쓰고, 행동을 유도하는 곳에만 코발트를 써요. 모든 토큰은 Light와 Dark 값을 함께 가져요.
바탕
높낮이는 그림자 대신 바탕 단계(canvas → surface → subtle)와 1px 테두리로 구분해요.
color/bg/canvas페이지 바탕- Light
- gray/50 #F4F6F8
- Dark
- gray/950 #0E1216
color/bg/surfaceCard, Dialog, Input 바탕- Light
- gray/0 #FFFFFF
- Dark
- gray/900 #161B21
color/bg/subtlehover 바탕, 진행 막대 트랙, Avatar 바탕- Light
- gray/100 #E6EAEE
- Dark
- gray/800 #1E252D
color/bg/primaryprimary 버튼, 진행 막대- Light
- cobalt/600 #2340D0
- Dark
- cobalt/400 #6E86FF
color/bg/primary-hoverprimary hover- Light
- cobalt/700 #1B33AE
- Dark
- cobalt/300 #8C9FFF
color/bg/selectedDataGrid 선택된 행 (hover bg/subtle과 구분)- Light
- cobalt/50 #EEF1FF
- Dark
- cobalt/950 #18214D
color/bg/scrim-subtleDataGrid 다시 불러오는 중, 이전 행 위의 연한 막- Light
- gray/0 60%
- Dark
- gray/900 60%
color/bg/inverseTooltip, neutral Badge(solid)- Light
- gray/950
- Dark
- gray/100
color/bg/overlayDialog backdrop- Light
- gray/scrim 50%
- Dark
- gray/scrim 50%
글자
본문은 default, 보조 설명은 muted예요. 색이 있는 바탕 위에는 on-* 토큰을 써요.
color/text/default본문, 제목- Light
- gray/950
- Dark
- gray/100
color/text/muted보조 설명, caption- Light
- gray/600 #5B6672
- Dark
- gray/400 #8D99A6
color/text/on-primaryprimary 바탕 위 글자- Light
- gray/0
- Dark
- gray/950
color/text/inverseinverse 바탕 위 글자- Light
- gray/0
- Dark
- gray/950
테두리
모든 테두리는 1px(stroke/default)이에요. 포커스 링만 2px, 간격 2px이에요.
color/border/default기본 테두리, 구분선- Light
- gray/200 #D5DBE1
- Dark
- gray/700 #2A323B
color/border/stronghover 테두리- Light
- gray/400
- Dark
- gray/600
color/border/focus포커스 링- Light
- cobalt/600
- Dark
- cobalt/400
상태
성공, 주의, 위험은 바탕(solid·subtle), 글자, 테두리를 한 벌로 써요. 상태 색은 상태를 알릴 때만 써요.
color/bg/successsuccess Badge(solid)- Light
- green/600 #16804F
- Dark
- green/400 #3DB882
color/bg/success-subtlesuccess Badge(subtle)- Light
- green/50 #EAF7F0
- Dark
- green/950 #0B2218
color/text/success성공 문구, 아이콘- Light
- green/700 #0F6640
- Dark
- green/300 #6BD1A0
color/text/on-successsuccess 바탕 위 글자- Light
- gray/0
- Dark
- gray/950
color/border/success성공 강조 테두리- Light
- green/600
- Dark
- green/400
color/bg/warningwarning Badge(solid)- Light
- amber/400 #E3A43A
- Dark
- amber/400
color/bg/warning-subtlewarning Badge(subtle)- Light
- amber/50 #FCF5E6
- Dark
- amber/950 #24190A
color/text/warning주의 문구, 아이콘- Light
- amber/700 #85520A
- Dark
- amber/300 #EEC46A
color/text/on-warningwarning 바탕 위 글자 (amber 위 흰 글자는 대비 부족)- Light
- gray/950
- Dark
- gray/950
color/border/warning주의 강조 테두리- Light
- amber/600
- Dark
- amber/400
color/bg/danger삭제처럼 되돌릴 수 없는 동작- Light
- red/600 #C8312B
- Dark
- red/400 #F06A5F
color/bg/danger-subtledanger Badge(subtle)- Light
- red/50 #FCEDEC
- Dark
- red/950 #2B1311
color/text/danger에러 메시지- Light
- red/600
- Dark
- red/400
color/text/on-dangerdanger 바탕 위 글자- Light
- gray/0
- Dark
- gray/950
color/border/danger에러 상태 Input- Light
- red/600
- Dark
- red/400
대비
글자와 바탕 조합은 모두 WCAG 4.5:1 이상이에요. 토큰을 바꾸면 배포 전에 다시 확인해요.
bash
npm run check:contrast