Foundations
시스템의 시각적 기반 — 타입, 컬러, 스페이싱, 모션, 레이아웃, 그리고 보이스·접근성 가이드. 각 specimen은 실제 토큰(styles.css)을 그대로 읽어 렌더링됩니다.
아래 specimen은 개별 HTML 파일을 <iframe>으로 임베드합니다. 로컬에서 정확히 보려면 정적 서버로 여는 걸 권장합니다 — 예: npx serve . 또는 python3 -m http.server.
Type Pretendard · single family
Type Scale
40 → 10px, Pretendard
Display Specimen
Pretendard Bold, tight tracking
Weights
400 · 500 · 600 · 700
Data · Numerals
Pretendard — tabular figures
Colors Monochrome + Accent
Neutral Ramp
Gray 0 → 950, cool-leaning
Accent
Signature accent · 50 → 900
Semantic · Light
Text, surface, border, accent roles
Semantic · Dark
Dark theme surfaces, text, accent
Status
Success · Warning · Danger · Info
Data-viz palette
Categorical · accent-led, on monochrome
Spacing 4px grid · radius · elevation
Spacing Scale
4px base grid · 0 → 96
Radius
xs → 2xl · pill
Elevation
Soft cool shadows · xs → xl
Motion & Layout Easing · grid
Easing & Duration
Quick, understated motion — no bounce
Grid & Layout
12-col · 1120 max · 32 gutter · 20 gap
Responsive & breakpoints
Mobile-first · sm·md·lg·xl · container & grid · component mapping
Guidelines Voice · accessibility · do/don't
Voice & Writing
Clear · calm · Korean-led · no emoji
Accessibility
Contrast · focus · hit targets · motion
Do / Don't — accent
Use the accent sparingly
Brand Wordmark · iconography
Wordmark (placeholder)
Typographic lockup — pending a real logo
Iconography · Lucide
Monoline · stroke 2 · currentColor