Hub / System / Principles
DESIGN SYSTEM

Principles.

CHAART 브랜드의 디자인 원칙과 철학.

Brand Identity R=0 Philosophy Accessibility

01 — Brand Identity

브랜드 정체성

컬러 3색과 폰트 4종. 이 7개 요소가 CHAART의 시각 언어 전부다.

Core Colors

CHAART. Red

#961E23 — var(--red-brand)

CTA 버튼, 뱃지, 악센트 라인에만. 배경 사용 금지. 한 화면 최대 5% 면적.

Charcoal

#1A1A1A — var(--charcoal)

기본 텍스트, 다크 섹션 배경. 순수 #000 사용 금지. 리넨 텍스처와 함께 사용.

Warm Paper

#F0EDE6 — var(--bg)

페이지 기본 배경. 순백(#FFFFFF) 사용 금지. 갤러리처럼 따뜻하고 종이 같은 질감.

01

Red 면적 5% 상한 — CTA, 뱃지, 악센트 라인에만. 배경 · 텍스트 색상으로 사용 금지.

02

순백 금지 — #FFFFFF 대신 반드시 var(--bg) 또는 var(--bg-card) 사용.

03

외부 색상 도입 금지 — 파랑·보라·시안 등 브랜드 미정의 색상 사용 금지. 카테고리 구분은 타이포·아이콘·라벨로.

04

작품 이미지 위 오버레이 금지 — 작품 색감 왜곡 방지. 캡션은 반투명 Charcoal 아래에만.

05

다크 배경 #000 금지 — Charcoal(#1A1A1A) 또는 그보다 밝은 값만. 리넨 텍스처와 노이즈 유지.

06

토큰 없는 색상값 하드코딩 금지 — 모든 색은 var(--*) 토큰으로. 직접 hex 삽입 시 시스템 일관성 붕괴.

Typography

서체 철학

4종 서체가 각자의 역할을 갖는다. 섞지 않고, 위계를 지킨다.

Headline EN

Libre Baskerville

var(--serif). 영문 제목과 브랜드 스테이트먼트. 클래식 세리프로 권위와 신뢰 전달.

The art of collecting, refined.

UI · Body EN

Space Grotesk

var(--sans). 영문 UI 레이블, 버튼, 내비게이션. 기하학적이되 따뜻한 인상.

Design Autopilot System

Body KO

Pretendard Variable

var(--ko). 한글 본문과 UI 요소의 기반 서체. 가독성과 브랜드 톤을 동시에 확보.

작품이 흐르는 시장을 설계한다

Data · Label

TASA Orbiter

var(--mono). 수치, 레이블, 시스템 텍스트 전용. 대만 우주국 리브랜딩에서 탄생한 네오 그로테스크.

300 artworks · 40 MOUs

Typography Rules

01

서체 역할 고정 — Baskerville은 헤드라인 전용. 본문에 세리프 혼용 금지.

02

letter-spacing 하드코딩 금지 — 반드시 var(--ls-*) 토큰 사용. 0.04em 직접 기재 금지.

03

font-weight 일관성 — 헤드라인 400(Baskerville 특성), UI 700, 본문 400/500. 임의 weight 혼용 금지.

04

TASA는 데이터에만 — 일반 본문에 TASA Orbiter 사용 금지. 수치·레이블·시스템 텍스트 전용.

02 — R=0 Philosophy

직각 철학

CHAART는 직각(R=0) 브랜드다. 둥근 모서리는 시스템을 약하게 보이게 한다. 예외는 딱 3종이다.

직각은 단순히 스타일이 아니다. 신뢰와 정밀함의 시각 언어다. 갤러리의 액자, 경매 낙찰 슬립, 계약서의 테두리 — 미술 거래의 모든 공식 문서는 직각이다. CHAART의 UI는 그 맥락을 이어받는다.

허용 Radius 3종

토큰 값 용도 사용 조건
--radius-hover 3px hover / focus 피드백 :hover 및 :focus 상태에서만 적용. 기본 상태 금지.
--radius-pill 100px 캡슐형 요소 GNAV 바, pill-tag 라벨, CTA 버튼에만 한정. 카드·모달·드롭다운 적용 금지.
--radius-round 50% 완전한 원 아바타, 상태 인디케이터에만. 정사각형 요소에만 의미 있음.

Do / Don't

Do — 직각 카드

작품 상세

border-radius: 0. 갤러리 프레임처럼 단단하고 신뢰감 있다.

border-radius: 0 — 기본값 또는 생략

Don't — 임의 라운드

작품 상세

border-radius: 12px. 가볍고 범용적인 인상. CHAART 브랜드와 충돌한다.

border-radius: 12px — 절대 금지

절대 금지 사항

New Component Checklist

1

border-radius 속성을 쓰려 한다면 먼저 위 허용 3종 표를 확인한다.

2

해당 없으면 border-radius: 0 또는 생략.

3

확신이 없으면 0으로 두고 디자이너에게 확인. AI가 임의로 라운드를 추가하지 않는다.

03 — Accessibility

접근성

화면을 눈으로 볼 수 없어도, 키보드만 써도, 손이 불편해도 — 모든 사용자가 동등하게 접근할 수 있어야 한다.

ARIA 필수 속성

<nav>에 aria-label 필수.
활성 링크에 aria-current="page".
토스트·알림에 role="status" + aria-live="polite".

Skip Link

모든 페이지에 "본문으로 건너뛰기" 링크 포함. BaseLayout에서 제공. 시각적으로 숨기되 포커스 시 표시(.skip-link:focus). 키보드 사용자의 필수 진입로.

터치 타겟 최소 44px

--touch-target-min: 44px 토큰. 버튼·아이콘·링크의 클릭 영역은 44×44px 이상 확보. WCAG 2.5.5 준수.

폼 접근성

모든 입력 필드에 <label> 연결 필수. 아이콘 전용 버튼에 aria-label 필수. placeholder로 label 대체 금지.

Touch Target Demo

44
44px × 44px 최소 터치 타겟. 엄지 손가락 끝 크기 기준.
28
28px × 28px — 부적합 모바일에서 오탭(mis-tap) 발생. 사용 금지.

토큰: --touch-target-min
값: 44px
기준: WCAG 2.5.5

ARIA Code Examples

/* nav aria-label */
<nav class="sys-nav" aria-label="글로벌 네비게이션">

/* 활성 탭 aria-current */
<a class="sys-tab is-active" aria-current="page">System</a>

/* 토스트 role + aria-live */
<div class="ds-toast" role="status" aria-live="polite">

/* 아이콘 전용 버튼 */
<button aria-label="메뉴 닫기">
  <svg aria-hidden="true">...</svg>
</button>

/* 폼 label 연결 */
<label for="search-input">작품 검색</label>
<input id="search-input" type="search" class="ch-input">

Rules Summary

  • placeholder 텍스트로 label 역할을 대체하는 것 — label을 반드시 명시적으로 제공
  • 아이콘 전용 버튼에 aria-label 없이 배포하는 것 — 스크린 리더가 기능을 알 수 없음
  • 터치 타겟을 44px 미만으로 제공하는 것 — 운동 장애 사용자 접근성 차단
  • 색상만으로 상태를 구분하는 것 — 색맹 사용자를 위해 텍스트·아이콘 병행 필수
  • 포커스 아웃라인을 outline: none으로 제거하는 것 — 키보드 사용자의 현재 위치 표시

04 — Principles

Brand Identity · R=0 Philosophy · Accessibility

← Components Tokens →