색상은 문자열보다 실제 표면과 대비로 봐야 한다.
라이트/다크 모드를 바꾸었을 때 읽기성이 유지되는지, 카드와 배경의 관계가 무너지지 않는지를 확인한다.
라이트 / 다크에서 같은 이름이 다른 값이 되는가
--color-brand-primary계열이 CTA와 링크에 같은 역할을 하는가--surface,--surface-elevated,--surface-quiet의 계층이 유지되는가--border와--border-strong이 배경에서 적당한 구분을 만드는가- 코드 배경과 툴팁 배경이 본문과 분리되는가
실제 색상 보드
{color_swatches}
체크 포인트
| 항목 | 보는 방식 | 프런트엔드에서 확인할 것 |
|---|---|---|
| 브랜드 | 배경과 텍스트 대비 | Primary / Secondary가 각각 역할을 분리하는가 |
| 표면 | 카드와 본문 | 얕은 표면, 올라온 표면, 조용한 표면이 구분되는가 |
| 코드 | 인라인과 블록 | 코드 영역의 배경과 글자색이 읽기 좋은가 |
| 효과 | 그라데이션 / 툴팁 | 보조 효과가 과하지 않고 안내만 하는가 |
운영 메모
디자인 값은 콘텐츠 안에서 임시로 덮어쓰지 않는다.
색상도 결국 중앙 토큰으로 해결해야 하고, 이 페이지는 그 결과를 가장 먼저 확인하는 화면이다.