CHAART. OS — Foundations

Color Tokens

Brand Red

--red-brand

Charcoal

--charcoal

Paper White

--bg

Text Secondary

--text-secondary · 5.07:1

Text Muted

--text-muted · 3.22:1

Text Caption

--text-caption · 4.58:1

Red UI

--red-ui

Gold VIP

--color-gold

Paper Warm

--paper

Success

--color-success

Typography

Headline

Collect with confidence.

Body · UI (KO)

미술품이 다음 주인을 만나는 구조. 기술로 만들고, 품위로 완성한다.

Body · UI (EN)

The art of collecting, refined by data.

Data · Label

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

Spacing Scale (4px base)

--space-1 · 4px

--space-2 · 8px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

--section-gap · 140px

Border Radius

0px (default)

--radius-2

--radius-xs

--radius-md

--radius-round · 50%

Elevation (Shadow)

Level 0

Level 1

Level 2

Level 3

Size Scale

컴포넌트 높이 · 패딩 · 폰트 · 아이콘을 5단계 스케일로 통일합니다.
한 단계를 선택하면 4가지 값이 동시에 결정됩니다.

24px · 8px · var(--text-xs) · 14px

--size-xs-*

32px · 12px · var(--text-13) · 16px

--size-sm-*

40px · 16px · var(--text-sm) · 18px

--size-md-* (default)

48px · 20px · var(--text-base) · 20px

--size-lg-*

56px · 24px · var(--text-md) · 24px

--size-xl-*

Scale	Height	Padding-X	Font	Icon	Use Case
`xs`	24px	8px	`--text-xs`	14px	인라인 배지, 밀집 테이블 액션
`sm`	32px	12px	`--text-13`	16px	보조 버튼, 필터 칩, 사이드바
`md` ★	40px	16px	`--text-sm`	18px	기본 버튼, 인풋, 드롭다운
`lg`	48px	20px	`--text-base`	20px	히어로 CTA, 모바일 터치
`xl`	56px	24px	`--text-md`	24px	풀블리드 CTA, 온보딩

모바일 인터랙티브 요소 최소 터치 영역: 44 × 44px (WCAG 2.5.5). SM 이하는 패딩으로 영역 확보 필수.

Breakpoints

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

Mobile

360px

1컬럼 · 사이드바 숨김 · 바텀시트

Tablet

768px

2컬럼 · 사이드바 접힘 · 탭바

Desktop

1024px

풀 네비 · 3-4컬럼 · 사이드바 펼침

Wide

1440px

max-content · 여백 확대

Mobile · 1col

Tablet · 2col

Desktop · 3col

Wide · 4col

Dark System Tokens

Surface Scale

surface-base

--black

surface-100

--text

surface-200

--charcoal

surface-300

--text

surface-400

--charcoal

Glass & Blur

blur-sm · 8px

blur-md · 12px

blur-lg · 16px

mask-fade

linear-gradient →

Dark Border & Glow

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 --red-brand

Data Display Rules

숫자(금액 / 수량 / 퍼센트)는 신뢰의 핵심 요소. 아래 세 가지 규칙을 모든 데이터 화면에 강제합니다.

01 — Tabular Nums

숫자 데이터에는 font-variant-numeric: tabular-nums를 적용합니다. 동일한 자릿수 폭으로 세로 정렬이 보장되며 값 변동 시 레이아웃 쉬프트가 없습니다.

DO — 금액 / 퍼센트 / 수량 열 DON'T — proportional figures로 금액 표시

02 — Alignment

텍스트(이름 / 제목)는 좌측 정렬, 숫자(금액 / 수량)는 우측 정렬. 상태 배지는 좌측 정렬, 열 너비를 고정하여 배지 흔들림을 방지합니다.

DO — 숫자 열 text-align: right DON'T — 금액을 좌측 정렬

03 — Numeric Contrast

숫자 데이터에는 --text(기본) 또는 강조 컬러만 허용. --text-muted(3.22:1)는 WCAG 2.1 AA(4.5:1)를 미달하므로 금액 / 퍼센트에 사용 금지. Muted 톤은 18px 이상 대형 텍스트 보조 설명에만 허용됩니다.

DO — 숫자는 var(--text) 고정 DON'T — 금액에 var(--text-muted) 사용

Live Example

작가	작품명	감정가	낙찰가	상태
박수근	빨래터	₩ 1,200,000,000	₩ 1,450,000,000	Sold
이중섭	황소	₩ 800,000,000	₩ 956,000,000	Sold
김환기	무제 05-IV-71 #200	₩ 3,500,000,000	₩ 4,120,000,000	Available
천경자	미인도	₩ 2,000,000,000	—	Pending
장욱진	나무와 두 사람	₩ 450,000,000	₩ 512,000,000	Sold

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)

모든 UI의 절대 규칙.