SYS / Design System
v…디자인 시스템
이 페이지에 값 사본은 없다. 견본은 전부 토큰으로 칠해지고, 보이는 수치는 지금 이 화면의 토큰에서 읽은 것이다 — 토큰이 바뀌면 이 페이지도 함께 바뀐다.
- --color-highlight주강조 (브랜드) — 살아있는 것에만
- --color-accent-dim딥 액센트 · ::selection
- --color-accent밝은 중립 강조
- --color-space캔버스 (최하단 배경)
- --color-void기본 배경
- --color-surface카드 표면 · 항목 hover 배경
- --color-surface-alt보조 표면
- --color-danger부정 · 하락 · 경고
Text
- --color-text-primary본문 기본
- --color-text-reading장문 본문(MDX) 전용
- --color-text-secondary본문 보조
- --color-text-muted약화 — 마이크로 라벨
단계마다 역할이 고정된다 — 값이 아니라 역할로 고른다. 3과 3′은 값이 같고 역할이 다르다: hover 강도를 조정해도 세퍼레이터가 딸려 움직이지 않기 위해서다.
- --color-border1 · 기본 보더 · 구분선
- --color-border-strong2 · 정적 강조선 — 표 th · 밑줄
- --color-border-hover3 · hover 에서만
- --color-mark-inert3′ · 정적 비활성 마크 — · 도트 · 스크롤바
space
void
surface
surface-alt
자간은 태그가 정한다 — 큰 글자일수록 더 조인다. 제목에 tracking 유틸을 덧대지 않는다.
- 해결의 항로를 그립니다h1 ·
- 해결의 항로를 그립니다h2 ·
- 해결의 항로를 그립니다h3 ·
- 해결의 항로를 그립니다h4–h6 ·
--radius-mark
계기 마크 — 도트 · 트랙 · 포커스 링
--radius-surface
기본 표면 — 카드 · 칩 · 버튼 · 입력
--radius-floating
떠 있는 것 — 챗 패널 · 말풍선
rounded-full
램프 밖 — 반경이 아니라 형태
운항 중1단계(2px)가 상태 도트의 각진 HUD 문법을 지킨다 — 4px 면 거의 원이 된다.
구분은 속도가 아니라 목적이다. productive 는 “UI 가 반응했다”는 신호라 눈에 띄지 않아야 하고, expressive 는 시선을 옮기는 연출이라 보여야 한다.
행에 올리면 실제 속도로 움직인다
- fastprod
- productiveprod
- deliberateprod
- expressiveexp
- cinematicexp
항목 단위로 클릭하는 요소는 사이트 전체가 한 문법을 쓴다: 표면이 밝아지고, 좌측 민트 바가 자라나고, 키보드 포커스가 같은 반응을 얻는다. 아래는 장식이 아니라 실물이다 — Tab 으로도 켜진다.
견본 항목 — 올리거나 포커스해 보세요민트는 상호작용이라는 살아있는 상태라서 켜진다- 01색·간격·폰트는 토큰을 통해서만. 하드코드 hex 금지.
- 02토큰 이름은 불변(API). 값만 바꾼다.
- 03토큰 변경 시 버전 갱신 + Changelog — 빌드 게이트가 강제한다.
- 04라이트 테마는 없다. Dark Mode First.
- 05민트는 “살아있는 것”에만 — 활성·라이브·상호작용·진행.
- 06hover 토큰은 hover 에서만. 정적 요소는 자기 단계를 쓴다.
- 07죽은 토큰을 두지 않는다 — 정의만 되고 안 쓰면 빌드가 실패한다.
- 08페이지 셸을 손으로 짜지 않는다 — <Center> 가 정한다.
규칙의 근거·이력·전체 레퍼런스는 repo 의 DESIGN-SYSTEM.md 가 단일 소스다. 정합은 빌드 게이트가 강제한다.