📄 A4 출력용 디자인 시스템 요약 카드 — Cmd + P 로 PDF 저장 또는 인쇄
CELLOGRAM Design System
Reference Card · 한 페이지 요약
v4.0 — Global Reference Edition
CLEARMED Inc. · 사내 운영 모드
cellogram.co.kr/design

v4.0 핵심 지표

287
자동 테스트
32
React 컴포넌트
88.5%
글로벌 톱 대비
89
Storybook stories

Brand Palette · Mauve 10-step (50→900)

50
100
200
300
400
500
600
700
800
900
Key: --color-brand: #947F82 · PANTONE 4115 U

Typography · 9 levels (Pretendard 한글 + Outfit 영문)

Display
한글 디자인 시스템
56-172 · 200 · -0.034em · 1.05 H1
ECM Booster 12분의 차이
40-128 · 300 · -0.034em · 1.25 H2
콜라겐 아키텍처 정렬 2-단계
32-92 · 400 · -0.022em · 1.25 H3
시술 후 회복 가속
22-52 · 500 · -0.022em · 1.25 Body Lead
기존 시술의 한계를 넘어 PDLLA × ECM 통합 부스터.
20-30 · 400 · -0.011em · 1.7 Body
한글 본문 — 영문 1.5 대비 line-height 1.85 한글 가독성 최적.
16-24 · 400 · -0.011em · 1.85 Caption
PANTONE 4115 U · Pretendard Variable13-20 · 500 · -0.005em · 1.5 Label
CELLOGRAM · ECM BOOSTER
12-18 · 600 · 0.18em · uppercase Quote
"PDLLA 단일 + ECM 환경 — 그 둘의 통합."
18-28 · italic · 400 · 1.7

Pretendard 9-step font-weight

weightname적용
100Thin—
200ExtraLightDisplay
300LightH1
400RegularBody · H2
500MediumH3 · Caption
600SemiBoldLabel · Tag
700BoldStrong
800ExtraBoldDisplay Strong
900Black—

한글 4-tier (Toss 가이드 1:1)

Tierletter-spacingline-height
display-0.034em1.05
heading-0.022em1.25
body-0.011em1.85
small-0.005em1.50

Spacing · 8-step

4
8
12
16
24
32
48
64
xs · sm · md · base · lg · xl · 2xl · 3xl
Radius: sm 4 · md 8 · lg 12 · xl 16 · full 9999

WCAG 2.2 SC · 자동 audit

SC 1.4.11 Non-text Contrast — border · focus ring ≥ 3:1 vs surface PASS
SC 2.4.13 Focus Appearance — 2px solid outline + brand glow PASS
SC 2.5.5 Target Size — interactive ≥ 44×44px PASS
SC 1.4.12 Text Spacing — user override 시 깨지지 않음 PASS

Component Library · 32

Form (8)
Button · Card · Badge · Input · Textarea · PasswordInput · Tabs · Separator
Overlay (5 lazy)
Dialog · DropdownMenu · Tooltip · Popover · Accordion
Feedback (4)
Alert · Toast · Spinner · Skeleton
Layout (3)
Stack · Cluster · Separator
Typography (4)
Text · LangSwitcher · Avatar · Breadcrumb
Domain (6)
Hero · EcmMap · EcmVial · ProcedureCard · BrandShowcase · ClinicMap
Form Helpers (2)
FormField · Toaster

Quick Links

대시보드 cellogram.co.kr/design
Figma 가이드 cellogram.co.kr/design/figma-guide
Storybook cellogram-storybook.vercel.app
회고 글 cellogram.co.kr/blog/v4-ga
Figma JSON /design-assets/figma-{variables,tokens-studio}.json
코드 자산 /design-assets/{cellogram-tokens-v4.css, tailwind-preset.js, tokens.{js,d.ts}}