CHAART. OS — Design Tokens · Design Autopilot

01 — Philosophy

Design Autopilot

입력은 구조를 얻고, 진실은 읽히며, 가치는 신성하게 남는다. — 데이터가 토큰을 통해 일관된 결과물로 변환되는 세 원칙.

Law 01

Noise gets a place

리넨 텍스처, 페이퍼 노이즈, 래디얼 드리프트. 불완전함에도 자리가 있다. 단, 통제된 노이즈만 허용한다.

Law 02

Truth snaps

데이터는 즉시 포착된다. 바운스 없는 이징, tabular-nums, 우측 정렬. 숫자가 말하는 진실은 흔들리지 않는다.

Law 03

Value stays sacred

--red-brand #961E23은 아무데나 쓰지 않는다. 가치를 강조할 때만 사용한다. 직각 철학, 최소 장식, 최대 품위.

Dual Optics

Optic A — Market

Public Sale

경매, 아트페어, 공개 거래. 데이터 테이블, 차트, 필터 UI. compact density, tabular-nums, 높은 정보 밀도.

Optic B — Private

Private Sale

1:1 매매, VIP 컨설팅, 프라이빗 뷰잉룸. 넉넉한 여백, 대형 타이포, comfortable density.

02 — Color

Color System

--red-brand, --bg, --text, --border, --color-success — 모든 컬러 토큰의 실제 CSS 변수와 역할.

Color Architecture — 3 Layers

Primitive

--neutral-10 --red-40 --green-30 --warm-40

값(hex) 정의

↓

Semantic

--text --red-brand --color-success --bg

역할 부여

↓

Component

--sidebar-active-bg --datagrid-accent --kpi-value-color

용도 특화

Primitive(원재료) → Semantic(역할) → Component(용도). 테마 전환 시 Semantic 레이어만 교체하면 전체 시스템 색상이 바뀝니다.

Brand Core

ChaartRed #961E23 --red-brand

Red Hover #7a191d --red-brand-hover

Red UI #E10600 --red-ui

Black #0f0f0f --black

White #ffffff --white

Charcoal #1A1A1A --charcoal

Charcoal Hover #333333 --charcoal-hover

Cream #f5f2ee --cream

Paper Warm #F0EDE6 --paper

Text Hierarchy

Token	Value	Contrast	Usage
`--text`	#111111	15.4:1	Primary text, numbers, amounts — 항상 이 색상
`--text-secondary`	#555555	5.07:1	Subtitles, descriptions, body 허용
`--text-muted`	#888888	3.22:1	⚠ 18px+ large text 전용. 숫자 사용 금지
`--text-caption`	#6B6B6B	4.58:1	Captions ≥14px. 숫자 값 사용 금지
`--text-inverse`	#ffffff	—	Dark background 위의 텍스트

Surface & Background

bg #FAFAF8 --bg

bg-card #ffffff --bg-card

warm-bg #f9f7f4 --warm-bg

bg-secondary #f5f3f0 --bg-secondary

Border & Alpha Scale

Token	Value	Usage
`--border`	rgba(17,17,17,0.07)	Default card/panel border
`--border-strong`	rgba(17,17,17,0.14)	Active/focused borders
`--alpha-4`	rgba(0,0,0,0.04)	Card hover, badge bg
`--alpha-6`	rgba(0,0,0,0.06)	Separator, panel border
`--alpha-8`	rgba(0,0,0,0.08)	Default border
`--alpha-12`	rgba(0,0,0,0.12)	Input border, emphasis
`--alpha-16`	rgba(0,0,0,0.16)	Strong border
`--alpha-25`	rgba(0,0,0,0.25)	Dropdown border

Semantic Status Colors

Success #2D4F35 --color-success

Warning #92400e --color-warning

Danger #dc2626 --color-danger

Info #1e40af --color-info

Gold VIP #8C6D46 --color-gold

Neutral #3E4C59 --color-neutral

Cyan #0891b2 --color-cyan

