이 페이지는 색을 설명하는 글이 아니라 색이 화면에서 어떻게 보이는지를 보는 곳이다.
- 라이트/다크 모두 같은 변수 축을 쓴다.
- 상태 색은 경고 문구와 버튼, 배지, 알림에서 동일한 규칙으로 읽힌다.
- 표면 색은 배경, 카드, quiet 영역, elevated 영역에서 명도 차이만 다르게 쓰인다.
브랜드
중립 표면
시맨틱 상태
효과
스크롤바
라이트와 다크 원본 비교
| 계열 | 라이트 값 | 다크 값 |
|---|---|---|
--color-brand-primary |
rgb(184, 58, 32) |
rgb(255, 176, 138) |
--color-brand-secondary |
rgb(214, 94, 29) |
rgb(255, 196, 160) |
--color-neutral-page-background |
rgb(255, 248, 243) |
rgb(22, 16, 14) |
--color-neutral-surface |
rgb(255, 255, 255) |
rgb(34, 27, 25) |
--color-semantic-success |
rgb(34, 149, 62) |
rgb(90, 198, 116) |
--color-semantic-warning |
rgb(207, 131, 0) |
rgb(238, 181, 54) |
--color-semantic-danger |
rgb(208, 53, 53) |
rgb(255, 124, 124) |
--color-semantic-info |
rgb(0, 119, 204) |
rgb(109, 183, 255) |
확인 포인트
- 본문 배경과 카드 표면이 같은 톤으로 뭉개지지 않는가
- 브랜드색이 링크, CTA, 강조선에 공통으로 연결되는가
- semantic 색이 경고 문구와 상태 배지에서 일관되게 쓰이는가
- 효과 색이 overlay/scrim/tooltip에서 과하게 튀지 않는가