Add Figma design system documentation and tokens

- FIGMA_DESIGN_GUIDE.md: Color palette, typography, spacing, components - figma-tokens.json: Tokens Studio importable design tokens - FIGMA_CONTENT.md: Copy-paste ready text content for all sections - figma-content.json: Structured content data for automation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-20 21:56:30 +09:00
parent 42c59dd414
commit d680e8bbc0
4 changed files with 1485 additions and 0 deletions
--- a/FIGMA_DESIGN_GUIDE.md
+++ b/FIGMA_DESIGN_GUIDE.md
@@ -0,0 +1,413 @@
+# 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*