1. 토큰--bg --card --fill --text --text-2 --muted --blue …
bg
card
fill
text
text-2
text-3
muted
faint
blue
deep
tint
green
red
orange
dark
간격 (역할별)담는 쪽만 쓴다
모서리card 16 · btn 14 · md 10 · sm 8 · xs 6 · pill
16
14
10
8
6
pill
2. 텍스트8종 — 이 외 크기 없음
t-title 21/800 — 화면 제목
t-heading 17/800 — 시트·달력 제목
t-section 13/800 — 섹션 제목(박스 위)
t-body 15/500 — 본문·행 라벨(강조)
t-label 14/500 — 행 라벨(기본)
t-value 15.5/700 파랑 — 입력값·드롭다운 값
t-caption 12/400 흐림 — 부제·힌트
13:54 t-num 22/800 tabular — 큰 숫자·시각
3. 버튼크기 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 — 배경 없음. 섹션 제목 우측·더보기·위험 링크
4. 박스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 — 상태 띠. 결과 카드
5. 행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석
6. 컨트롤input · switch · check · seg · chip · badge · pill · dot · spin
input
boxed
switchcheck
chip
chip.sm
chip.round
badge예약감시 중완료중지최근
pill대기감시 1예약오류
dot · spin
7. 안내 문구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 — 옅은 배경 안내 (체크했을 때만 행 아래에)
아직 등록된 프리셋이 없습니다
8. 오버레이sheet · menu · pop(tip/note/toast) · confirm · spot
sheet — 바텀시트
가운데 항목
선택된 항목
pop.tip 12pop.note 13 — 누른 자리 아래 안내.
두 줄까지.
pop.toast 13.5 — 저장됐습니다
confirm — 이 일정을 삭제할까요?
올린 캘린더 일정도 함께 삭제됩니다.
spot — 여기서 열차를 고르세요
체크한 열차만 감시합니다
9. 골격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대기 중…