Overview
AI Meeting Notes 서비스 Tiro의 디자인 시스템
Tiro Design System
AI Meeting Notes 서비스 Tiro의 디자인 시스템 문서입니다. 컬러, 타이포그래피, 컴포넌트 등의 디자인 토큰과 사용 가이드라인을 제공합니다.
Foundations
디자인의 기초가 되는 토큰과 스타일 규칙입니다.
- Colors — Tironian Brown + Warm Stone 뉴트럴 스케일 (+ Rose, Amber, Lime, Blue 상태색)
- Typography — 듀얼 폰트: Averia Serif Libre(브랜드) + Pretendard JP(UI)
- Spacing — Tailwind 4px 그리드 기반 스케일
- Elevation — Flat-first, 그림자는 최소한
- Iconography — Lucide 아이콘 기준
- Layout — 여백, 정렬, 그리드 규율
Components
shadcn/ui 기반 Tiro 테마 컴포넌트입니다.
Primitives: Button · TextField · Textarea · Avatar · Badge · Chip · Separator · Progress · Skeleton · Spinner · Switch · Checkbox · RadioGroup · Tooltip · Popover · ScrollArea
Composites: Banner · Dialog · AlertDialog · DropdownMenu · Select · Tabs · Toast · Table · Breadcrumb · Accordion
Guidelines
브랜드 보이스, 비주얼, Do/Don't 가이드라인입니다.
- Brand Voice — Tiro의 성격과 타겟 페르소나
- Logo — 로고 구성 및 사용 규칙
- Photography — 사진 선택 기준
- Writing — UX 라이팅 원칙과 언어별 패턴
- Composition — 컴포넌트 조합 규칙
- Motion — 허용/금지된 모션 패턴
- Accessibility — 접근성 기준
- Localization — 한국어/영어/일본어 글로서리
핵심 원칙
| 항목 | 내용 |
|---|---|
| 브랜드 컬러 | Tironian Brown (#3A2018) — 유일한 액센트 컬러 |
| 중립색 | Warm Stone 계열 — cool gray/blue-gray 사용 금지 |
| 폰트 | Averia Serif Libre(브랜드/마케팅) + Pretendard JP(UI 텍스트) |
| 깊이 | Flat-first — 실제로 떠 있는 요소만 그림자 사용 |
| 다크 모드 | 없음 (라이트 모드 전용) |
| 컴포넌트 기반 | shadcn/ui 기본값 + Tiro 테마 오버라이드 |