# ON:GI Design System

> ON:GI 콘솔 · POS · KIOSK · 앱 · QR 주문 · 결제 · 이벤트 · 홈페이지 전 제품군을 위한 통합 디자인 시스템. 브랜드 · 컬러 · 타이포그래피 토큰부터 컴포넌트, D3 데이터 시각화, 플랫폼별 레이아웃 가이드까지 제공합니다.

ON:GI(온기)는 QR 하나로 기부 · 후원부터 주문 · 결제까지 연결하는 서비스입니다. 이 사이트는 ON:GI 전 제품이 공유하는 디자인 토큰(Primitive → Semantic → Platform), React 컴포넌트(Radix UI · Tailwind CSS v4 기반), D3.js 차트, 플랫폼별 레이아웃 규칙을 한국어로 설명합니다. 브랜드 퍼플은 다음 행동(Primary Action)에만 쓰고, 숫자 · 금액이 가장 먼저 읽히도록 설계하는 것이 핵심 원칙입니다.

## 시작하기

- [개요](https://ds.ongi.site)
- [디자인 원칙](https://ds.ongi.site/start/principles)
- [토큰 아키텍처](https://ds.ongi.site/start/tokens)

## 파운데이션

- [파운데이션 개요](https://ds.ongi.site/foundation)
- [가이드 — 브랜드 · 로고](https://ds.ongi.site/foundation/brand)
- [가이드 — 컬러](https://ds.ongi.site/foundation/color)
- [가이드 — 타이포그래피](https://ds.ongi.site/foundation/typography)
- [가이드 — 간격 · 레이아웃](https://ds.ongi.site/foundation/spacing)
- [가이드 — 라운드 · 그림자](https://ds.ongi.site/foundation/elevation)
- [가이드 — 아이콘](https://ds.ongi.site/foundation/iconography)
- [가이드 — 모션](https://ds.ongi.site/foundation/motion)
- [가이드 — 접근성](https://ds.ongi.site/foundation/accessibility)
- [가이드 — UX 라이팅](https://ds.ongi.site/foundation/writing)

## 컴포넌트

- [컴포넌트 개요](https://ds.ongi.site/components)
- [액션 — Button](https://ds.ongi.site/components/button)
- [액션 — Chip](https://ds.ongi.site/components/chip)
- [입력 — TextField](https://ds.ongi.site/components/text-field)
- [입력 — Select](https://ds.ongi.site/components/select)
- [입력 — Checkbox · Radio · Switch](https://ds.ongi.site/components/selection)
- [입력 — NumberPad](https://ds.ongi.site/components/number-pad)
- [데이터 표시 — Badge](https://ds.ongi.site/components/badge)
- [데이터 표시 — Card](https://ds.ongi.site/components/card)
- [데이터 표시 — List](https://ds.ongi.site/components/list)
- [데이터 표시 — DataTable](https://ds.ongi.site/components/table)
- [내비게이션 — Tabs · Segmented](https://ds.ongi.site/components/tabs)
- [내비게이션 — Pagination](https://ds.ongi.site/components/pagination)
- [내비게이션 — Stepper · Progress](https://ds.ongi.site/components/progress)
- [피드백 · 오버레이 — Dialog · BottomSheet](https://ds.ongi.site/components/dialog)
- [피드백 · 오버레이 — Toast · Alert](https://ds.ongi.site/components/toast)
- [피드백 · 오버레이 — Tooltip](https://ds.ongi.site/components/tooltip)
- [피드백 · 오버레이 — Skeleton · Empty](https://ds.ongi.site/components/skeleton)

## 데이터 시각화

- [시각화 원칙](https://ds.ongi.site/dataviz)
- [Line · Area](https://ds.ongi.site/dataviz/line)
- [Bar · Ranking](https://ds.ongi.site/dataviz/bar)
- [Combo (이중 축)](https://ds.ongi.site/dataviz/combo)
- [Donut](https://ds.ongi.site/dataviz/donut)
- [Heatmap](https://ds.ongi.site/dataviz/heatmap)
- [KPI · Sparkline · Gauge](https://ds.ongi.site/dataviz/kpi)

## 플랫폼

- [플랫폼 개요](https://ds.ongi.site/platforms)
- [업무용 웹 — 콘솔 Console](https://ds.ongi.site/platforms/console)
- [매장 단말 — POS](https://ds.ongi.site/platforms/pos)
- [매장 단말 — KIOSK](https://ds.ongi.site/platforms/kiosk)
- [고객 접점 — 앱 App](https://ds.ongi.site/platforms/app)
- [고객 접점 — QR 주문](https://ds.ongi.site/platforms/qr)
- [고객 접점 — 결제 Pay](https://ds.ongi.site/platforms/pay)
- [고객 접점 — 이벤트 Event](https://ds.ongi.site/platforms/event)
- [고객 접점 — 투표 Vote](https://ds.ongi.site/platforms/vote)
- [고객 접점 — 대기 · 예약 Waiting](https://ds.ongi.site/platforms/waiting)
- [웹사이트 — 홈페이지](https://ds.ongi.site/platforms/home)