v4.0 · Global Reference Edition · 사내 운영

CELLOGRAM Design System

토큰 위계 · 한글 가독성 · WCAG 2.2 · 4 언어 · 멀티 브랜드. 9주 로드맵 끝에 사내 단일 대시보드로 통합.

자동 테스트

React 컴포넌트

100%

글로벌 톱 대비

3:1+

WCAG 1.4.11

언어 lang-override

Storybook stories

8KB

@cellogram/tokens

52KB

@clearmed/ui

CATEGORY 01 / 06

Brand 브랜드

CELLOGRAM 브랜드 본질 — 로고 시스템 · 브랜드 아이덴티티 · multi-brand (CLEARMED).

Logo · Brand Identity

CELL(ExtraBold 800) + [O] + GRAM(ExtraLight 200) · [O] symbol = Mauve #947F82 (PANTONE 4115 U). 3 variant × 3 color × 6 size = 54 조합 자동.

Weight gradient · CELL[O]GRAM

CELL[O]GRAM

      CELL Bold 700 · [O] Mid 500 · GRAM Light 300
    

Variant · 5종

horizontal · 일반 사용

vertical · 정사각

symbol · favicon

package · 2-line ★ 신규

패키지 variant · 2-line

Line 1: CELL[O] (왼쪽 정렬)
Line 2: GRAM (오른쪽 정렬)

패키지(상자·병·sachet) 정사각·세로 표면 디자인 시 사용. 좁은 폭에서 2-line 으로 표현하되 오른쪽 정렬로 시각 균형 유지.

최소 크기: 96px · 가독성 한계

배경별 application 규칙

Light Canvas

