이 페이지는 버튼처럼 생긴 것, 카드처럼 생긴 것, 배지처럼 생긴 것이 같은 토큰 체계를 따르는지 확인한다.

화면에서 봐야 할 것

  • 카드 배경과 테두리의 강도
  • hover 시 그림자와 링크 영역의 일관성
  • 작은 배지와 본문 텍스트 사이의 대비
  • 페이지 허브, 아카이브 카드, 섹션 카드가 같은 톤을 쓰는지

카드 샘플

Primary card

중요한 안내

본문과 카드가 분리되지만 과하게 떠 보이지 않아야 한다.

Elevated card

보조 정보

상승된 표면은 목록 속에서 우선순위를 만든다.

Quiet card

가벼운 참고

조용한 표면은 본문 흐름을 덜 방해해야 한다.

CTA와 버튼 성격의 컨트롤

기본 우선순위 버튼
}

복사
}

다음 섹션으로 이동
}

체크 포인트 표

요소 확인 질문 보기 좋은 상태
카드 내용이 길어져도 높이가 불규칙하지 않은가 동일 폭 카드가 같은 리듬을 유지
버튼 primary/secondary/utility가 구분되는가 우선순위가 색과 밀도로 보임
배지 작은 텍스트가 너무 튀지 않는가 보조 정보는 살짝 낮은 톤
표면 shadow와 border가 함께 작동하는가 카드가 배경에서 적당히 떠 보임

운영 메모

여기서 중요한 것은 “예쁘다"가 아니라 같은 시스템인가다.
카드와 컨트롤이 서로 닮아 있으면 이후 새로운 컴포넌트를 추가할 때도 규칙이 흔들리지 않는다.