# Design System — [프로젝트명]
> 이 문서는 [프로젝트명]의 디자인 시스템을 정의합니다.
> 템플릿 출처: /home/jay/workspace/resources/design-md/TEMPLATE.md

## 작성 가이드
- 이 템플릿의 각 섹션에 프로젝트의 디자인 시스템을 기술하세요
- 참고 사이트가 있다면 해당 DESIGN.md를 참조하세요: `/home/jay/workspace/resources/design-md/{site}/DESIGN.md`
- CLI 검색: `python3 /home/jay/workspace/scripts/design_md_search.py search "keyword"`
- 색상은 반드시 HEX 코드로 명시하세요
- 실제 CSS 값을 포함하면 에이전트가 정확하게 구현할 수 있습니다

---

## 1. Visual Theme & Atmosphere

### 작성 가이드
> 프로젝트의 전반적인 시각적 테마와 분위기를 기술합니다.
> - 전체 톤앤매너 (예: 따뜻한, 차가운, 미니멀, 대담한)
> - 주요 시각적 특징 3-5개
> - 참고 사이트 스타일 (예: "Stripe의 핀테크 신뢰감 + Claude의 따뜻함")

**전체 테마**: [기술]
**키 특징**:
- [특징 1]
- [특징 2]
- [특징 3]
**참고 사이트**: [사이트명] — [참고 포인트]

---

## 2. Color Palette & Roles

### 작성 가이드
> 모든 색상을 HEX 코드와 용도로 정의합니다.
> - Primary: 브랜드 메인 색상
> - Secondary: 보조 색상
> - Accent: 강조 색상 (CTA 등)
> - Neutral: 텍스트, 배경, 보더
> - Semantic: 성공/에러/경고/정보

### Primary
- **[색상명]** (`#______`): [용도 설명]

### Secondary
- **[색상명]** (`#______`): [용도 설명]

### Accent
- **[색상명]** (`#______`): [용도 설명]

### Neutral
- **Background** (`#______`): [용도]
- **Surface** (`#______`): [용도]
- **Text Primary** (`#______`): [용도]
- **Text Secondary** (`#______`): [용도]
- **Border** (`#______`): [용도]

### Semantic
- **Success** (`#______`): [용도]
- **Error** (`#______`): [용도]
- **Warning** (`#______`): [용도]
- **Info** (`#______`): [용도]

---

## 3. Typography Rules

### 작성 가이드
> 폰트 패밀리, 크기, 무게, 행간을 정의합니다.
> 실제 CSS font-family 값을 포함하세요.

**Font Family**: `font-family: [font], [fallback], sans-serif;`
**Heading Font** (선택): `font-family: [font], serif;`
**Mono Font** (선택): `font-family: [font], monospace;`

### 크기 체계
- H1: [size]px / weight [weight] / line-height [lh]
- H2: [size]px / weight [weight] / line-height [lh]
- H3: [size]px / weight [weight] / line-height [lh]
- Body: [size]px / weight [weight] / line-height [lh]
- Caption: [size]px / weight [weight] / line-height [lh]

---

## 4. Component Stylings

### 작성 가이드
> 주요 컴포넌트의 스타일을 CSS 값으로 정의합니다.

### Button
- Primary: bg `#______`, text `#______`, border-radius `___px`, padding `___`
- Secondary: ...
- Ghost: ...

### Card
- bg: `#______`, border: `___`, border-radius: `___px`, shadow: `___`

### Input
- bg: `#______`, border: `___`, border-radius: `___px`, focus ring: `___`

### Badge/Tag
- ...

---

## 5. Layout Principles

### 작성 가이드
> 레이아웃 그리드, 간격, 컨테이너 너비를 정의합니다.

**Max Width**: `___px`
**Grid**: [columns] columns, gap `___px`
**Spacing Scale**: `4, 8, 12, 16, 24, 32, 48, 64, 96px`
**Section Padding**: `___px` (desktop) / `___px` (mobile)

---

## 6. Depth & Elevation

### 작성 가이드
> 그림자, z-index, 오버레이 규칙을 정의합니다.

### Shadow Scale
- sm: `___`
- md: `___`
- lg: `___`
- xl: `___`

### Z-index
- Base: 0
- Dropdown: 10
- Sticky: 20
- Modal: 30
- Toast: 40

---

## 7. Do's and Don'ts

### 작성 가이드
> 디자인 일관성을 위한 규칙을 명시합니다.

### Do's
- [ ] [규칙 1]
- [ ] [규칙 2]

### Don'ts
- [ ] [금지 사항 1]
- [ ] [금지 사항 2]

---

## 8. Responsive Behavior

### 작성 가이드
> 브레이크포인트와 반응형 규칙을 정의합니다.

### Breakpoints
- Mobile: `< ___px`
- Tablet: `___px ~ ___px`
- Desktop: `> ___px`

### 반응형 규칙
- [규칙 1]
- [규칙 2]

---

## 9. Agent Prompt Guide

### 작성 가이드
> AI 에이전트가 이 디자인 시스템을 적용할 때 참고할 프롬프트 가이드입니다.

**핵심 지시**: "이 프로젝트는 [테마] 스타일입니다. [색상]을 메인으로 사용하고, [폰트]를 기본 폰트로 사용하세요."

**참고 사이트**: [사이트명]의 DESIGN.md를 참조하여 [특정 요소]를 구현하세요.
경로: `/home/jay/workspace/resources/design-md/[site]/DESIGN.md`