• --color-highlight브랜드 강조 — 글자·점·막대·포커스 링
• --color-highlight-fill브랜드 면 — 채운 주 버튼
• --color-on-highlight브랜드 면 위의 글자
• --color-accent밝은 중립 강조 — 인라인 코드
• --color-accent-dim선택 영역(::selection)
• --color-danger부정 · 하락 · 경고

• --color-space캔버스 (페이지 바탕)
• --color-void기본 배경 — 푸터
• --color-surface카드 · 칩 · 항목 hover
• --color-surface-alt카드 hover · 보조 표면

• 가나 Aa--color-text-primary제목 · 본문 기본
• 가나 Aa--color-text-reading장문 본문(MDX)
• 가나 Aa--color-text-secondary보조 — 요약 · 설명
• 가나 Aa--color-text-muted약화 — 날짜 · 메타

단계마다 역할이 고정된다 — 값이 아니라 역할로 고른다. v2 는 면으로 구획을 만들어 선을 거의 쓰지 않는다.

• --color-border1 · 기본 구분선
• --color-border-strong2 · 정적 강조선 — 표 머리
• --color-mark-inert3 · 정적 비활성 마크 — · 세퍼레이터

위계는 굵기(700)로 세운다. 크기는 태그가 정하고 화면 폭에 따라 자란다 — 모바일 ↔ 데스크톱.

• 문제를 정의하고

  h1 ·

• 포트폴리오

  h2 ·

• 케이스 스터디 제목

  h3 ·

productive 는 “UI 가 반응했다”는 신호라 눈에 띄지 않아야 하고, expressive 는 시선을 옮기는 연출이라 보여야 한다. 행에 올리면 실제 속도로 움직인다.

• fast · prod
• productive · prod
• deliberate · prod
• expressive · exp
• cinematic · exp

아래는 장식이 아니라 사이트가 쓰는 실물이다 — 올리거나 Tab 으로 포커스하면 실제로 반응한다.

1. 1색·간격·폰트는 토큰을 통해서만. 하드코드 hex 금지.
2. 2토큰 이름은 불변(API). 값만 바꾼다.
3. 3토큰 변경 시 버전 갱신 + Changelog — 빌드 게이트가 강제한다.
4. 4라이트·다크 두 테마. 색 토큰은 둘 다 값을 가져야 한다.
5. 5위계는 굵기로. 정보를 담는 글자는 13px 아래로 내리지 않는다.
6. 6hover 는 선이 아니라 면으로 — 표면이 한 단계 짙어진다.
7. 7죽은 토큰을 두지 않는다 — 정의만 되고 안 쓰면 빌드가 실패한다.
8. 8페이지 셸을 손으로 짜지 않는다 — <Center> 가 정한다.
9. 9버튼은 누르면 커지고(104·106%), 카드·행은 살짝 작아진다(98·99%) — 애플의 구분. 모션 줄이기에선 크기가 변하지 않는다.
10. 10민트는 행동·결과·지금을 가리킨다 — 누를 것·이룬 수치·활성 상태·진행 막대·초점. 큰 면엔 깔지 않는다.
11. 11NEW 는 작성 후 14일 — 글 카드·메뉴 점·접힌 연재 헤더가 같은 기준을 쓴다. 연재는 펼치면 카드가, 접으면 헤더가 단다.
12. 12유리는 콘텐츠 위에 떠 있는 층에만. 투명한 유리(clear) 위 글자는 primary 만.
13. 13등장 모션은 서버 마크업에 숨김을 넣지 않는다 — 첫 화면·모션 줄이기에서 콘텐츠가 숨지 않게.

규칙의 근거·이력·전체 레퍼런스는 repo 의 DESIGN-SYSTEM.md 가 단일 소스다. 정합은 빌드 게이트가 강제한다.