# Anvil Hosting - Figma Design Guide

Figma 리디자인을 위한 디자인 시스템 문서입니다.

---

## 1. Color Palette

### Brand Colors (Primary)
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Brand 400** | `#38bdf8` | 56, 189, 248 | 하이라이트, 호버 |
| **Brand 500** | `#0ea5e9` | 14, 165, 233 | 주요 액션, 링크 |
| **Brand 600** | `#0284c7` | 2, 132, 199 | 버튼 배경, CTA |

### Dark Theme (Background)
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Dark 900** | `#0b1120` | 11, 17, 32 | 메인 배경 |
| **Dark 800** | `#1e293b` | 30, 41, 59 | 섹션 배경 |

### Neutral (Slate)
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Slate 200** | `#e2e8f0` | 226, 232, 240 | 본문 텍스트 (body) |
| **Slate 300** | `#cbd5e1` | 203, 213, 225 | 서브 텍스트 |
| **Slate 400** | `#94a3b8` | 148, 163, 184 | 비활성 텍스트 |
| **Slate 500** | `#64748b` | 100, 116, 139 | 플레이스홀더 |
| **Slate 600** | `#475569` | 71, 85, 105 | 보더 (진한) |
| **Slate 700** | `#334155` | 51, 65, 85 | 보더 (기본) |
| **Slate 800** | `#1e293b` | 30, 41, 59 | 카드 배경 |
| **Slate 900** | `#0f172a` | 15, 23, 42 | 인풋 배경 |

### Semantic Colors
| Name | Hex | Usage |
|------|-----|-------|
| **Green 400** | `#4ade80` | 성공, 온라인 상태 |
| **Green 500** | `#22c55e` | 성공 보더 |
| **Red 400** | `#f87171` | 오류, 경고 |
| **Red 500** | `#ef4444` | 오류 보더 |
| **Yellow 400** | `#facc15` | 경고, 중간 상태 |
| **Purple 400** | `#c084fc` | 자동화, 보조 |
| **Purple 500** | `#a855f7` | 보조 액션 |
| **Purple 600** | `#9333ea` | 보조 버튼 |
| **Blue 400** | `#60a5fa` | 정보, 텔레그램 |

---

## 2. Typography

### Font Families
```
Sans-serif: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif
Monospace:  "JetBrains Mono", "Fira Code", monospace
```

### Font Scale
| Name | Size | Line Height | Weight | Usage |
|------|------|-------------|--------|-------|
| **6xl** | 60px (3.75rem) | 1 | Bold 700 | Hero 제목 (Desktop) |
| **5xl** | 48px (3rem) | 1 | Bold 700 | Hero 제목 (Mobile) |
| **4xl** | 36px (2.25rem) | 1.11 | Bold 700 | 섹션 제목 (Desktop) |
| **3xl** | 30px (1.875rem) | 1.2 | Bold 700 | 섹션 제목 (Mobile) |
| **2xl** | 24px (1.5rem) | 1.33 | Bold 700 | 카드 제목 |
| **xl** | 20px (1.25rem) | 1.4 | Bold 700 | 소제목 |
| **lg** | 18px (1.125rem) | 1.56 | Medium 500 | 리드 텍스트 |
| **base** | 16px (1rem) | 1.5 | Normal 400 | 본문 |
| **sm** | 14px (0.875rem) | 1.43 | Normal 400 | 작은 본문 |
| **xs** | 12px (0.75rem) | 1.33 | Normal 400 | 캡션, 라벨 |
| **2xs** | 10px | 1.4 | Normal 400 | 마이크로 라벨 |

### Font Weights
| Name | Value | Usage |
|------|-------|-------|
| Normal | 400 | 본문, 설명 |
| Medium | 500 | 강조 본문 |
| Bold | 700 | 제목, 버튼 |

### Letter Spacing
| Name | Value | Usage |
|------|-------|-------|
| Tight | -0.025em | 큰 제목 |
| Normal | 0 | 본문 |
| Widest | 0.1em | 라벨, 뱃지 |

---

## 3. Spacing System

Base unit: **4px (0.25rem)**

