1. 토큰 — 3계층ref(원시) → sys(역할) → comp(부품). 화면은 sys·comp만 쓴다
① ref — 원시 팔레트이름이 값을 설명한다. 화면에서 직접 쓰지 않는다
gray-0
100
150
250
350
500
600
700
800
900
blue-500
600
green
red
orange
② sys — 역할 + 짝(on)채움색 위에는 짝지어진 on- 색만 올린다
primary / on-primary
primary-container
secondary
success-container
danger-container
warning-container
inverse
surface
container
fill
on-surface
-2
-3
muted
faint
outline
③ comp — 부품별이 층을 화면 범위에서 덮으면 그 부품 하나만 바뀐다
기본값
--btn-soft-danger-* 3개만 덮음
--primary 하나만 덮음 (전부 따라옴)
예약
간격 (역할별)담는 쪽만 쓴다
모서리card 16 · btn 14 · md 10 · sm 8 · xs 6 · pill
16
14
10
8
6
pill
2. 텍스트역할 3 × 크기 3 — 색은 따로 고른다
title-l 21/800 — 화면 제목
title-m 17/800 — 시트·달력 제목
title-s 15/800 — 카드 머리 제목
body-l 15/500 — 본문·강조 라벨
body-m 14/500 — 행 라벨(기본)
body-s 12.5/400 — 부연 설명
label-l 15.5/700 — 입력값·드롭다운 값
label-m 13/700 (+.strong 800) — 섹션 제목·버튼
label-s 11/800 — 배지·탭 라벨
13:54 .tnum — 숫자 폭 고정
색은 타입과 분리한다 — c-default · c-sub · c-muted · c-faint · c-blue · c-green · c-red · c-orange
v0.1 이름(t-title·t-label·t-value…)은 별칭으로 계속 동작한다
3. 상태 · 터치규칙 4·5 — 레이어 하나로 통일, 시각≠터치
상태 레이어 — 콘텐츠 색 반투명 덮개. hover 8% · focus 10% · press 10% · disabled 38%
부품마다 다른 :active 정의를 두지 않는다. transform: scale() 로 누름을 표현하지 않는다
터치 영역 — 보이는 크기는 그대로, 누르는 영역만 44px로
점선이 터치 영역. 세로는 44까지, 가로는 4px까지만 넓힌다(옆 버튼 오폭 방지)
4. 버튼크기 lg 52 · md 46 · sm 36 · xs 28 × 톤 5
lg 52 — 화면 주 행동. 한 화면에 하나
md 46 — 시트 하단·결제 등 보조 주행동
sm 36 — 확인창·행 안 버튼
xs 28 — 값 옆 작은 버튼(복사·로그아웃·재시도)
icon — 정사각. sm 34 outline(재개·삭제·중단) / xs 28 ghost(복사) / round(스왑)
btn-text — 배경 없음. 섹션 제목 우측·더보기·위험 링크
5. 박스card · inset · hero (+edge 띠)
섹션 제목 — 박스 위 (t-section + .section)
box.pad — 행 없는 박스. 안쪽 14×16
본문이 자유 배치일 때
box (pad 없음)행이 여백을 가짐
행 사이헤어라인 자동
box.inset — 박스 안의 회색 상자
[KTX] 9/15 서울→부산
box.hero — 새 버전 0.1.8
업데이트 안내 배너
예약10/10(토) 광주송정 → 용산
box.edge-blue — 상태 띠. 결과 카드
6. 행row · row-head · row-stack · row-item · row.half
row — 라벨 왼쪽 · 값 오른쪽
값(파랑)1234567890
값(plain)demo@example.com
값(empty)선호 좌석을 등록하세요
드롭다운2026.09.11 (금) ▼
입력명
스위치
값 + 버튼demo@ex.com
lead 슬롯(24)아이콘·점
칩 여러 개
row.half — 한 행을 둘로
날짜09.11
시간14:00
아래 행헤어라인 자동
row-head — [배지·점][제목][아이콘 버튼]
감시 중9/15(화) 서울 → 부산 아주 긴 제목은 말줄임
머리 아래 행KTX (101)
row-stack — 라벨 위 · 내용 아래
출발 · 도착
소제목(sub) 12/700
세그먼트
세그먼트 tight
row-item — 누르는 목록(시트·드롭다운·역 목록)
KTX-산천 (019)
선택된 항목
선택 + 채움
가운데 정렬(시트형)
09.10 07:00알림 제목이 길면 말줄임 처리됩니다 알림 제목이 길면
14:42→17:23 KTX (147)2석
7. 컨트롤input · switch · check · seg · chip · badge · pill · dot · spin
input
boxed
switchcheck
chip
chip.sm
chip.round
badge예약감시 중완료중지최근
pill대기감시 1예약오류
dot · spin
8. 안내 문구hint · note · ok · warn · err · boxed · empty
msg.hint 12 흐림 — 행 아래 부연 설명
msg.note 13 회색 가운데 — 카드 안 안내
msg.ok 13.5/700 초록 — 조건에 맞는 자리를 예매합니다.
msg.warn 13.5/700 주황 — 결제 정보가 없습니다
msg.err 11.5/600 붉음 — 회원번호 10자리를 입력하세요
msg.boxed — 옅은 배경 안내 (체크했을 때만 행 아래에)
아직 등록된 프리셋이 없습니다
9. 오버레이sheet · menu · pop(tip/note/toast) · confirm · spot
sheet — 바텀시트
가운데 항목
선택된 항목
pop.tip 12pop.note 13 — 누른 자리 아래 안내.
두 줄까지.
pop.toast 13.5 — 저장됐습니다
confirm — 이 일정을 삭제할까요?
올린 캘린더 일정도 함께 삭제됩니다.
spot — 여기서 열차를 고르세요
체크한 열차만 감시합니다
10. 골격app-header · tabbar · log · stat3
12
조회
3
후보
0
오류
14:02:11열차 조회 시작
14:02:12후보 3편 발견
14:02:15좌석 없음 · 10초 후 재시도
14:02:30서버 오류 ERR299929
14:02:31대기 중…