Design System
반려OOO 병원 찾기 — 시스템
레퍼런스의 정제된 파란색 액센트와 중립적인 카드 레이아웃을 체계화한 토큰·컴포넌트 라이브러리입니다.
Color
12 tokens · hex + oklch
Typography
Pretendard Variable
display
영상OOO과 전문 OO놀이터
40 / 700 / -0.02em
h1
지역별 병원 찾기
28 / 700 / -0.015em
h2
OO시타임 OOO 메디컬센터
22 / 700 / -0.01em
body-lg
엑스레이, 초음파를 보다 더 자세히 보고 싶다면
16 / 400 / 1.55
body
경기도 하남시 미사강변대로 222 미사 중앙프리미엄 202호
14 / 400 / 1.55
caption
3.2 km · 2차 병원 · 영상OOO과
12 / 400 / 1.45
Radius · Shadow
8 / 12 / 16 / 20
sh-card
sh-float
sh-sheet
Components
8 primary
Buttons
Primary 14px padding, radius 12. Disabled: neutral 300.
Filter chips
Inactive: white / line. Active: ink-1. Caret = dropdown.
Tag chip (specialty)
2차OO놀이터
영상OOO과전공의
척사·벡사
공공예송
고양이친화병원
2 variants: brand (emphasis) + neutral (default).
Hospital card
OO시타임 OOO 메디컬센터
경기도 하남시 미사강변대로 222 미사 중앙프리미엄 202호
3.2 km
2차OO놀이터영상OOO과전공의
Thumb 76², radius 10. Whole card tappable.
Bottom tab nav
4 items, active uses brand-50 pill.
Bottom sheet
지역선택
✕
grip · title · close · body slot
Radius 20 top. Sheet shadow + grip handle.
Map pin
Brand pin (default), ink pin (selected), dot (cluster).
Region row
2-pane: province (left) → district (right). Check on selection.