| Scale | Value | Pixels | Usage |
|-------|-------|--------|-------|
| 0.5 | 0.125rem | 2px | 미세 간격 |
| 1 | 0.25rem | 4px | 최소 간격 |
| 1.5 | 0.375rem | 6px | 아이콘 간격 |
| 2 | 0.5rem | 8px | 작은 간격 |
| 3 | 0.75rem | 12px | 컴포넌트 내부 |
| 4 | 1rem | 16px | 기본 간격 |
| 6 | 1.5rem | 24px | 컴포넌트 간격 |
| 8 | 2rem | 32px | 섹션 내부 |
| 12 | 3rem | 48px | 큰 간격 |
| 16 | 4rem | 64px | 섹션 간격 |
| 24 | 6rem | 96px | 섹션 패딩 |
| 32 | 8rem | 128px | Hero 패딩 |

---

## 4. Border Radius

| Name | Value | Usage |
|------|-------|-------|
| **sm** | 4px | 태그, 작은 버튼 |
| **default** | 4px | 인풋 필드 |
| **lg** | 8px | 버튼 |
| **xl** | 12px | 카드 |
| **2xl** | 16px | 모달, 큰 카드 |
| **3xl** | 24px | 팝업 |
| **full** | 9999px | 원형, 뱃지, 아바타 |

---

## 5. Shadows

### Elevation System
```css
/* Small - 버튼 호버 */
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)

/* Default - 카드 */
shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)

/* Large - 드롭다운 */
shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)

/* XL - 모달 */
shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)

/* 2XL - 팝업 */
shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
```

### Glow Effects (Brand)
```css
/* Primary Glow */
shadow-brand: 0 0 15px rgba(56, 189, 248, 0.2)
shadow-brand-hover: 0 0 20px rgba(56, 189, 248, 0.4)

/* Button Glow */
shadow-button: 0 10px 15px -3px rgba(14, 165, 233, 0.2)

/* Purple Accent */
shadow-purple: 0 0 15px rgba(168, 85, 247, 0.2)
```

---

## 6. Component Styles

### Buttons

#### Primary Button
```
Background: Brand 600 (#0284c7)
Hover: Brand 500 (#0ea5e9)
Text: White
Border Radius: 8px
Padding: 12px 24px (py-3 px-6)
Font: Bold, 14px
Shadow: shadow-lg shadow-brand-500/20
```

#### Secondary Button
```
Background: Slate 800 (#1e293b)
Hover: Slate 700 (#334155)
Text: White
Border: 1px solid Slate 700
Border Radius: 8px
Padding: 8px 16px
```

#### Ghost Button
```
Background: Transparent
Hover: White/5%
Text: Slate 400 → White
Border Radius: 8px
```

### Cards

#### Glass Panel
```
Background: rgba(30, 41, 59, 0.4) (Slate 800 @ 40%)
Backdrop Filter: blur(12px)
Border: 1px solid rgba(255, 255, 255, 0.05)
Border Radius: 12px (xl) or 16px (2xl)
Padding: 24px or 32px
```

#### Feature Card
```
Background: Glass Panel
Border Top: 2px solid [accent color]
Hover: bg-slate-800/80
Transition: 150ms ease
```

### Input Fields
```
Background: Slate 900 (#0f172a)
Border: 1px solid Slate 700
Focus Border: Brand 500
Border Radius: 8px
Padding: 12px 16px
Text: Slate 200
Placeholder: Slate 500
```

### Badges / Tags
```
Background: [color]/10 (예: Brand 500 @ 10%)
Border: 1px solid [color]/20
Text: [color]-400
Border Radius: 9999px (full)
Padding: 4px 12px
Font: Mono, 12px
```

### Navigation
```
Background: Dark 900 @ 80% + backdrop-blur
Border Bottom: 1px solid White/5%
Height: 64px
Logo Size: 32px
```

---

## 7. Layout Grid

