Hub / System / Tokens
DESIGN SYSTEM

Tokens

시스템의 절대 규칙. Color, Typography, Spacing, Layout, Motion, Icon — 하나의 토큰이 변하면 전체가 변합니다.

01 — Philosophy

Design Autopilot

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

Law 01

Noise gets a place

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

Law 02

Truth snaps

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

Law 03

Value stays sacred

--red-brand #961E23은 포인트와 장식적 요소에 적극 사용한다. CTA 버튼, 네비게이션 활성, 호버 강조, 에러, 배지 전체 허용. 배경 전체를 레드로 채우는 것만 지양한다.

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 --orange-50 --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

TokenValueContrastUsage
--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 위의 텍스트
--text-disabled rgba(26,26,26,0.35) — 비활성 버튼 텍스트 — CTA disabled state

Surface & Background

bg #FAFAF8 --bg
bg-card #ffffff --bg-card
warm-bg #f9f7f4 --warm-bg
bg-secondary #f5f3f0 --bg-secondary
bg-code rgba(17,17,17,0.03) --bg-code

Border & Alpha Scale

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

Brand Alpha Scale

TokenValueUsage
--red-brand-ghostrgba(150,30,35,0.04)Subtle tint, sidebar active bg
--red-brand-subtlergba(150,30,35,0.07)Background atmosphere
--red-brand-mutedrgba(150,30,35,0.12)Pattern accent
--red-brand-dimrgba(150,30,35,0.20)Overlay, blurred accent
--red-brand-halfrgba(150,30,35,0.40)Toggle active shadow
--red-brand-visiblergba(150,30,35,0.70)Visible on dark, decorative labels
--red-brand-strongrgba(150,30,35,0.80)강조 레드, 다크 배경 위 section label

Orange Primitive Scale

TokenValueUsage
--orange-40#92400eDark orange — --color-warning alias
--orange-50#d97706Badge warning text / badge accent text — --badge-warning-text, --badge-accent-text 바인딩
--orange-55#FF6F00Wireframe marker accent — --color-wireframe alias
--color-wireframevar(--orange-55)BO 스토리보드 wireframe zone 마킹 색상 — #FF6F00 직접값 치환용 시맨틱 토큰
--color-wireframe-ghostrgba(255,111,0,0.06)Wireframe 오렌지 ghost tint — BO 백오피스 zone 배경 극세 강조. --color-wireframe의 alpha 0.06 변형
--orange-60#EF6C00Medium orange
--orange-70#F9A825Warm amber
--orange-80#EAB308Golden yellow — --color-warning-alt alias
--orange-90#FFF3E0Warning background — --badge-warning-bg alias

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
CategoryTextBackgroundBorderAlt
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)--color-error-toast JS 동적 에러 토스트 전용 / --overlay-dim 바텀시트·모달 딤 오버레이
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)—

ERP Semantic (Dealer)

TokenValueUsage
--badge-success-bgrgba(34,197,94,0.1)Success badge background (alpha-based)
--badge-success-text#2E7D32Success badge text
--badge-warning-bg#FFF3E0Warning badge background
--badge-warning-textvar(--orange-50) #d97706Warning badge text
--badge-accent-bgrgba(217,119,6,0.08)Accent badge background (orange alpha-based)
--badge-accent-textvar(--orange-50) #d97706Accent badge text
--red-brand-whisperrgba(150,30,35,0.02)행 하이라이트, 선택 상태 극세 배경
--alpha-3rgba(0,0,0,0.03)Skeleton 플레이스홀더, 극세 분리선
--badge-danger-bg#FFEBEEDanger badge background
--badge-danger-text#C62828Danger badge text
--badge-info-bg#E3F2FDInfo badge background
--badge-info-text#1565C0Info badge text
--bg-subtle#F9FAFBTable header, modal sub-column
--bg-skeleton-from#f0f0f0Skeleton loading start
--bg-skeleton-to#e0e0e0Skeleton loading end
--text-faint#999999Label only (≥12px + 500wt)
--gold-accent#ffd700Welcome banner accent

Status States

