이 페이지는 색상 토큰이 실제 표면 위에서 어떻게 보이는지 확인한다.

브랜드와 중립

의미 색

토큰 역할 확인 포인트
--color-semantic-success 완료/정상 성공 배지나 확인 메시지에서 너무 가볍지 않은가
--color-semantic-warning 주의 주의 정보가 경고처럼 과하게 보이지 않는가
--color-semantic-danger 실패/위험 오류 상태만 분명히 강조되는가
--color-semantic-info 정보 정보형 블록이 경고와 섞이지 않는가
--color-semantic-focus-ring 포커스 키보드 포커스가 배경에 묻히지 않는가

다크 모드 확인

브랜드 적용 예시

  • 링크는 보통 본문보다 눈에 먼저 들어와야 한다.
  • 카드의 배경은 본문 배경과 한 단계만 다르게 유지한다.
  • 강조색은 여러 개보다 하나의 브랜드 톤으로 모으는 편이 좋다.

{cta(“related”, ref="../layout-spacing/", label=“레이아웃과 간격 보기”)}