# WING-OPS 디자인 시스템

## 개요

WING-OPS UI 디자인 시스템의 비주얼 레퍼런스 카탈로그.
Google Stitch MCP로 생성된 스크린을 기반으로 일관된 UI 구현을 유도한다.

## Stitch 프로젝트

- **프로젝트명**: WING-OPS Design System v1
- **프로젝트 ID**: `5453076280291618640`

## 스크린 목록

| # | 스크린 | Screen ID | 용도 |
|---|--------|-----------|------|
| 1 | Design Tokens | `ce520225d85c4c38b2024e93ec6a4fb2` | 색상, 타이포그래피, 간격, 라운딩 토큰 |
| 2 | Component Catalog (Buttons/Badges) | `42fa9cf1a3d341a7972a1bc10ba00a8c` | 버튼 variant, 뱃지, 아이콘 버튼 |
| 3 | Form Components | `7331ad8a598f4cc59f62a14226c1d023` | 입력, 선택, 날짜, 토글, 폼 레이아웃 |
| 4 | Table & List Patterns | `5967382c70f9422ba3a0f4da79922ecf` | 데이터 테이블, 사이드바 리스트, 페이지네이션 |
| 5 | Modal Catalog | `440be91f8db7423cbb5cc89e6dd6f9ca` | 모달 3사이즈, 확인 다이얼로그, 폼 모달 |
| 6 | Operational Shell (Layout) | `86fd57c9f3c749d288f6270838a9387d` | TopBar, SubMenu, 3컬럼 레이아웃 |
| 7 | Container & Navigation | `201c2c0c47b74fcfb3427d029319fa9d` | 카드, 섹션, 탭바, KV 행, 헤더바 |

## 디자인 토큰 요약

### 배경색
| 토큰 | Tailwind | 값 | 용도 |
|------|----------|-----|------|
| `--bg0` | `bg-bg-0` | `#0a0e1a` | 페이지 배경, 입력 배경 |
| `--bg1` | `bg-bg-1` | `#0f1524` | 사이드바, 패널 |
| `--bg2` | `bg-bg-2` | `#121929` | 테이블 헤더 |
| `--bg3` | `bg-bg-3` | `#1a2236` | 카드, 버튼(secondary) |
| `--bgH` | `bg-bg-hover` | `#1e2844` | 호버 상태 |

### 텍스트
| 토큰 | Tailwind | 값 | 용도 |
|------|----------|-----|------|
| `--t1` | `text-text-1` | `#edf0f7` | 주요 텍스트 |
| `--t2` | `text-text-2` | `#b0b8cc` | 보조 텍스트 |
| `--t3` | `text-text-3` | `#8690a6` | 비활성, 플레이스홀더 |

### 보더
| 토큰 | Tailwind | 값 |
|------|----------|-----|
| `--bd` | `border-border` | `#1e2a42` |
| `--bdL` | `border-border-light` | `#2a3a5c` |

### 강조색
| 토큰 | Tailwind | 값 | 용도 |
|------|----------|-----|------|
| `--cyan` | `text-primary-cyan` | `#06b6d4` | Primary accent, 활성 상태 |
| `--blue` | `text-primary-blue` | `#3b82f6` | Secondary accent |
| `--purple` | `text-primary-purple` | `#a855f7` | Tertiary accent |

### 상태색
| 토큰 | 값 | 용도 |
|------|-----|------|
| `--red` | `#ef4444` | 위험, 삭제 |
| `--orange` | `#f97316` | 주의 |
| `--yellow` | `#eab308` | 경고 |
| `--green` | `#22c55e` | 정상, 성공 |

### 타이포그래피
| 크기 | 용도 | 폰트 |
|------|------|------|
| 9px | 메타정보 | Noto Sans KR |
| 10px | 테이블/KV 데이터 | Noto Sans KR |
| 11px | 입력, 버튼, 값 표시 | Noto Sans KR |
| 13px | 섹션 헤더 | Noto Sans KR, bold |
| 15px | 패널 타이틀 | Noto Sans KR, bold |
| 수치 데이터 | 모든 숫자 | JetBrains Mono |

### Border Radius
| 크기 | 값 | 용도 |
|------|-----|------|
| sm | 6px | 버튼, 입력, 소형 카드 |
| md | 10px | 카드, 모달, 패널 |