#FBFAFA · #F4F1F0 · #FFFFFF
→ primary (#947F82)

Dark Scene

#0A0A09 · #1A1718 · #161A24
→ on-dark (#F5F0EE)

Brand Mauve

#947F82 surface
→ on-dark 흰 로고

Photographic

사진 배경
→ solid block 또는 halo 보장

Print Mono

단일 컬러 인쇄 · 1도 인쇄
→ mono (#1A1718)

Print Spot Color

PANTONE 4115 U spot 인쇄
→ CELLOGRAM_Spot color.pdf

Color on surface

primary · #947F82

on-dark · #F5F0EE

mono · #1A1718 (인쇄)

Size scale · 6-step

16px · favicon

24px · nav small

32px · default

48px · hero · footer

72px · marketing

Download · 12 SVG files

Horizontal × 3

Symbol [O] + CELL[O]GRAM 워드마크 · 일반 사용 · nav · header. 최소 120px.

mauve.svg on-dark mono

Vertical × 3

Symbol 위 / 워드마크 아래 · 정사각 영역 · poster · social profile. 최소 72px.

mauve.svg on-dark mono

Symbol [O] × 3

[O] 만 · favicon · loading · stamp. 최소 16px.

mauve.svg on-dark mono

Package × 3 ★ 신규

2-line · CELL[O] (1줄) + GRAM (2줄 오른쪽 정렬) · 패키지 라벨 · 세로 표면. 최소 96px.

mauve.svg on-dark mono

Brand Identity

CELLOGRAM (mauve · CLEARMED 브랜드의 ECM Booster 라인업) + CLEARMED (cool slate · 모기업 의료 신뢰 톤). PDLLA Collagen Architecture + ECM Prime 의 Dual-Axis 시스템을 단일 브랜드로 통합.

CELLOGRAM

#947F82 Mauve

Logo master #927F82 · PANTONE 4115 U · 한국 B2B 의료 미학

CLEARMED

#0097A9 Teal

Cool slate + teal · 모기업 의료 신뢰 톤

CATEGORY 02 / 06

Tokens 토큰

디자인 시스템 기본 단위 — Mauve 10-step palette · 한글/영문 9-level 타이포 · 4-언어 lang-override.

Living Mechanism · 1제 + 2제

Collagen Architecture (1제 · PDLLA 30µm 마이크로스피어) + ECM Prime (2제 · 50+ 활성 성분 수용액) — Dual-Axis 통합 설계. 1제가 구조를 만들고, 2제가 환경을 깨운다. Prejuvenation · Slow Aging.

VIAL 01 · 1제

Collagen Architecture

PDLLA 30µm 비다공성 마이크로스피어 · 동결건조 분말 100mg · Smart SPDS™

VIAL 02 · 2제

ECM Prime

50+ 활성 성분 수용액 6mL · Foundation → Activation → Protection → Support

"Not volumizing, not filling — conditioning." 1제 Collagen Architecture 가 피부에 물리적 토대를 형성하고, 2제 ECM Prime 이 4-Phase 컨디셔닝 환경을 설계한다.

Multi-brand · Live Toggle

단일 토큰 컨테이너 → 브랜드 1초 전환. CELLOGRAM (mauve #947F82) ↔ CLEARMED (teal #0097A9). 같은 컴포넌트, 다른 브랜드 정체성.

Primary action

Outline accent

taglabel

Color Palette

primitive (Mauve 10-step · 50→900) → semantic (surface 5-tier · text 5-tier) — 모두 W3C DTCG schema 기반.

Mauve 10-step (Brand · 50→900)

Surface — Light scope 5-tier

Text — Light scope

Typography · 9 levels

Pretendard (한글) + Outfit (영문) 2-font · 9-tier 위계 — Display · H1 · H2 · H3 · Body Lead · Body · Caption · Label · Quote. 동일 사이즈 매트릭스에 lang-override 로 lh·ls 자동 전환.

한글 9-tier (Pretendard)

Display

2-단계 시스템

clamp(56→172) · ExtraLight 200 · lh 1.05 · ls -0.034em

ECM Booster 12분의 차이

clamp(40→128) · Light 300 · lh 1.25 · ls -0.022em

콜라겐 아키텍처에 정렬된

clamp(32→92) · Regular 400 · lh 1.25 · ls -0.022em

케어 후 회복 가속

clamp(22→52) · Medium 500 · lh 1.25 · ls -0.022em

Body Lead

기존 접근의 한계를 넘어 PDLLA × ECM 통합 부스터로 12분의 변화를.

clamp(20→30) · Regular 400 · lh 1.7 · ls -0.011em

Body

PDLLA 입자가 ECM 빌딩 블록과 함께 활성화된다. line-height 1.85 — 한글 본문 최적값. 영문 1.5 그대로 쓰면 한글 답답함.

clamp(16→24) · Regular 400 · lh 1.85 · ls -0.011em

Caption

PANTONE 4115 U · Pretendard Variable · 한글 시각 가독성 최적

clamp(13→20) · Medium 500 · lh 1.5 · ls -0.005em

Label

CELLOGRAM · ECM BOOSTER

clamp(12→18) · SemiBold 600 · uppercase · ls 0.18em

Quote

"PDLLA 단일 적용 효과 + ECM 환경 활성 — 그 둘의 통합 부스터."

clamp(18→28) · italic · Regular 400 · lh 1.7

영문 9-tier (Outfit)

Display

2-step System

동일 size · ExtraLight 200 · lh 1.05 · ls -0.01em (영문 fine-tune)

ECM Booster · 12-min Application

동일 size · Light 300 · lh 1.15

Aligned to collagen architecture

동일 size · Regular 400 · lh 1.2

Accelerated recovery during aftercare

동일 size · Medium 500 · lh 1.25

Body Lead

Beyond conventional approaches — PDLLA × ECM integrated booster for visible 12-minute change.

동일 size · Regular 400 · lh 1.6

Body

PDLLA particles activate alongside ECM building blocks. Body line-height 1.7 — Latin optimum, against Korean 1.85.

동일 size · Regular 400 · lh 1.7 · ls 0

Caption

PANTONE 4115 U · Outfit Variable · Latin optical sizing

동일 size · Medium 500 · lh 1.5 · ls 0

Label

CELLOGRAM · ECM BOOSTER

동일 size · SemiBold 600 · uppercase · ls 0.18em

Quote

"PDLLA alone + ECM environment — the integrated booster of both."

동일 size · italic · Regular 400 · lh 1.7

Pretendard 9-step font-weight (Thin → Black)

가나다

100 Thin

가나다

200 ExtraLight

가나다

300 Light

가나다

400 Regular

가나다

500 Medium

가나다

600 SemiBold

가나다

700 Bold

가나다

800 ExtraBold

가나다

900 Black

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

--ko-tracking-display -0.034em · lh 1.05 · fw 200

한글 디자인 시스템

--ko-tracking-heading -0.022em · lh 1.25 · fw 300

가독성 위계 정렬

--ko-tracking-body -0.011em · lh 1.85 · fw 400

본문은 영문 1.5 대비 한글 1.85. Pretendard 9-step weight 를 9-tier 위계에 매핑.

--ko-tracking-small -0.005em · lh 1.5

캡션 · 메타 · 보조 텍스트

4 언어 lang-override

KO · lh 1.85

한국어 — 콜라겐 아키텍처에 정렬된 2-단계 시스템.

EN · lh 1.7

English — Aligned to collagen architecture, 2-step system.

JA · lh 2.0

日本語 — コラーゲン構造に整列した2段階システム。

ZH-Hans · lh 1.85

简体中文 — 与胶原结构对齐的 2 步系统。

CATEGORY 03 / 06

Components 컴포넌트

32 React 컴포넌트 — Form · Overlay · Feedback · Layout · Typography · Domain · Brand. Radix UI 기반.

4-Lang Typography Matrix

동일 의미 한 문장의 4 언어 시각 위계 비교. html[lang] override 토큰으로 line-height · letter-spacing · font-family 자동 분기.

Lang	Sample (동일 의미)	line-height	letter-spacing	Font
한국어	피부의 자연스러운 회복을 깨우는 ECM 부스터	1.85	−0.011em	Pretendard
English	ECM Booster that awakens skin's natural recovery	1.70	0	Outfit
日本語	肌の自然な回復を呼び覚ます ECM ブースター	2.00	0	Noto Sans JP
简体中文	唤醒肌肤自然修复的 ECM 助推器	1.85	0	Noto Sans SC

Component Gallery — 32 components

Radix UI 기반 · React 19 + RSC. 인터랙티브 카탈로그는 Storybook 89 stories.

Button (3 variant × 3 size)

Badge (Brand · Success · Error · Warning)

CELLOGRAM 통과 실패 베타

Card (Default · Outlined · Brand)

기본 카드 · surface-1 + border

Outlined · 투명 + 굵은 border

Brand · 주요 액션 강조

Input · Form Field

Form: Tabs / Select / Checkbox / Radio

Overview Detail Spec

✓ 동의함 Pro

Overlay (Dialog · Menu · Tooltip · Popover · Accordion)

툴팁 메시지DialogPopoverAccordion

Feedback (Alert · Toast · Spinner · Skeleton)

통과 — WCAG 2.2 4 SC 모두 충족

변경사항 저장됨

로딩 중…

Layout (Stack · Cluster · Separator)

Stack item 1Stack item 2Stack item 3

ABCDE

Typography (Text · LangSwitcher · Avatar · Breadcrumb)

Display · Heading

Body — 한글 letter-spacing −0.011em + line-height 1.7 Pretendard.

KOENJPCN CL

Home › Design › Components

Domain — CELLOGRAM 전용 (6 컴포넌트)

HERO

ECM Booster

ECMMAP

ECMVIAL

APPLICATION

12 min

SHOWCASE

CLEARMED

CLINIC

Seoul · 24

CATEGORY 04 / 06

Patterns 패턴

컴포넌트 상호작용 패턴 — 6+3 상태 매트릭스 · Scope-driven 다크/라이트 자동 전환.

State Matrix · 6+3

Button × 3 variant × 6 공통 상태 = 18 셀. Input × 9 상태 (공통 6 + Form-only 3 Loading/Error/Success) = 9 셀. 총 27 셀 디자인 시스템 reference 매트릭스.

Button × Variant × 6 상태 (18 셀)

	Default	Hover	Active	Focus	Focus-visible	Disabled
Primary
Secondary
Ghost

Focus vs Focus-visible — :focus 는 마우스 클릭에도 발동(과거 WCAG 2.0). :focus-visible 는 Tab 키보드 탐색 시에만 발동(WCAG 2.2 SC 2.4.13).

Input × 9 상태 (공통 6 + Form-only 3)

	Default	Hover	Active	Focus	Focus-visible	Disabled	Loading	Error	Success
Text Input

Form-only 3 상태 — Loading (제출 중 spinner), Error (검증 실패 + helper text), Success (검증 통과 + check icon). Button 에는 적용 X (의미 약함).

Scope-driven Auto-flip

:root + .scene-dark + .scene-light + .detail-light + nav.nav-light — 같은 토큰 자동 전환.

.scene-light · :root

ECM Booster · 1제 + 2제 시스템

라이트 scope 의 자동 surface-1 + border

.scene-dark · auto-flip

ECM Booster · 1제 + 2제 시스템

다크 scope 의 자동 surface-1 + border. 같은 코드, 다른 환경.

Visual Regression · CI 메트릭

Playwright snapshot CI — 28 production URL × 4 viewport = 112 면 자동 비교. PR diff ≥ 1% 자동 차단.

112

snapshot 면 / build

viewport (FHD/2K/4K/Mobile)

production URL

≥1%

diff threshold · PR 차단

Storybook stories

~6min

CI run time

Figma Variables · 양방향 동기

Style Dictionary 산출물 → Figma Tokens 플러그인 자동 import. 디자이너 Figma 수정 → reverse-link 자동 PR. 코드 ↔ Figma 단일 진실.

287

tokens 동기

scope (light/dark/detail/nav)

brand (cellogram/clearmed)

0ms

drift (last sync)

CATEGORY 06 / 06

Resources 자산

디자이너·개발자 자산 — Figma JSON · CSS · Tailwind · TypeScript · Storybook 89 stories.

Downloads · 디자인 + 코드 통합

디자이너는 Figma 로 · 개발자는 CSS/Tailwind/TS 로. 모두 같은 토큰에서 자동 생성.

디자이너용 (Figma)

Figma Variables JSON 16 KB

Figma 네이티브 Variables import 포맷 (Org plan).
Figma → Local Variables → Import.

Download .json

Tokens Studio JSON 28 KB

Tokens Studio for Figma 플러그인 (무료) import 포맷.
플러그인 → File → Load.

Download .json

개발자용 (코드)

CSS Variables 8.3 KB

Vanilla CSS — apps/website 또는 신규 정적 사이트.
@import './cellogram-tokens-v4.css';

Download .css

Tailwind Preset 7.4 KB

Tailwind CSS preset — Studio Next.js 앱.
presets: [require('./tailwind-preset.js')]

Download .js

TypeScript Tokens 7.4 + 6.4 KB

런타임 tokens 객체 + 자동완성용 .d.ts.
import { tokens } from './tokens';

Download .js .d.ts

Resources

컴포넌트 인터랙티브 검토 · 사내 거버넌스 · 운영 상태.

Governance · 거버넌스

RFC / ADR / Versioning / Deprecation 4 정책. Solo CEO 환경 최소 운영 — 외부 인용 가능 품질로 작성.

RFC

Request for Comments

신규 토큰·컴포넌트 제안 → 검토 → 채택 워크플로. Markdown 템플릿.

docs/governance/rfcs/

ADR

Architecture Decision Record

주요 아키텍처 결정 기록 (현 #UI-001 · #UI-002 · #UI-003).

docs/governance/adrs/ · 3 records

SEMVER

Semantic Versioning

Changesets 자동 changelog. @cellogram/tokens · @clearmed/ui 독립 버전.

v4.0.0 · breaking · feat · fix 규칙

DEPRECATE

Deprecation Policy

구 토큰 6 개월 유예 → 자동 alias 유지 → 메이저 버전에서 삭제.

grace 6m · alias auto · major bump

CELLOGRAM Design System

Brand 브랜드

Logo · Brand Identity

Weight gradient · CELL[O]GRAM

Variant · 5종

패키지 variant · 2-line

배경별 application 규칙

Light Canvas

Dark Scene

Brand Mauve

Photographic

Print Mono

Print Spot Color

Color on surface

Size scale · 6-step

Download · 12 SVG files

Horizontal × 3

Vertical × 3

Symbol [O] × 3

Package × 3 ★ 신규

Brand Identity

CELLOGRAM

CLEARMED

Tokens 토큰

Living Mechanism · 1제 + 2제

Collagen Architecture

ECM Prime

Multi-brand · Live Toggle

Color Palette

Mauve 10-step (Brand · 50→900)

Surface — Light scope 5-tier

Text — Light scope

Typography · 9 levels

한글 9-tier (Pretendard)

영문 9-tier (Outfit)

Pretendard 9-step font-weight (Thin → Black)

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

4 언어 lang-override

Components 컴포넌트

4-Lang Typography Matrix

Component Gallery — 32 components

Button (3 variant × 3 size)

Badge (Brand · Success · Error · Warning)

Card (Default · Outlined · Brand)

Input · Form Field

Form: Tabs / Select / Checkbox / Radio

Overlay (Dialog · Menu · Tooltip · Popover · Accordion)

Feedback (Alert · Toast · Spinner · Skeleton)

Layout (Stack · Cluster · Separator)

Typography (Text · LangSwitcher · Avatar · Breadcrumb)

Domain — CELLOGRAM 전용 (6 컴포넌트)

Patterns 패턴

State Matrix · 6+3

Button × Variant × 6 상태 (18 셀)

Input × 9 상태 (공통 6 + Form-only 3)

Scope-driven Auto-flip

Accessibility 접근성

WCAG 2.2 · 자동 audit

Non-text Contrast

Focus Appearance

Target Size

Text Spacing

A11y · Live Preferences

모션 감소

고대비 모드

다크 모드

320px reflow

호버 콘텐츠

Visual Regression · CI 메트릭

Figma Variables · 양방향 동기

Resources 자산

Downloads · 디자인 + 코드 통합

디자이너용 (Figma)

Figma Variables JSON 16 KB

Tokens Studio JSON 28 KB

개발자용 (코드)

CSS Variables 8.3 KB

Tailwind Preset 7.4 KB

TypeScript Tokens 7.4 + 6.4 KB

Resources