TokenValueUsage
--status-active#3E4C59Active state
--status-closed#6b7280Closed/archived
--status-pending#9ca3afPending/waiting
--status-online#22c55eOnline indicator
--status-online-alt#16a34aOnline (darker)
--status-dormant#d1d5dbDormant/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%) — 린넨 텍스처 위 은은한 래디얼.

NameCSSContext
Motion Blurlinear-gradient(90deg, var(--red-brand), transparent)Hero entrance, panel slide
Icon Fademask-image: linear-gradient(to bottom, black 60%, transparent)Museum icons, relation map
Atmosphereradial-gradient(ellipse at 30% 0%, rgba(150,30,35,0.07), transparent 60%)Page background layers
Glass BGrgba(250,250,248,0.85) + blur(12px)Nav, modals, prompt bar
Glass Darkrgba(11,11,11,0.85) + blur(12px)Dark theme glass

04 — Typography

Type System

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

Font Stacks

TokenStackRole
--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 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif 영문 body text (Pretendard 통합)
--mono 'TASA Orbiter', 'Pretendard Variable', 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

H1 Section

작품으로 연결되는 순간

H2 Sub-section

소장의 가치를 더하다

Body

차트는 미술 시장의 데이터를 기반으로 작품의 가치를 분석하고, 컬렉터와 갤러리를 연결합니다.

Body SM

작품 상태, 보증서, 전시 이력을 확인하세요.

Caption

최종 수정 2026년 3월 27일 · 조회 1,204

Meta / Label

COLLECTION · 12 ARTWORKS

RoleSizeWeightLine HeightLetter Spacing
H1 Sectionclamp(28px, 4vw, 48px)7001.06-0.025em
H2 Sub-section--text-lg · 20px7001.25-0.01em
Body--text-base · 15px4001.750
Body SM--text-sm · 14px4001.750
Caption--text-xs · 12px4001.50.005em
Meta / Label--text-2xs · 10px500~6001.40.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)

TokenValueUsage
--text-2xs10pxMini label
--text-xs12pxLabel minimum
--text-sm14pxCaption minimum
--text-base15pxBody standard
--text-md17pxIntermediate
--text-lg20pxLarge heading
--text-xl24pxSection title
--text-2xl28pxHero subtitle
--text-3xl36pxHero title
--text-4xl48pxDisplay hero

Type Scale Extensions (ERP/Compact)

TokenValueUsage
--text-99pxERP mini meta
--text-1111pxCompact label
--text-1313pxTight UI
--text-1616pxMedium body
--text-1717pxSub-heading
--text-2020pxMedium title
--text-2626pxLarge subtitle
--text-3232pxSection heading

Letter Spacing — Tracking Tokens

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

TokenValueUsage
--ls-tightest-0.04em대형 디스플레이, 히어로 타이틀
--ls-tight-0.02em서브 헤드라인, 중간 타이틀
--ls-normal0본문 기본값
--ls-wide0.04em미세 트래킹, 작은 라벨
--ls-medium0.1em중간 트래킹, 숫자/데이터 UI
--ls-wider0.08em버튼, UI 라벨, 네비 아이템
--ls-widest0.12em섹션 헤더, 모노 대문자 라벨
--ls-ultra0.18em히어로 라벨, 장식적 대문자
--ls-tightest

Collect with confidence.

--ls-tight

서브 헤드라인 타이틀

--ls-medium

숫자 · 데이터 UI

--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-1h
6px · 인라인 gap, 밀집 레이아웃
--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

TokenValueUsage
--card-px36pxCard horizontal padding
--card-py44pxCard vertical padding
--content-px64pxContainer horizontal padding
--content-max1280px.ch-container max-width
--section-gap140pxSection spacing
--content-bottom-safe120px탭바 + 여유 공간 safe area (모바일 하단)

Size Scale (XS–XL)

