이 페이지는 “예쁜 샘플”이 아니라 토큰 전달 경로가 살아 있는가를 확인한다.
중앙 원본은 themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/ 이다.
이 페이지는 그 값이 실제 UI 레이어로 내려오는지를 본다.
확인 순서
- 토큰 파일이 존재하는지 본다.
- CSS 변수 이름이 컴포넌트에서 그대로 소비되는지 본다.
- 카드, 버튼, 링크, 배경, 그림자 톤이 같은 계열인지 본다.
- light / dark를 바꾸지 않더라도 변수 계층이 분리되어 있는지 본다.
- focus, hover, disabled, motion 같은 상태값이 누락되지 않았는지 본다.
< design-probe >}
토큰 계층을 볼 때 체크할 항목
| 축 | 확인 대상 | 프런트엔드에서 봐야 하는 것 |
|---|---|---|
| Layout | width, padding, gap | 페이지 폭과 콘텐츠 폭이 달라지지 않는가 |
| Typography | font stack, size, weight | 제목과 본문이 다른 언어에서도 안정적인가 |
| Shape | radius, border, shadow | 카드와 버튼이 같은 모서리 언어를 쓰는가 |
| Color | surface, text, border, accent | 명도와 대비가 섹션마다 튀지 않는가 |
| Motion | transition, focus ring | hover/focus 상태가 과장되지 않는가 |
| Components | CTA, chip, control | 컴포넌트가 중앙 토큰을 재사용하는가 |
| Accessibility | contrast, keyboard focus | 키보드만으로도 상태가 보이는가 |
원문 코드
:root {
--radius-md: 0.75rem; /* 카드와 버튼의 공통 반경 */
--space-lg: 1.5rem; /* 본문 안쪽 기본 여백 */
--accent: hsl(220 90% 56%);
--surface-elevated: hsl(0 0% 100%);
--border: hsl(220 13% 88%);
}
<button class="button button--primary">Primary 버튼</button>
추가로 확인할 항목
- 모바일에서 토큰 값이 너무 촘촘해지지 않는가
- dark mode에서 텍스트 대비가 충분한가
- 고대비 환경에서 border와 background가 분리되는가
- 숫자형 값이 컴포넌트마다 따로 놀지 않는가
합격 기준
- 토큰 이름이 바뀌어도 디자인 방향은 유지된다.
- 하나의 값을 고치면 관련 컴포넌트가 함께 따라온다.
- 각 페이지가 제각제각 보이지 않고 하나의 시스템처럼 보인다.