Category	Text	Background	Border	Alt
Success	`--color-success`	`--color-success-bg` rgba(45,79,53,0.08)	`--color-success-border` rgba(45,79,53,0.18)	—
Warning	`--color-warning`	`--color-warning-bg` rgba(249,158,11,0.12)	`--color-warning-border` rgba(249,158,11,0.22)	`--color-warning-alt` #EAB308
Danger	`--color-danger`	`--color-danger-bg` rgba(239,68,68,0.10)	`--color-danger-border` rgba(239,68,68,0.20)	—
Info	`--color-info`	`--color-info-bg` rgba(59,130,246,0.10)	`--color-info-border` rgba(59,130,246,0.20)	`--color-info-alt` #2563eb
Neutral	`--color-neutral`	`--color-neutral-bg` rgba(62,76,89,0.08)	`--color-neutral-border` rgba(62,76,89,0.18)	—
Gold	`--color-gold`	`--color-gold-bg` rgba(140,109,70,0.08)	`--color-gold-border` rgba(140,109,70,0.18)	—

WCAG 2.1 Contrast Rules

Element	Min Ratio	Allowed Tokens	Note
Normal Text (≤18px)	4.5:1 AA	`--text` `--text-secondary`	`--text-muted` 사용 금지
Large Text (≥18px bold / ≥24px)	3:1 AA	`--text` `--text-secondary` `--text-muted`	—
Interactive (border/focus)	3:1 AA	`--border-strong` `--red-brand`	—
Numbers / Amounts	4.5:1+ AAA	`--text` only	크기 무관 필수
Decorative / Disabled	N/A	Any	시각적 구분 필수

ERP Semantic (Dealer)

Token	Value	Usage
`--badge-success-bg`	#E8F5E9	Success badge background
`--badge-success-text`	#2E7D32	Success badge text
`--badge-warning-bg`	#FFF3E0	Warning badge background
`--badge-warning-text`	#EF6C00	Warning badge text
`--badge-danger-bg`	#FFEBEE	Danger badge background
`--badge-danger-text`	#C62828	Danger badge text
`--badge-info-bg`	#E3F2FD	Info badge background
`--badge-info-text`	#1565C0	Info badge text
`--bg-subtle`	#F9FAFB	Table header, modal sub-column
`--bg-skeleton-from`	#f0f0f0	Skeleton loading start
`--bg-skeleton-to`	#e0e0e0	Skeleton loading end
`--text-faint`	#999999	Label only (≥12px + 500wt)
`--gold-accent`	#ffd700	Welcome banner accent

Status States

Token	Value	Usage
`--status-active`	#3E4C59	Active state
`--status-closed`	#6b7280	Closed/archived
`--status-pending`	#9ca3af	Pending/waiting
`--status-online`	#22c55e	Online indicator
`--status-online-alt`	#16a34a	Online (darker)
`--status-dormant`	#d1d5db	Dormant/inactive

03 — Gradient

Gradient Tool

Motion Blur, Icon Fade, Atmosphere — 세 가지 그라디언트 도구와 Glass 레이어.

01

Motion Blur

linear-gradient(90deg, var(--red-brand), transparent) — 섹션 진입 시 좌→우 또는 상→하 블러. 움직임의 잔상.

02

Icon Fade-out

mask-image: linear-gradient(to bottom, black 60%, transparent) — 아이콘 하단 페이드. 뮤지엄 아이콘 전용.

03

Background Atmosphere

radial-gradient(ellipse, rgba(150,30,35,0.07), transparent 60%) — 린넨 텍스처 위 은은한 래디얼.

Name	CSS	Context
Motion Blur	`linear-gradient(90deg, var(--red-brand), transparent)`	Hero entrance, panel slide
Icon Fade	`mask-image: linear-gradient(to bottom, black 60%, transparent)`	Museum icons, relation map
Atmosphere	`radial-gradient(ellipse at 30% 0%, rgba(150,30,35,0.07), transparent 60%)`	Page background layers
Glass BG	`rgba(250,250,248,0.85) + blur(12px)`	Nav, modals, prompt bar
Glass Dark	`rgba(11,11,11,0.85) + blur(12px)`	Dark theme glass

04 — Typography

Type System

--serif, --sans, --mono — 3-Font 시스템. 각 서체의 역할과 스케일. 한글은 반드시 Pretendard.

Font Stacks

Token	Stack	Role
`--serif`	'Libre Baskerville', 'Pretendard Variable', sans-serif	English display, title, quote only. 한글 사용 금지.
`--font-ko` / `--sans`	'Pretendard Variable', 'Pretendard', -apple-system, sans-serif	한글 + UI body. 기본 서체.
`--font-en` / `--sans-en`	'Space Grotesk', -apple-system, sans-serif	영문 body text override
`--mono`	'TASA Orbiter', 'Space Grotesk', sans-serif	Data, labels, meta, code, monospace UI