SizeHeightPadding-XFontIcon
XS --size-xs-height · 24px --size-xs-px · 8px --size-xs-font · 12px --size-xs-icon · 14px
SM --size-sm-height · 32px --size-sm-px · 12px --size-sm-font · 13px --size-sm-icon · 16px
MD --size-md-height · 40px --size-md-px · 16px --size-md-font · 14px --size-md-icon · 18px
LG --size-lg-height · 48px --size-lg-px · 20px --size-lg-font · 16px --size-lg-icon · 20px
XL --size-xl-height · 56px --size-xl-px · 24px --size-xl-font · 17px --size-xl-icon · 24px

Live Preview

12-Column Grid · 24px Gap

1
2
3
4
5
6
7
8
9
10
11
12
PropertyValueNote
Frame Width1920pxFigma design frame
SafeArea (horizontal)96px each sideContent margin
Content Width1728px (1920 − 96×2)Actual content area
Max-width (CSS)var(--content-max) · 1280px.ch-container
Columns12—
Column Gap24px—

Border Radius

0px (default)

--radius-hover · 3px

--radius-pill · 100px

--radius-round · 50%

TokenValuePhilosophy
--radius-hover3pxHover only: micro-softening
--radius-pill100pxChips, tags, pill buttons
--radius-round50%Avatars, circular elements

05-B — Breakpoints

Responsive Grid

반응형 레이아웃 전환점. CSS 변수는 @media에 사용할 수 없으므로 매직넘버를 아래에 정의합니다.

Mobile
360px
1컬럼 · 사이드바 숨김 · 바텀시트
Tablet
768px
2컬럼 · 사이드바 접힘 · 탭바
Desktop
1024px
풀 네비 · 3-4컬럼 · 사이드바 펼침
Wide
1440px
max-content · 여백 확대
Mobile · 1col
Tablet · 2col
Desktop · 3col
Wide · 4col

06 — Motion

Snap-to-Truth

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

⚠ No-Bounce Policy

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

Easing Curves

TokenValueUsagePreview
--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
--ease-hero-reveal cubic-bezier(0.25, 0, 0.15, 1) Hero 타이틀 등장 + blur→sharp reveal 전용

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
--dur-toast-stay
3000ms
토스트 기본 노출 시간
--dur-toast-stay-long
6000ms
에러/중요 알림 장기 노출

Scroll Reveal Pattern

BLUR → SHARP REVEAL

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

TokenValueUsage
--reveal-blur6px초기 블러 강도 (숨겨진 콘텐츠)
--reveal-shift8px초기 Y-오프셋 (아래→위 등장)
--reveal-easecubic-bezier(0.05, 0.8, 0.15, 1)감속 커브 — 빠른 출발, 부드러운 안착
--reveal-dur-char450ms글자 단위 등장 속도
--reveal-dur-blur500ms블러 해제 (char보다 약간 길게)
--reveal-dur-line600ms줄/문장 단위 등장
--reveal-dur-fade800ms느린 페이드인 (어트리뷰션 등)

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

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

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

— CHAART.

Hero Entrance Sequence

PAGE-LOAD SEQUENTIAL REVEAL

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

순서요소DelayDuration방식
1로고0.2s1.2sblur→sharp + scale
2라벨0.5s0.9sfadeUp
3타이틀 (글자별)0.6s–1.86s1600msblur(3px)→sharp + opacity
4서브텍스트3.0s1.2s순수 opacity fade
5검색창3.8s1.2s순수 opacity fade
6스크롤 힌트4.6s1.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
TokenValue
--shadow-xs0 1px 2px rgba(0,0,0,0.04)
--shadow-sm0 2px 8px rgba(0,0,0,0.04)
--shadow-md0 4px 16px rgba(0,0,0,0.06)
--shadow-lg0 8px 24px rgba(0,0,0,0.08)
--shadow-xl0 16px 40px rgba(0,0,0,0.12)
--shadow-brand0 4px 16px rgba(150,30,35,0.10)
--shadow-brand-lg0 12px 32px rgba(150,30,35,0.12)
--drop-shadow-smdrop-shadow(0 1px 3px rgba(0,0,0,0.20))
--drop-shadow-mddrop-shadow(0 2px 6px rgba(0,0,0,0.28))
--drop-shadow-ambientdrop-shadow(0 4px 12px rgba(0,0,0,0.35))
--focus-ring0 0 0 2px var(--bg), 0 0 0 4px rgba(150,30,35,0.3)
--focus-ring-sm0 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.

