미술 시장의 신뢰와 품격을 코드로 번역하는 디자인 시스템. 43개 컴포넌트, 6개 패턴, 3개 테마로 구성된 토큰 기반 UI 라이브러리.
01 — Brand
컬러, 서체, 모티프. CHAART 브랜드의 시각적 정체성과 사용 규칙.
02 — Foundations
토큰 기반 디자인 기초. Color, Typography, Spacing, Radius, Elevation.
03 — Tokens
CSS Variables 전체 사전. Primitive, Semantic, Component 3계층 구조.
04 — Components
43개 표준 컴포넌트. 상태 매트릭스, 사이즈 변형, 반응형 가이드 포함.
05 — Patterns
6가지 조합 규칙. 페이지 어셈블리, 섹션 해부, 스페이싱, 그리드 선택.
06 — Templates
6개 페이지 템플릿. Dashboard, Explorer, Landing, List, Detail, Form.
01
모든 스타일은 CSS 변수를 통해. 하드코딩 금지. tokens.css를 수정하면 전체 시스템에 즉시 반영된다.
02
R=0이 기본. 미술 시장의 엄정함을 반영한다. hover 시에만 미세한 radius 허용.
03
4개 서체만 사용. Pretendard(본문 KO), Space Grotesk(본문 EN), Libre Baskerville(세리프), TASA Orbiter(모노).
04
Light(기본), Charcoal(다크), Paper(따뜻한 크림). 동일 토큰, 다른 값. 테마 전환은 data-theme 속성 하나로.
/* 1. Import tokens */ @import url('tokens.css'); /* 2. Use semantic tokens */ .my-component { color: var(--text); background: var(--bg-card); border: 1px solid var(--border); padding: var(--space-4); font-family: var(--sans); } /* 3. Theme switching */ body[data-theme="charcoal"] { /* dark mode */ } body[data-theme="paper"] { /* warm cream */ }