Libre Baskerville — English Display

Display

Collect with confidence.

Title

Where art meets commerce.

Quote

“The art of collecting, refined by data.”

Pretendard — Doc & UI

Role	Size	Weight	Line Height	Letter Spacing
H1 Section	clamp(28px, 4vw, 48px)	700	1.06	-0.025em
H2 Sub-section	`--text-lg` · 22px	700	1.25	-0.01em
Body	`--text-base` · 15px	400	1.75	0
Body SM	`--text-sm` · 14px	400	1.75	0
Caption	`--text-xs` · 12px	400	1.5	0.005em
Meta / Label	`--text-2xs` · 10px	500~600	1.4	0.08~0.18em

TASA Orbiter — Data & Label

Data

₩85,000,000 · 300 artworks · 96.2%

Label

BRAND IDENTITY · 03 TOKENS

Code

var(--red-brand) · cubic-bezier(0.22, 1, 0.36, 1)

Type Scale (CSS Tokens)

Token	Value	Usage
`--text-2xs`	10px	Mini label
`--text-xs`	12px	Label minimum
`--text-sm`	14px	Caption minimum
`--text-base`	15px	Body standard
`--text-md`	18px	Intermediate
`--text-lg`	22px	Large heading
`--text-xl`	24px	Section title
`--text-2xl`	28px	Hero subtitle
`--text-3xl`	36px	Hero title
`--text-4xl`	48px	Display hero

Type Scale Extensions (ERP/Compact)

Token	Value	Usage
`--text-9`	9px	ERP mini meta
`--text-11`	11px	Compact label
`--text-13`	13px	Tight UI
`--text-16`	16px	Medium body
`--text-17`	17px	Sub-heading
`--text-20`	20px	Medium title
`--text-26`	26px	Large subtitle
`--text-32`	32px	Section heading

Letter Spacing — Tracking Tokens

letter-spacing 하드코딩 금지. 반드시 아래 토큰을 사용합니다. 음수는 헤드라인 타이트닝, 양수는 모노/대문자 와이드닝.

Token	Value	Usage
`--ls-tightest`	-0.04em	대형 디스플레이, 히어로 타이틀
`--ls-tight`	-0.02em	서브 헤드라인, 중간 타이틀
`--ls-normal`	0	본문 기본값
`--ls-wide`	0.04em	미세 트래킹, 작은 라벨
`--ls-wider`	0.08em	버튼, UI 라벨, 네비 아이템
`--ls-widest`	0.12em	섹션 헤더, 모노 대문자 라벨
`--ls-ultra`	0.18em	히어로 라벨, 장식적 대문자

--ls-tightest

Collect with confidence.

--ls-tight

서브 헤드라인 타이틀

--ls-wider

Button · UI Label

--ls-widest

Section Header · Mono Label

--ls-ultra

Hero Label · Decorative

05 — Spacing & Layout

8pt Rhythm & Grid

--space-* 4px 베이스 스케일. 1920px 프레임, 96px SafeArea, var(--content-max) 12-column 그리드.

Spacing Scale (4px base)

--space-1

4px

--space-2

8px · base unit

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-7

28px

--space-8

32px

--space-10

40px

--space-12

48px

Component Padding Presets

Token	Value	Usage
`--card-px`	40px	Card horizontal padding
`--card-py`	48px	Card vertical padding
`--content-px`	64px	Container horizontal padding
`--content-max`	1200px	`.ch-container` max-width
`--section-gap`	160px	Section spacing

12-Column Grid · 24px Gap

1

2

3

4

5

6

7

8

9

10

11

12

Property	Value	Note
Frame Width	1920px	Figma design frame
SafeArea (horizontal)	96px each side	Content margin
Content Width	1728px (1920 − 96×2)	Actual content area
Max-width (CSS)	`var(--content-max)` · 1200px	`.ch-container`
Columns	12	—
Column Gap	24px	—

Border Radius

Token	Value	Philosophy
`--radius`	0	◼ Default: sharp corners. 직각 철학.
`--radius-xs` `--radius-sm` `--radius-md` `--radius-lg` `--radius-xl`	0	모든 사이즈 변형 = 0 (직각 일관성)
`--radius-2` `--radius-3` `--radius-10`	0	Extension aliases (직각 일관성)
`--radius-hover`	3px	Hover only: micro-softening
`--radius-pill`	100px	Chips, tags, pill buttons
`--radius-round`	50%	Avatars, circular elements