TokenLight ValueDark Override
--bg#FAFAF8#0a0a0a
--bg-card#ffffff#141414
--text#111111#F0F0F0
--text-secondary#555555#A5A5A5
--text-muted#888888#6B6B6B
--charcoal#1A1A1A#F0F0F0
--borderrgba(17,17,17,0.07)rgba(255,255,255,0.07)
--border-strongrgba(17,17,17,0.14)rgba(255,255,255,0.13)
--glass-bgrgba(250,250,248,0.85)rgba(10,10,10,0.82)
--glass-bg-darkrgba(10,10,10,0.82)— (dark theme only)
--glass-blur12px12px (shared)
--text-on-dark—rgba(255,255,255,0.85) — 다크 섹션 주 텍스트
--text-on-dark-muted—rgba(255,255,255,0.50) — 다크 섹션 보조 텍스트
--text-on-dark-faint—rgba(255,255,255,0.30) — 다크 섹션 희미한 텍스트
--border-on-dark—rgba(255,255,255,0.08) — 다크 배경 위 보더

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 Matrix

동일 컴포넌트가 테마 / 밀도 조합에 따라 어떻게 변화하는지 비교합니다.

Light · Comfortable

Button Available 본문 텍스트
--bg --text --space-unit: 8px · --text-base: 15px

Light · Compact

Button Available 본문 텍스트
--bg --text --space-unit: 6px · --text-base: 14px

Charcoal · Comfortable

Button Available 본문 텍스트
--black --paper --space-unit: 8px · --text-base: 15px

Charcoal · Compact

Button Available 본문 텍스트
--black --paper --space-unit: 6px · --text-base: 14px

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 아이콘 + 커스텀 아이콘 통합 목록 → comp-icons.html

Artwork Thumbnail Tokens

이미지 컨테이너 전용 사이즈 토큰. 사이즈 스케일(XS~XL, interactive component용)과 별개 카테고리. 작품 이미지에 스코프 한정.

토큰값라이브 프리뷰용도
--artwork-thumb-sm 72px
72
 폼/리스트 내 작품 식별 썸네일 — 보조 맥락
--artwork-thumb-lg 120px
120
 확인/완료 화면 작품 썸네일 — 컨텍스트 보강

11 — Contrast

WCAG Contrast Rules

WCAG 2.1 AA 기준. 요소별 최소 대비 비율과 허용 토큰을 명시합니다.

4.5:1

Normal Text (≤18px) — WCAG 2.1 AA

18px 미만 일반 텍스트는 최소 4.5:1 대비 필수. --text 또는 --text-secondary만 사용. --text-muted(3.22:1)는 본문 크기에서 사용 금지.

--text --text-secondary
3:1

Large Text (≥18px Bold / ≥24px) — WCAG 2.1 AA

18px 이상 bold 또는 24px 이상 텍스트는 3:1 대비면 충분. --text-muted(3.22:1)를 보조 설명에 허용.

--text --text-secondary --text-muted
3:1

Interactive Components — WCAG 2.1 AA (1.4.11)

버튼, 인풋, 링크 등 인터랙티브 요소의 경계선과 포커스 인디케이터는 배경 대비 최소 3:1 유지. --border-strong 이상을 사용하세요.

--border-strong --red-brand
N/A

Decorative / Disabled — WCAG 2.1 (1.4.3 예외)

순수 장식 요소와 비활성(disabled) 상태에는 대비 요구사항 없음. 단, disabled는 opacity 또는 --text-muted로 시각 구분 필수.

4.5:1+

Numbers / Amounts — WCAG 2.1 AAA 준수 권장

금액 / 수량 / 퍼센트는 크기 무관 항상 --text 사용. Data Display Rule 03(Numeric Contrast)과 교차 적용. 리세일 플랫폼에서 숫자 가독성은 신뢰도와 직결됩니다.

--text (mandatory)

Next Step

Build with these tokens.

토큰은 기반이다. 컴포넌트가 이것들에 생명을 부여한다.

Explore Components