# v0.5.1 사용 규칙

## 브랜드와 테마
심볼 SVG의 형태·붙어 있는 획·블루·오렌지 점을 보존합니다. 비율을 변형하지 않습니다.
브랜드 원색과 UI 액션색은 다릅니다. 밝은 화면의 흰 버튼 글자는 충분한 대비를 위해 진한 액션색을 사용합니다.
`data-brand="blue|orange"`, `data-dark="true|false"`로 4가지 테마를 표현합니다.
Noto Sans KR 400/500/600/700. 본문 14px, 긴 글 16px/1.85, 보조 글 12px 이상.

## 팔레트와 UI 역할
팔레트는 blue/teal/orange/purple/rose와 각 tint를 제공합니다. 색에 특정 지표를 전역으로 고정하지 않습니다.
공통 UI 역할은 primary(주요 동작), secondary/neutral(보조·취소·닫기), danger/error(삭제·위험·오류), success/warning입니다.
프로젝트가 고른 지표와 색의 매핑은 해당 프로젝트에서 일관되게 유지합니다. 상세 팔레트와 예시는 [컬러 기준](COLORS.md)을 참고하세요.
증감과 긍정/부정을 동일시하지 않고 라벨·숫자·기호를 함께 표시합니다.
차트는 5개 범주 팔레트 또는 named palette를 사용하고, 라벨·범례·필요 시 선 모양으로 구분합니다.

## 공통 메뉴와 수치 강조
Navigation / NavigationLink: sm/md/lg, 선택적 아이콘, aria-current=page. 경로 매칭은 호스트가 담당합니다.
DataHighlight: sm/md/lg, primary/neutral 또는 팔레트 이름으로 색 선택, 단위·보조 변화율·자료 없음 상태.
HighlightPanel: 관련 수치를 묶는 표면과 상단 강조선. 배치와 지표 의미는 호스트가 담당합니다.
Canvas 차트는 readChartTheme / observeChartTheme로 공통 팔레트·폰트·선·그리드·범례·툴팁 스타일을 읽습니다.

## 형태와 레이아웃
카드 16px, 버튼 M 10px, 모달 20px, 간격 4px 기반.
카드: 독립 항목·탐색. 통합 패널: 관련 지표 묶음. 표/리스트: 비교. 본문: 제목·여백·구분선.
모든 콘텐츠를 카드로 감싸지 않습니다. 그림자는 떠 있는 메뉴·모달·선택적인 카드에 사용합니다.
화면 밀도는 글자 가독성을 희생하지 않고 패딩과 행간격으로 조절합니다.

## 크기와 상태
버튼 S/M/L 높이 32/40/48px. 모든 요소에 억지로 S/M/L을 적용하지 않습니다.
체크/라디오 시각 크기는 20px, 스위치는 44x26px. 모바일에서는 라벨을 포함해 터치 영역을 충분히 확보합니다.
기본·hover·focus-visible·disabled·invalid·loading은 의미가 있는 요소에만 적용합니다.
disabled는 동작을 차단하고 상태를 명확히 표시합니다. loading은 중복 제출을 차단합니다.

## 접근성과 동작
일반 텍스트 대비 4.5:1, 큰 텍스트와 필수 UI 경계 3:1을 검증 목표로 합니다.
전체 화면/스크린리더 인증 완료를 뜻하지 않습니다. 현재 쇼케이스는 프로토타입입니다.
Select: 방향키/Home/End 이동, Enter/Space 선택, Esc 닫기, Tab 이동, 선택 불가 항목 건너뛰기.
Tabs: 방향키/Home/End. Dialog: Escape, 포커스 가두기/복귀. Toast는 비차단 상태 메시지.
색상에만 의존하지 않고 라벨과 오류 설명을 제공합니다.

## Figma와 코드 관리
토큰 JSON이 원본입니다. Figma 수정은 같은 파일·변수·컴포넌트 ID를 보존하여 반영합니다.
타이포·색상 수정은 비교적 빠르지만 구조·프로퍼티 변경은 연결된 인스턴스와 코드 검토가 필요합니다.
무료 플랜은 파일간 라이브러리 배포·멀티 변수 모드를 전제로 하지 않습니다. 동일 파일 안에서 인스턴스를 씁니다.
React 기본 컴포넌트는 v0.2부터 제공합니다. 바닐라 JS 동작 API, Vue 래퍼와 Code Connect는 아직 제공하지 않습니다. CSS 클래스는 프레임워크와 무관하게 사용합니다.

## 공개 미리보기
실제 서비스 데이터·백엔드 연결 없음. 예시 데이터는 가상 데이터입니다.
개인별 선택은 브라우저에서만 동작하며 의견을 서버로 전송하지 않습니다.

## 배경 농도와 수치 강조

색은 blue/teal/orange/purple/rose/gray로 제공합니다. 각 색의 기본색은 글자·숫자,
tint는 연한색, subtle은 더 옅은색입니다. 의미를 전역으로 강제하지 않습니다.
DataPanel은 subtle 배경과 중립 본문, DataBadge는 tint 배경과 기본색 글자를 사용합니다.
DataBadge 안에 DataHighlight를 조합해 핵심 숫자를 강조합니다. 넓은 영역 안에서
작은 배지가 구분되도록 두 농도를 분리하며 라이트·다크에서 같은 API를 사용합니다.
기본 차트 series는 다섯 색을 유지하고 회색은 필요할 때 선택합니다.

작은 변경은 patch 버전으로 올립니다. 기존 태그를 이동하지 않으며 소비 앱은
새 태그를 지정해 설치한 뒤 자체 테스트·빌드·배포합니다. Git push나 패키지 설치만으로
소비 앱의 운영 화면이 갱신되지는 않습니다.