06 — Motion

Snap-to-Truth

--ease, --dur-* — 모든 모션은 바운스 없이 정확히 도착한다. 과잉 애니메이션 금지.

⚠ No-Bounce Policy

spring(), elastic, bounce 계열 이징 전면 금지. 미술품 거래 맥락에서 튕기는 모션은 신뢰를 훼손한다. 모든 애니메이션은 목표 지점에 정확히 도착해야 한다.

Easing Curves

Token	Value	Usage	Preview
`--ease`	cubic-bezier(0.22, 1, 0.36, 1)	Default: cards, buttons, inputs, color
`--ease-out-expo`	cubic-bezier(0.16, 1, 0.3, 1)	Emphasis: hero entrance, panel, canvas

Duration Scale

--dur-fast

150ms

Button, toggle, checkbox

--dur-normal

200ms

Color, border change

--dur-slow

300ms

Scroll reveal, cards

--dur-hover

420ms

Hover, micro-interaction

--dur-medium

500ms

Panel, resize

--dur-long

800ms

Hero fade, section enter

--dur-xl

1000ms

Full page transition

Scroll Reveal Pattern

BLUR → SHARP REVEAL

스크롤 진입 시 콘텐츠가 흐릿한 상태에서 선명하게 등장하는 공통 패턴. Hub Manifesto, 섹션 인트로, 카드 리빌 등에 적용한다.

Token	Value	Usage
`--reveal-blur`	6px	초기 블러 강도 (숨겨진 콘텐츠)
`--reveal-shift`	8px	초기 Y-오프셋 (아래→위 등장)
`--reveal-ease`	cubic-bezier(0.05, 0.8, 0.15, 1)	감속 커브 — 빠른 출발, 부드러운 안착
`--reveal-dur-char`	450ms	글자 단위 등장 속도
`--reveal-dur-blur`	500ms	블러 해제 (char보다 약간 길게)
`--reveal-dur-line`	600ms	줄/문장 단위 등장
`--reveal-dur-fade`	800ms	느린 페이드인 (어트리뷰션 등)

LIVE DEMO — 버튼을 눌러 실제 동작 확인

감을시스템으로번역합니다.

가격은 데이터로. 신뢰는 일관성으로. 거래는 자동화로.

— CHAART.

Hero Entrance Sequence

PAGE-LOAD SEQUENTIAL REVEAL

우아하고 고급스러운 인상. “짠!” 하고 터지는 것이 아니라 안개가 걷히듯 자연스럽게. 타이틀 완료 전 후속 요소 등장 금지.

순서	요소	Delay	Duration	방식
1	로고	0.2s	1.2s	blur→sharp + scale
2	라벨	0.5s	0.9s	fadeUp
3	타이틀 (글자별)	0.6s–1.86s	1600ms	blur(3px)→sharp + opacity
4	서브텍스트	3.0s	1.2s	순수 opacity fade
5	검색창	3.8s	1.2s	순수 opacity fade
6	스크롤 힌트	4.6s	1.0s	순수 opacity fade

RULES

✗ translateY 수직 이동 금지 — 억센 착지 인상 발생
✓ opacity + blur(3px) 만 사용 — 안개가 걷히는 고급 인상
✓ 이징: cubic-bezier(0.25, 0, 0.15, 1) — 서서히 시작, 부드럽게 안착
✓ 스태거: 균등 0.09s (급격한 가감속 없이 일정한 캐스케이드)
✓ 서브텍스트는 “다” 글자 인지 시점에 등장 (“.”은 시각 인지 어려움)
✓ Hero Gate: 시퀀스 완료 전 아래 콘텐츠 opacity: 0

Elevation (Shadow Scale)

Level 0

Level 1

Level 2

Level 3

Level 4

Token	Value
`--shadow-xs`	0 1px 2px rgba(0,0,0,0.04)
`--shadow-sm`	0 2px 8px rgba(0,0,0,0.04)
`--shadow-md`	0 4px 16px rgba(0,0,0,0.06)
`--shadow-lg`	0 8px 24px rgba(0,0,0,0.08)
`--shadow-xl`	0 16px 40px rgba(0,0,0,0.12)
`--shadow-brand`	0 4px 16px rgba(150,30,35,0.10)
`--shadow-brand-lg`	0 12px 32px rgba(150,30,35,0.12)
`--focus-ring`	0 0 0 2px var(--bg), 0 0 0 4px rgba(150,30,35,0.3)
`--focus-ring-sm`	0 0 0 3px rgba(150,30,35,0.08)