### Container
| Breakpoint | Max Width |
|------------|-----------|
| Default | 100% |
| sm (640px) | 640px |
| md (768px) | 768px |
| lg (1024px) | 1024px |
| xl (1280px) | 1280px |
| 2xl (1536px) | 1536px |
| **Content** | **80rem (1280px)** |

### Grid System
```
Columns: 12
Gutter: 24px (gap-6) or 32px (gap-8)
Margin: 24px (mobile) / 48px (desktop)
```

### Breakpoints
| Name | Min Width | Usage |
|------|-----------|-------|
| sm | 640px | 모바일 가로 |
| md | 768px | 태블릿 |
| lg | 1024px | 데스크톱 |
| xl | 1280px | 와이드 데스크톱 |
| 2xl | 1536px | 초대형 모니터 |

---

## 8. Animation & Transitions

### Duration
| Name | Value | Usage |
|------|-------|-------|
| Fast | 150ms | 버튼, 링크 |
| Normal | 200ms | 카드, 토글 |
| Slow | 300ms | 모달, 페이드 |
| Slower | 500ms | 큰 트랜지션 |

### Easing
```css
ease-in: cubic-bezier(0.4, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.2, 1)
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
```

### Common Animations
```css
/* Pulse (Status Indicator) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
animation: pulse 2s ease-in-out infinite;

/* Chat Bubble Enter */
@keyframes chat-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
animation: chat-enter 0.5s forwards;
```

---

## 9. Iconography

### Icon Sources
- **Heroicons** (Outline style): 네비게이션, UI
- **Custom SVG**: 로고, 일러스트레이션
- **Emoji**: 리전 플래그, 기능 아이콘

### Icon Sizes
| Name | Size | Usage |
|------|------|-------|
| xs | 12px | 인라인 |
| sm | 16px | 버튼 내 |
| md | 20px | 리스트 |
| lg | 24px | 카드 헤더 |
| xl | 32px | 기능 아이콘 |
| 2xl | 48px | 히어로 |

---

## 10. Special Effects

### Grid Background
```css
background-image:
  linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
```

### Gradient Glow
```css
/* Hero Glow */
background: radial-gradient(
  ellipse 800px 500px at 50% 0%,
  rgba(14, 165, 233, 0.1),
  transparent
);
```

### Glassmorphism
```css
background: rgba(30, 41, 59, 0.4);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
```

---

## 11. Figma Setup Checklist

### Variables 생성
- [ ] Color Primitives (Brand, Slate, Semantic)
- [ ] Spacing Scale (4px base)
- [ ] Typography Tokens
- [ ] Border Radius
- [ ] Shadows

### Components 생성
- [ ] Button (Primary, Secondary, Ghost)
- [ ] Card (Glass, Feature, Pricing)
- [ ] Input (Text, Select, Checkbox)
- [ ] Badge / Tag
- [ ] Navigation Bar
- [ ] Footer
- [ ] Modal (Server Launcher)

### Pages 구성
- [ ] 1. Navbar
- [ ] 2. Hero Section
- [ ] 3. Features (4 cards)
- [ ] 4. Automation (n8n/Terraform tabs)
- [ ] 5. Infrastructure
- [ ] 6. Domain Service
- [ ] 7. Pricing (Tabs + Table)
- [ ] 8. Footer
- [ ] Modal: Server Launcher (5 steps)

---

## 12. Figma Plugin 추천

| Plugin | 용도 |
|--------|------|
| **Tokens Studio** | 디자인 토큰 관리 |
| **Iconify** | 아이콘 라이브러리 |
| **html.to.design** | 현재 사이트 임포트 |
| **Locofy** | 디자인 → React/HTML 변환 |
| **Contrast** | 접근성 색상 대비 검사 |

---

## 13. Export Settings

### 이미지 내보내기
- **PNG**: 2x 해상도
- **SVG**: 아이콘, 로고

### 코드 변환 시 주의사항
1. `oklch()` 색상은 `hex`로 변환 필요
2. Tailwind v4 문법 사용 중 (`--spacing`, CSS Variables)
3. Alpine.js 인터랙션 별도 구현 필요

---

*Generated for Anvil Hosting Figma Redesign Project*
*Last Updated: 2026-01-20*