anvil-hosting/design-system/README.md

# Anvil Hosting Design System

Figma 라이브러리 구축을 위한 디자인 토큰 및 가이드입니다.

## 📦 파일 구조

```
design-system/
├── tokens.json          # 전체 디자인 토큰 (개발용)
├── figma-tokens.json    # Figma Tokens 플러그인 호환 형식
└── README.md            # 이 파일
```

## 🎨 색상 시스템

### Brand Colors (Sky Blue)
| Token | HEX | 용도 |
|-------|-----|------|
| `brand-400` | `#38bdf8` | Hover, 강조, 아이콘 |
| `brand-500` | `#0ea5e9` | **Primary** - 버튼, 링크 |
| `brand-600` | `#0284c7` | Pressed 상태 |

### Purple (Secondary)
| Token | HEX | 용도 |
|-------|-----|------|
| `purple-400` | `#c084fc` | 밝은 악센트 |
| `purple-500` | `#a855f7` | 그라디언트 종점 |
| `purple-600` | `#9333ea` | 어두운 악센트 |

### Dark (Backgrounds)
| Token | HEX | 용도 |
|-------|-----|------|
| `dark-900` | `#0b1120` | **페이지 배경** |
| `dark-800` | `#1e293b` | 카드/패널 배경 |
| `dark-700` | `#334155` | 테두리, 구분선 |

### Semantic Colors
| Token | HEX | 용도 |
|-------|-----|------|
| `success` | `#22c55e` | 성공, 활성 상태 |
| `warning` | `#eab308` | 경고 |
| `error` | `#ef4444` | 에러, 삭제 |
| `info` | `#3b82f6` | 정보 |

## 📝 타이포그래피

### 폰트 패밀리
```css
/* 본문 (한글 최적화) */
font-family: -apple-system, BlinkMacSystemFont,
             'Apple SD Gothic Neo', 'Malgun Gothic',
             'Noto Sans KR', system-ui, sans-serif;

/* 코드 */
font-family: 'JetBrains Mono', monospace;
```

### 폰트 크기 스케일
| Token | Size | Line Height | 용도 |
|-------|------|-------------|------|
| `xs` | 12px | 16px | 라벨, 캡션 |
| `sm` | 14px | 20px | 보조 텍스트 |
| `base` | 16px | 24px | **본문** |
| `lg` | 18px | 28px | 강조 본문 |
| `xl` | 20px | 28px | 부제목 |
| `2xl` | 24px | 32px | 카드 제목 |
| `3xl` | 30px | 36px | 섹션 제목 |
| `4xl` | 36px | 40px | 페이지 제목 |
| `5xl` | 48px | 48px | Hero 제목 |

## ✨ 글래스모피즘 효과

### Glass Panel (네비게이션, 모달)
```css
background: rgba(30, 41, 59, 0.4);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
```

### Glass Card (피처 카드, 가격표)
```css
/* 기본 상태 */
background: linear-gradient(135deg,
  rgba(30, 41, 59, 0.6) 0%,
  rgba(30, 41, 59, 0.3) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);

/* Hover 상태 */
background: linear-gradient(135deg,
  rgba(30, 41, 59, 0.8) 0%,
  rgba(30, 41, 59, 0.5) 100%);
border-color: rgba(255, 255, 255, 0.15);
box-shadow:
  0 20px 40px rgba(0, 0, 0, 0.3),
  0 0 40px rgba(56, 189, 248, 0.1);
transform: translateY(-4px);
```

## 🌈 그라디언트

### Brand Gradient (CTA, Hero)
```css
background: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);
```

### Text Gradient
```css
background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #38bdf8 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
color: transparent;
```

### Soft Gradient (배경)
```css
background: linear-gradient(135deg,
  rgba(56, 189, 248, 0.15) 0%,
  rgba(168, 85, 247, 0.1) 100%);
```

## 💫 Glow 효과

### Brand Glow
```css
box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
```

### Purple Glow
```css
box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
```

## 📐 간격 시스템

| Token | Value | 용도 |
|-------|-------|------|
| `1` | 4px | 아이콘 갭 |
| `2` | 8px | 인라인 요소 |
| `3` | 12px | 밀집 UI |
| `4` | 16px | **기본 갭** |
| `6` | 24px | 카드 패딩 |
| `8` | 32px | 섹션 내부 |
| `16` | 64px | 섹션 간 |
| `24` | 96px | 대형 섹션 |

## 🔘 Border Radius

| Token | Value | 용도 |
|-------|-------|------|
| `sm` | 4px | 작은 버튼, 태그 |
| `lg` | 8px | 입력 필드 |
| `xl` | 12px | 카드 |
| `2xl` | 16px | 대형 카드 |
| `3xl` | 24px | 모달, 패널 |
| `full` | 9999px | 원형 버튼, 아바타 |

---

## 🛠 Figma 설정 가이드

### 1. Figma Tokens 플러그인 사용 (권장)

1. Figma에서 **Figma Tokens** 플러그인 설치
2. `figma-tokens.json` 파일 내용을 플러그인에 Import
3. 토큰이 자동으로 스타일 생성

### 2. 수동 설정

**Color Styles 생성:**
1. Figma → Local Styles → + 버튼
2. 위 색상표 참고하여 스타일 생성
3. 명명 규칙: `brand/500`, `dark/900`, `semantic/success`

**Text Styles 생성:**
1. 텍스트 작성 → 스타일 패널 → +
2. 명명 규칙: `heading/5xl`, `body/base`, `code/sm`

**Effect Styles 생성:**
1. 요소에 효과 적용 → 스타일 패널 → +
2. 명명 규칙: `glass-panel`, `glass-card`, `glow-brand`

---

## 📱 컴포넌트 목록

WireFramer 라이브러리와 연계하여 구축할 컴포넌트:

### Navigation
- [ ] Header
- [ ] Footer
- [ ] Tab Bar (가격표용)
- [ ] Mobile Menu

### Content
- [ ] Hero Section
- [ ] Feature Card
- [ ] Pricing Card
- [ ] Info Card

### Inputs
- [ ] Text Input
- [ ] Select/Dropdown
- [ ] Slider (리소스 선택)
- [ ] Toggle
- [ ] Radio Group (OS/리전 선택)

### Buttons
- [ ] Primary Button (Gradient)
- [ ] Secondary Button (Glass)
- [ ] Icon Button
- [ ] Link Button

### Feedback
- [ ] Badge/Tag
- [ ] Toast/Alert
- [ ] Loading Spinner
- [ ] Skeleton

---

## 🔗 관련 파일

- `/src/input.css` - Tailwind CSS 소스
- `/style.css` - 빌드된 CSS
- `/index.html` - 메인 페이지

## 📅 버전

- **v1.0** (2026-01-23): 초기 디자인 토큰 추출