07 — Dark Mode

Charcoal Theme

--bg, --glass-bg, --border — Surface, Glass, Border, Glow. Dark mode token overrides.

Token	Light Value	Dark Override
`--bg`	#FAFAF8	#0a0a0a
`--bg-card`	#ffffff	#141414
`--text`	#111111	#F0F0F0
`--text-secondary`	#555555	#A5A5A5
`--text-muted`	#888888	#6B6B6B
`--charcoal`	#1A1A1A	#F0F0F0
`--border`	rgba(17,17,17,0.07)	rgba(255,255,255,0.07)
`--border-strong`	rgba(17,17,17,0.14)	rgba(255,255,255,0.13)
`--glass-bg`	rgba(250,250,248,0.85)	rgba(10,10,10,0.82)
`--glass-bg-dark`	rgba(10,10,10,0.82)	— (dark theme only)
`--glass-blur`	12px	12px (shared)

Dark Border & Glow Scale

border-subtle

rgba(255,255,255,0.06)

border-default

rgba(255,255,255,0.08)

border-hover

rgba(255,255,255,0.20)

red-glow

0 0 8px var(--red-brand)

Glass & Blur

blur-sm · 8px

blur-md · 12px

blur-lg · 16px

Theme × Density Variants

Variant	`--text-base`	`--space-unit`	`--card-px`	Context
Comfortable	15px	8px	40px	Private Sale, editorial, VIP
Compact	14px	6px	28px	Market data, ERP, table-heavy

08 — Naming

Naming Convention

Page, Layer, Component, Section — 일관된 네이밍으로 디자인과 코드 사이의 간극을 제거한다.

01

Page

Hub, Brand, System, Dealer, Tools. 최상위 페이지명은 단수 영문 명사.

02

Layer

texture-linen, vignette, ambient-light. 배경 레이어는 kebab-case.

03

Component

ds-badge, ds-input, ch-step-card. 접두사(ds-/ch-) + kebab-case. 상태는 .is-active, .is-open.

04

Section

ch-section--dark, ch-section--alt, ch-section--accent. 섹션 변형은 BEM modifier.

Page/System
  Section/ch-section--dark
    Component/ds-badge.is-active
    Layer/texture-linen

09 — Data Rules

Data Display Rules

tabular-nums, right-align, --text only — 숫자가 신뢰를 전달하는 세 가지 절대 규칙.

01

Tabular Nums

font-variant-numeric: tabular-nums. 금액, 수량, 퍼센티지 모두 적용.

02

Alignment

텍스트: left-aligned. 숫자: right-aligned. 예외 없음.

03

Numeric Contrast

숫자는 --text 또는 accent color만 허용. --text-muted 숫자 사용 금지.

Live Example

Artist	Title	Estimate	Hammer	Status
Park Soo-keun	Washing Place	₩ 1,200,000,000	₩ 1,450,000,000	Sold
Lee Jung-seob	Bull	₩ 800,000,000	₩ 956,000,000	Sold
Kim Whan-ki	Untitled 05-IV-71 #200	₩ 3,500,000,000	₩ 4,120,000,000	Available

10 — Icons

Icon Registry

24×24 viewBox, stroke-width: 1.5, round cap/join, currentColor. Museum-inspired custom icons.

ViewBox 0 0 24 24

Stroke 1.5

Linecap round

Linejoin round

Fill none

Color currentColor

Display 18×18 px

seed-sprout

eye

upward-access

diamond

person-spark

rocket

compass-pen

microphone

ecg-waveform

person-check

magnifier-persona

package

instagram

presentation

☞ Custom icons: Brand → Branding History relation map. 범용 아이콘은 Lucide 사용.

Design Tokens.

Design Autopilot

Noise gets a place

Truth snaps

Value stays sacred

Public Sale

Private Sale

Color System

Gradient Tool

Motion Blur

Icon Fade-out

Background Atmosphere

Type System

8pt Rhythm & Grid

Snap-to-Truth

Charcoal Theme

Naming Convention

Page

Layer

Component

Section

Data Display Rules

Tabular Nums

Alignment

Numeric Contrast

Icon Registry