이 페이지는 단순 팔레트가 아니라 역할이 맞는가를 확인한다.
본문에서 확인할 것
- 브랜드 색이 링크와 CTA에서 같은 역할을 하는가
- neutral surface가 카드, 배경, 코드 블록에 일관되게 쓰이는가
- success / warning / danger / info 상태가 너무 튀지 않는가
- 그림자가 페이지마다 다른 인상으로 분리되지 않는가
- dark mode에서 색이 번지거나 눌려 보이지 않는가
.card {
background: var(--surface-elevated);
border: var(--border-width-thin) solid var(--border);
box-shadow: var(--shadow-sm);
}
.link {
color: var(--accent);
}
실패 징후
| 항목 | 실패 징후 |
|---|---|
| 링크 | 본문 링크와 버튼 색이 서로 다른 브랜드처럼 보인다 |
| 배경 | 섹션마다 표면 톤이 들쭉날쭉하다 |
| 그림자 | 카드가 버튼보다 더 강하게 떠 보인다 |
| 상태색 | 경고/실패가 과도하게 공격적으로 보인다 |
| 포커스 | keyboard focus가 배경에 묻힌다 |