From d680e8bbc0b66da822df8803ab2a43f228dc6796 Mon Sep 17 00:00:00 2001 From: kappa Date: Tue, 20 Jan 2026 21:56:30 +0900 Subject: [PATCH] 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 --- FIGMA_CONTENT.md | 569 ++++++++++++++++++++++++++++++++++++++++++ FIGMA_DESIGN_GUIDE.md | 413 ++++++++++++++++++++++++++++++ figma-content.json | 287 +++++++++++++++++++++ figma-tokens.json | 216 ++++++++++++++++ 4 files changed, 1485 insertions(+) create mode 100644 FIGMA_CONTENT.md create mode 100644 FIGMA_DESIGN_GUIDE.md create mode 100644 figma-content.json create mode 100644 figma-tokens.json diff --git a/FIGMA_CONTENT.md b/FIGMA_CONTENT.md new file mode 100644 index 0000000..065f0c7 --- /dev/null +++ b/FIGMA_CONTENT.md @@ -0,0 +1,569 @@ +# Anvil Hosting - Figma 콘텐츠 맵 + +Figma 작업 시 복사해서 사용할 수 있는 모든 텍스트 콘텐츠입니다. + +--- + +## 1. Navigation (네비게이션) + +### Logo +``` +Anvil.Hosting +``` + +### Menu Items +``` +기능 +요금제 +자동화 +``` + +### CTA Button +``` +Console 시작 +``` + +--- + +## 2. Hero Section (히어로) + +### Status Badge +``` +System Operational: v2.4.0 Live +``` + +### Headline +``` +Incus/LXD 기반 +초경량 컨테이너 호스팅 +``` + +### Subheadline +``` +VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다. +n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다. +``` + +### Primary CTA +``` +🚀 인스턴스 즉시 배포 +``` + +### Ping Widget +| 리전 | 레이턴시 | +|------|----------| +| 🇰🇷 Seoul | 2ms | +| 🇯🇵 Tokyo | 35ms | +| 🇭🇰 HongKong | 45ms | +| 🇸🇬 Singapore | 65ms | + +### Chat Demo (Phone Mockup) +**Header:** +``` +Anvil Forge Bot +bot +``` + +**User Message 1:** +``` +도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘 +``` + +**Bot Response 1:** +``` +🤖 AI가 요청을 분석했습니다. + +다음 구성으로 서버를 준비할까요? + +• 위치: 🇯🇵 도쿄 (Tokyo) +• OS: Debian 12 (Bookworm) +• 사양: Pro (2 vCPU / 4GB) +``` + +**User Message 2:** +``` +응 바로 생성해줘 +``` + +**Bot Response 2 (Success):** +``` +✅ 서버 생성이 완료되었습니다! + +IP: 45.12.89.121 +Root PW: (보안 전송됨) + +지금 바로 SSH 접속이 가능합니다. +``` + +--- + +## 3. Features Section (기술 스택) + +### Section Header +``` +엔지니어를 위한 기술 스택 +단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다. +``` + +### Feature Card 1 - Incus/LXD (Brand Blue) +``` + +Native Performance + +KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다. +``` + +### Feature Card 2 - Automation (Purple) +``` + +API & Webhooks + +n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다. +``` + +### Feature Card 3 - Security (Green) +``` + +Isolated & Safe + +CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다. +``` + +### Feature Card 4 - Anti-DDoS (Red) +``` + +1Tbps+ Mitigation + +L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다. +``` + +--- + +## 4. Automation Section (자동화) + +### Badge +``` +Infrastructure as Code +``` + +### Headline +``` +반복적인 작업은 +자동화에 맡기세요 +``` + +### Description +``` +웹 콘솔에 접속할 필요도 없습니다. Terraform으로 인프라를 정의하고, Ansible로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다. +``` + +### Feature List +``` +Webhook Integration +Github Actions, GitLab CI/CD 연동 + +Full API Access +서버 생성, 제어, 모니터링 100% API 지원 +``` + +### Tab Buttons +``` +n8n Workflow +Terraform +``` + +### n8n Workflow Nodes +``` +Webhook → Restart Server → Notify User +``` + +### Terraform Code +```hcl +resource "anvil_instance" "web" { + name = "production-web-01" + image = "debian-12" + region = "jp-east-1" + plan = "pro-v2" + + // 자동 백업 설정 + backup_schedule { + enabled = true + retain = 7 + } +} +``` + +--- + +## 5. Infrastructure Section (인프라 상세) + +### Headline +``` +High-Spec Infrastructure +``` + +### Feature 1 +``` +⚡ NVMe Storage +모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장. +``` + +### Feature 2 +``` +🌐 Premium Network +CN2/BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시. +``` + +### Feature 3 +``` +💾 ZFS Snapshots +CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝. +``` + +### Terminal Mockup +```bash +root@anvil:~# neofetch + . + / \ + ( ) + \ / OS: Debian GNU/Linux 12 (bookworm) + | Kernel: 6.1.0-18-cloud-amd64 + | Uptime: 142 days, 4 hours + | Virtualization: lxc (Incus) + | CPU: AMD EPYC 7763 (4) @ 2.45GHz + | Memory: 512MiB / 64GiB + +root@anvil:~# docker ps +CONTAINER ID IMAGE STATUS PORTS +a1b2c3d4e5f6 nginx Up 24h 0.0.0.0:80->80/tcp +_ +``` + +--- + +## 6. Domain Section (도메인 서비스) + +### Badge +``` +NEW: AI Domain Generator +``` + +### Headline +``` +대화로 끝내는 +도메인 등록과 관리 +``` + +### Description +``` +원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다. +``` + +### Feature Grid +``` +AI 추천 +키워드 분석 기반 도메인 작명 + +실시간 조회 +전 세계 TLD 실시간 가용 확인 + +간편 DNS +대화형 A/CNAME/MX 레코드 설정 + +Whois 보안 +개인정보 보호 설정 기본 제공 +``` + +### Domain Pricing Table +``` +주요 도메인 가격 (연간) + +.com / .net ₩20,000 / ₩22,600 +.it.com / .dev ₩8,700 / ₩27,800 (.it.com 갱신 ₩67,900) +.io / .ai ₩114,800 / ₩139,200 +.xyz / .me ₩27,800 / ₩31,300 +``` + +### CTA Button +``` +🌐 도메인 검색 시작하기 +``` + +--- + +## 7. Pricing Section (요금제) + +### Section Header +``` +합리적인 요금제 +전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함) +``` + +### Tab Buttons +``` +🌏 Global (Tokyo/SG/HK) +🇰🇷 Seoul (Premium) +``` + +### Global Pricing Table +| Plan | vCPU | RAM | SSD | Transfer | Price/Month | +|------|------|-----|-----|----------|-------------| +| Micro | 1 Core | 1 GB | 25 GB | 1 TB | ₩8,500 | +| Starter | 1 Core | 2 GB | 50 GB | 2 TB | ₩20,400 | +| **Pro** ⭐ | 2 Cores | 4 GB | 80 GB | 4 TB | ₩40,700 | +| Business | 4 Cores | 8 GB | 160 GB | 5 TB | ₩67,800 | + +### Seoul Pricing Table +| Plan | vCPU | RAM | SSD (High) | Transfer | Price/Month | +|------|------|-----|------------|----------|-------------| +| Nano | 1 Core | 512 MB | 20 GB | 1 TB | ₩6,000 | +| Micro | 1 Core | 1 GB | 40 GB | 2 TB | ₩8,500 | +| Starter | 1 Core | 2 GB | 60 GB | 3 TB | ₩17,000 | +| **Pro** ⭐ | 2 Cores | 4 GB | 80 GB | 4 TB | ₩33,900 | +| Business | 2 Cores | 8 GB | 160 GB | 5 TB | ₩67,800 | + +### Footnote (Global) +``` +* 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다. +``` + +### Enterprise Note (Seoul) +``` +더 강력한 성능이 필요하신가요? +AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원) +Enterprise 문의 → +``` + +### Feature Highlights +``` +🌍 글로벌 4개 리전 운영 +도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다. + +🛡️ 프리미엄 DDoS 방어 +모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다. +``` + +### Bare Metal Section +**Badge:** +``` +EXTREME PERFORMANCE +``` + +**Headline:** +``` +Bare Metal Dedicated +``` + +**Description:** +``` +가상화가 없는 100% 물리 서버를 단독으로 사용하세요. +AMD EPYC 9004 프로세서와 DDR5 ECC RAM의 압도적인 성능을 경험할 수 있습니다. +``` + +**Features:** +``` +✓ Full IPMI Access +✓ Custom Hardware +✓ 40Gbps Private Network +``` + +**Pricing:** +``` +Live Inventory Pricing +₩169,000~ +🇸🇬 싱가포르 최저가 재고 보유 중 +※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요. +``` + +**CTA:** +``` +실시간 재고/가격 조회 (Bot) +``` + +--- + +## 8. Footer + +### Left +``` +Anvil Hosting | Global Cloud Infrastructure +``` + +### Links +``` +이용약관 +개인정보처리방침 +SLA +``` + +### Right +``` +© 2026 LIBEHAIM Inc. | Taro Tanaka +#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan +``` + +--- + +## 9. Server Launcher Modal (서버 런처 모달) + +### Modal Header +``` +Server Launcher +Anvil Forge Bot +``` + +### Step 0: Region Selection +**Bot Message:** +``` +어느 리전에 서버를 생성할까요? +``` + +**Options:** +| Flag | Name | ID | Ping | +|------|------|-----|------| +| 🇰🇷 | 서울 | Seoul | 2ms | +| 🇯🇵 | 도쿄 | Tokyo | 35ms | +| 🇸🇬 | 싱가포르 | Singapore | 65ms | +| 🇭🇰 | 홍콩 | HongKong | 45ms | + +### Step 1: Plan Selection +**Bot Message:** +``` +어떤 사양이 필요하신가요? +``` + +**Options:** +| Icon | Plan | Spec | Price | +|------|------|------|-------| +| 🔹 | Micro | 1vCPU / 1GB RAM | ₩8,500/월 | +| 🔷 | Starter | 1vCPU / 2GB RAM | ₩20,400/월 | +| ⭐ | Pro | 2vCPU / 4GB RAM | ₩40,700/월 | +| 💎 | Business | 4vCPU / 8GB RAM | ₩67,800/월 | + +### Step 2: OS Selection +**Bot Message:** +``` +어떤 운영체제를 설치할까요? +``` + +**Options:** +| Icon | OS | +|------|-----| +| 🐧 | Debian 12 | +| 🟠 | Ubuntu 24.04 | +| 🔵 | CentOS 9 | +| 🏔️ | Alpine | + +### Step 3: Payment Selection +**Bot Message:** +``` +결제 방식을 선택해주세요. +``` + +**Options:** +| Name | Description | Discount | +|------|-------------|----------| +| 월간 결제 | 매월 자동 결제 | - | +| 연간 결제 | 2개월 무료 (17% 할인) | -17% | + +### Step 4: Confirmation +**Bot Message:** +``` +구성을 확인하고 서버를 생성해주세요! 🚀 +``` + +**Summary Labels:** +``` +리전 +플랜 +OS +결제 +월 요금 +``` + +**CTA Button:** +``` +🚀 서버 생성하기 +``` + +### Step 5: Deployment Progress +**Progress Labels:** +``` +배포 중... +완료 +``` + +**Log Messages:** +``` +🔄 배포를 시작합니다... +📍 {region} 리전 노드 선택 중... +📦 {os} 이미지 준비 중... +✅ 이미지 준비 완료 +🔧 컨테이너 인스턴스 생성 중... +✅ 컨테이너 생성 완료 +🌐 네트워크 및 방화벽 구성 중... +✅ IP 할당 완료: 45.12.89.{random} +⚙️ 시스템 서비스 시작 중... +🎉 서버가 활성화되었습니다! +``` + +### Success State +``` +✓ +서버 준비 완료! +인스턴스가 활성화되었습니다 + +[닫기] [Console →] +``` + +### Navigation +``` +이전 단계 +닫기 (X) +``` + +--- + +## 10. Meta / SEO Content + +### Page Title +``` +Anvil Hosting - 개발자를 위한 컨테이너 클라우드 +``` + +### Meta Description +``` +Incus/LXD 기반 초경량 컨테이너 호스팅. VM 오버헤드 없이 네이티브 성능을 제공하며, n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다. 도쿄, 서울, 싱가포르, 홍콩 리전 지원. +``` + +### Meta Keywords +``` +컨테이너 호스팅, LXD, Incus, 클라우드 서버, VPS, 도쿄 서버, 서울 서버, 개발자 호스팅, Docker, 자동화 +``` + +### OG Title +``` +Anvil Hosting - 개발자를 위한 컨테이너 클라우드 +``` + +### OG Description +``` +Incus/LXD 기반 초경량 컨테이너 호스팅. 네이티브 성능과 자동화 파이프라인을 경험하세요. +``` + +--- + +## 11. Accessibility Labels (접근성) + +``` +텔레그램 봇으로 콘솔 시작 +서버 런처 열기 +서버 요금표 +닫기 +이전 단계 +``` + +--- + +*Figma Copy-Paste Ready Content* +*Last Updated: 2026-01-20* diff --git a/FIGMA_DESIGN_GUIDE.md b/FIGMA_DESIGN_GUIDE.md new file mode 100644 index 0000000..395674a --- /dev/null +++ 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* diff --git a/figma-content.json b/figma-content.json new file mode 100644 index 0000000..f4e6d34 --- /dev/null +++ b/figma-content.json @@ -0,0 +1,287 @@ +{ + "site": { + "title": "Anvil Hosting - 개발자를 위한 컨테이너 클라우드", + "description": "Incus/LXD 기반 초경량 컨테이너 호스팅. VM 오버헤드 없이 네이티브 성능을 제공하며, n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다.", + "keywords": ["컨테이너 호스팅", "LXD", "Incus", "클라우드 서버", "VPS", "도쿄 서버", "서울 서버", "개발자 호스팅", "Docker", "자동화"], + "locale": "ko_KR", + "url": "https://hosting.anvil.it.com" + }, + + "navigation": { + "logo": "Anvil.Hosting", + "menu": ["기능", "요금제", "자동화"], + "cta": "Console 시작" + }, + + "hero": { + "badge": "System Operational: v2.4.0 Live", + "headline": ["Incus/LXD 기반", "초경량 컨테이너 호스팅"], + "subheadline": "VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다. n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다.", + "highlights": ["n8n", "Ansible"], + "cta": { + "icon": "🚀", + "text": "인스턴스 즉시 배포" + }, + "pingWidget": [ + { "flag": "🇰🇷", "name": "Seoul", "ping": "2ms", "color": "green" }, + { "flag": "🇯🇵", "name": "Tokyo", "ping": "35ms", "color": "brand" }, + { "flag": "🇭🇰", "name": "HongKong", "ping": "45ms", "color": "yellow" }, + { "flag": "🇸🇬", "name": "Singapore", "ping": "65ms", "color": "yellow" } + ], + "chatDemo": { + "header": { + "name": "Anvil Forge Bot", + "status": "bot" + }, + "messages": [ + { "type": "user", "text": "도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘" }, + { "type": "bot", "text": "🤖 AI가 요청을 분석했습니다.\n\n다음 구성으로 서버를 준비할까요?\n\n• 위치: 🇯🇵 도쿄 (Tokyo)\n• OS: Debian 12 (Bookworm)\n• 사양: Pro (2 vCPU / 4GB)" }, + { "type": "user", "text": "응 바로 생성해줘" }, + { "type": "bot", "text": "✅ 서버 생성이 완료되었습니다!\n\nIP: 45.12.89.121\nRoot PW: (보안 전송됨)\n\n지금 바로 SSH 접속이 가능합니다.", "success": true } + ] + } + }, + + "features": { + "header": { + "title": "엔지니어를 위한 기술 스택", + "subtitle": "단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다." + }, + "cards": [ + { + "tag": "", + "title": "Native Performance", + "description": "KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다.", + "color": "brand" + }, + { + "tag": "", + "title": "API & Webhooks", + "description": "n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다.", + "color": "purple" + }, + { + "tag": "", + "title": "Isolated & Safe", + "description": "CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다.", + "color": "green" + }, + { + "tag": "", + "title": "1Tbps+ Mitigation", + "description": "L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.", + "color": "red" + } + ] + }, + + "automation": { + "badge": "Infrastructure as Code", + "headline": ["반복적인 작업은", "자동화에 맡기세요"], + "description": "웹 콘솔에 접속할 필요도 없습니다. Terraform으로 인프라를 정의하고, Ansible로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다.", + "highlights": ["Terraform", "Ansible"], + "features": [ + { + "title": "Webhook Integration", + "description": "Github Actions, GitLab CI/CD 연동" + }, + { + "title": "Full API Access", + "description": "서버 생성, 제어, 모니터링 100% API 지원" + } + ], + "tabs": ["n8n Workflow", "Terraform"], + "n8nNodes": ["Webhook", "Restart Server", "Notify User"], + "terraformCode": "resource \"anvil_instance\" \"web\" {\n name = \"production-web-01\"\n image = \"debian-12\"\n region = \"jp-east-1\"\n plan = \"pro-v2\"\n\n // 자동 백업 설정\n backup_schedule {\n enabled = true\n retain = 7\n }\n}" + }, + + "infrastructure": { + "title": "High-Spec Infrastructure", + "features": [ + { + "icon": "⚡", + "title": "NVMe Storage", + "description": "모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장." + }, + { + "icon": "🌐", + "title": "Premium Network", + "description": "CN2/BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시." + }, + { + "icon": "💾", + "title": "ZFS Snapshots", + "description": "CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝." + } + ], + "terminal": { + "prompt": "root@anvil:~#", + "commands": [ + { "cmd": "neofetch", "output": "OS: Debian GNU/Linux 12 (bookworm)\nKernel: 6.1.0-18-cloud-amd64\nUptime: 142 days, 4 hours\nVirtualization: lxc (Incus)\nCPU: AMD EPYC 7763 (4) @ 2.45GHz\nMemory: 512MiB / 64GiB" }, + { "cmd": "docker ps", "output": "CONTAINER ID IMAGE STATUS PORTS\na1b2c3d4e5f6 nginx Up 24h 0.0.0.0:80->80/tcp" } + ] + } + }, + + "domain": { + "badge": "NEW: AI Domain Generator", + "headline": ["대화로 끝내는", "도메인 등록과 관리"], + "description": "원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다.", + "features": [ + { "title": "AI 추천", "description": "키워드 분석 기반 도메인 작명" }, + { "title": "실시간 조회", "description": "전 세계 TLD 실시간 가용 확인" }, + { "title": "간편 DNS", "description": "대화형 A/CNAME/MX 레코드 설정" }, + { "title": "Whois 보안", "description": "개인정보 보호 설정 기본 제공" } + ], + "pricing": { + "title": "주요 도메인 가격 (연간)", + "items": [ + { "tld": ".com / .net", "price": "₩20,000 / ₩22,600" }, + { "tld": ".it.com / .dev", "price": "₩8,700 / ₩27,800", "note": ".it.com 갱신 ₩67,900" }, + { "tld": ".io / .ai", "price": "₩114,800 / ₩139,200" }, + { "tld": ".xyz / .me", "price": "₩27,800 / ₩31,300" } + ] + }, + "cta": "🌐 도메인 검색 시작하기" + }, + + "pricing": { + "header": { + "title": "합리적인 요금제", + "subtitle": "전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함)" + }, + "tabs": [ + { "id": "global", "label": "🌏 Global", "sublabel": "(Tokyo/SG/HK)" }, + { "id": "seoul", "label": "🇰🇷 Seoul", "sublabel": "(Premium)" } + ], + "columns": ["Plan", "vCPU", "RAM", "SSD", "Transfer", "Price / Month"], + "global": [ + { "plan": "Micro", "vcpu": "1 Core", "ram": "1 GB", "ssd": "25 GB", "transfer": "1 TB", "price": "₩8,500" }, + { "plan": "Starter", "vcpu": "1 Core", "ram": "2 GB", "ssd": "50 GB", "transfer": "2 TB", "price": "₩20,400" }, + { "plan": "Pro", "vcpu": "2 Cores", "ram": "4 GB", "ssd": "80 GB", "transfer": "4 TB", "price": "₩40,700", "featured": true }, + { "plan": "Business", "vcpu": "4 Cores", "ram": "8 GB", "ssd": "160 GB", "transfer": "5 TB", "price": "₩67,800" } + ], + "seoul": [ + { "plan": "Nano", "vcpu": "1 Core", "ram": "512 MB", "ssd": "20 GB", "transfer": "1 TB", "price": "₩6,000" }, + { "plan": "Micro", "vcpu": "1 Core", "ram": "1 GB", "ssd": "40 GB", "transfer": "2 TB", "price": "₩8,500" }, + { "plan": "Starter", "vcpu": "1 Core", "ram": "2 GB", "ssd": "60 GB", "transfer": "3 TB", "price": "₩17,000" }, + { "plan": "Pro", "vcpu": "2 Cores", "ram": "4 GB", "ssd": "80 GB", "transfer": "4 TB", "price": "₩33,900", "featured": true }, + { "plan": "Business", "vcpu": "2 Cores", "ram": "8 GB", "ssd": "160 GB", "transfer": "5 TB", "price": "₩67,800" } + ], + "globalNote": "* 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다.", + "seoulNote": { + "title": "더 강력한 성능이 필요하신가요?", + "description": "AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원)", + "cta": "Enterprise 문의 →" + }, + "highlights": [ + { + "icon": "🌍", + "title": "글로벌 4개 리전 운영", + "description": "도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다." + }, + { + "icon": "🛡️", + "title": "프리미엄 DDoS 방어", + "description": "모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다." + } + ], + "bareMetal": { + "badge": "EXTREME PERFORMANCE", + "title": "Bare Metal Dedicated", + "description": "가상화가 없는 100% 물리 서버를 단독으로 사용하세요. AMD EPYC 9004 프로세서와 DDR5 ECC RAM의 압도적인 성능을 경험할 수 있습니다.", + "features": ["Full IPMI Access", "Custom Hardware", "40Gbps Private Network"], + "pricing": { + "label": "Live Inventory Pricing", + "price": "₩169,000~", + "note": "🇸🇬 싱가포르 최저가 재고 보유 중", + "subNote": "※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요." + }, + "cta": "실시간 재고/가격 조회 (Bot)" + } + }, + + "footer": { + "brand": "Anvil Hosting | Global Cloud Infrastructure", + "links": [ + { "label": "이용약관", "url": "https://t.me/AnvilForgeBot?start=terms" }, + { "label": "개인정보처리방침", "url": "https://t.me/AnvilForgeBot?start=privacy" }, + { "label": "SLA", "url": "https://t.me/AnvilForgeBot?start=sla" } + ], + "copyright": "© 2026 LIBEHAIM Inc. | Taro Tanaka", + "address": "#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan" + }, + + "launcher": { + "header": { + "title": "Server Launcher", + "subtitle": "Anvil Forge Bot" + }, + "steps": { + "region": { + "question": "어느 리전에 서버를 생성할까요?", + "options": [ + { "id": "Seoul", "flag": "🇰🇷", "name": "서울", "ping": "2ms" }, + { "id": "Tokyo", "flag": "🇯🇵", "name": "도쿄", "ping": "35ms" }, + { "id": "Singapore", "flag": "🇸🇬", "name": "싱가포르", "ping": "65ms" }, + { "id": "HongKong", "flag": "🇭🇰", "name": "홍콩", "ping": "45ms" } + ] + }, + "plan": { + "question": "어떤 사양이 필요하신가요?", + "options": [ + { "icon": "🔹", "plan": "Micro", "spec": "1vCPU / 1GB RAM", "price": "₩8,500" }, + { "icon": "🔷", "plan": "Starter", "spec": "1vCPU / 2GB RAM", "price": "₩20,400" }, + { "icon": "⭐", "plan": "Pro", "spec": "2vCPU / 4GB RAM", "price": "₩40,700" }, + { "icon": "💎", "plan": "Business", "spec": "4vCPU / 8GB RAM", "price": "₩67,800" } + ] + }, + "os": { + "question": "어떤 운영체제를 설치할까요?", + "options": [ + { "icon": "🐧", "name": "Debian 12" }, + { "icon": "🟠", "name": "Ubuntu 24.04" }, + { "icon": "🔵", "name": "CentOS 9" }, + { "icon": "🏔️", "name": "Alpine" } + ] + }, + "payment": { + "question": "결제 방식을 선택해주세요.", + "options": [ + { "id": "monthly", "name": "월간 결제", "desc": "매월 자동 결제", "discount": 0 }, + { "id": "yearly", "name": "연간 결제", "desc": "2개월 무료 (17% 할인)", "discount": 17 } + ] + }, + "confirm": { + "question": "구성을 확인하고 서버를 생성해주세요! 🚀", + "labels": ["리전", "플랜", "OS", "결제", "월 요금"], + "cta": "🚀 서버 생성하기" + }, + "deploy": { + "progressLabel": ["배포 중...", "완료"], + "logs": [ + "🔄 배포를 시작합니다...", + "📍 {region} 리전 노드 선택 중...", + "📦 {os} 이미지 준비 중...", + "✅ 이미지 준비 완료", + "🔧 컨테이너 인스턴스 생성 중...", + "✅ 컨테이너 생성 완료", + "🌐 네트워크 및 방화벽 구성 중...", + "✅ IP 할당 완료: 45.12.89.{random}", + "⚙️ 시스템 서비스 시작 중...", + "🎉 서버가 활성화되었습니다!" + ] + }, + "success": { + "icon": "✓", + "title": "서버 준비 완료!", + "subtitle": "인스턴스가 활성화되었습니다", + "buttons": ["닫기", "Console →"] + } + }, + "navigation": { + "back": "이전 단계", + "close": "닫기" + } + } +} diff --git a/figma-tokens.json b/figma-tokens.json new file mode 100644 index 0000000..0557246 --- /dev/null +++ b/figma-tokens.json @@ -0,0 +1,216 @@ +{ + "$themes": [], + "$metadata": { + "tokenSetOrder": ["core", "semantic", "component"] + }, + "core": { + "color": { + "brand": { + "400": { "value": "#38bdf8", "type": "color" }, + "500": { "value": "#0ea5e9", "type": "color" }, + "600": { "value": "#0284c7", "type": "color" } + }, + "dark": { + "800": { "value": "#1e293b", "type": "color" }, + "900": { "value": "#0b1120", "type": "color" } + }, + "slate": { + "200": { "value": "#e2e8f0", "type": "color" }, + "300": { "value": "#cbd5e1", "type": "color" }, + "400": { "value": "#94a3b8", "type": "color" }, + "500": { "value": "#64748b", "type": "color" }, + "600": { "value": "#475569", "type": "color" }, + "700": { "value": "#334155", "type": "color" }, + "800": { "value": "#1e293b", "type": "color" }, + "900": { "value": "#0f172a", "type": "color" } + }, + "green": { + "400": { "value": "#4ade80", "type": "color" }, + "500": { "value": "#22c55e", "type": "color" } + }, + "red": { + "400": { "value": "#f87171", "type": "color" }, + "500": { "value": "#ef4444", "type": "color" } + }, + "yellow": { + "400": { "value": "#facc15", "type": "color" }, + "500": { "value": "#eab308", "type": "color" } + }, + "purple": { + "400": { "value": "#c084fc", "type": "color" }, + "500": { "value": "#a855f7", "type": "color" }, + "600": { "value": "#9333ea", "type": "color" } + }, + "blue": { + "400": { "value": "#60a5fa", "type": "color" }, + "500": { "value": "#3b82f6", "type": "color" }, + "600": { "value": "#2563eb", "type": "color" } + }, + "white": { "value": "#ffffff", "type": "color" }, + "black": { "value": "#000000", "type": "color" } + }, + "spacing": { + "0": { "value": "0", "type": "spacing" }, + "0.5": { "value": "2", "type": "spacing" }, + "1": { "value": "4", "type": "spacing" }, + "1.5": { "value": "6", "type": "spacing" }, + "2": { "value": "8", "type": "spacing" }, + "3": { "value": "12", "type": "spacing" }, + "4": { "value": "16", "type": "spacing" }, + "5": { "value": "20", "type": "spacing" }, + "6": { "value": "24", "type": "spacing" }, + "8": { "value": "32", "type": "spacing" }, + "10": { "value": "40", "type": "spacing" }, + "12": { "value": "48", "type": "spacing" }, + "16": { "value": "64", "type": "spacing" }, + "20": { "value": "80", "type": "spacing" }, + "24": { "value": "96", "type": "spacing" }, + "32": { "value": "128", "type": "spacing" } + }, + "borderRadius": { + "sm": { "value": "4", "type": "borderRadius" }, + "default": { "value": "4", "type": "borderRadius" }, + "md": { "value": "6", "type": "borderRadius" }, + "lg": { "value": "8", "type": "borderRadius" }, + "xl": { "value": "12", "type": "borderRadius" }, + "2xl": { "value": "16", "type": "borderRadius" }, + "3xl": { "value": "24", "type": "borderRadius" }, + "full": { "value": "9999", "type": "borderRadius" } + }, + "fontFamily": { + "sans": { "value": "Pretendard", "type": "fontFamilies" }, + "mono": { "value": "JetBrains Mono", "type": "fontFamilies" } + }, + "fontSize": { + "2xs": { "value": "10", "type": "fontSizes" }, + "xs": { "value": "12", "type": "fontSizes" }, + "sm": { "value": "14", "type": "fontSizes" }, + "base": { "value": "16", "type": "fontSizes" }, + "lg": { "value": "18", "type": "fontSizes" }, + "xl": { "value": "20", "type": "fontSizes" }, + "2xl": { "value": "24", "type": "fontSizes" }, + "3xl": { "value": "30", "type": "fontSizes" }, + "4xl": { "value": "36", "type": "fontSizes" }, + "5xl": { "value": "48", "type": "fontSizes" }, + "6xl": { "value": "60", "type": "fontSizes" } + }, + "fontWeight": { + "normal": { "value": "400", "type": "fontWeights" }, + "medium": { "value": "500", "type": "fontWeights" }, + "bold": { "value": "700", "type": "fontWeights" } + }, + "lineHeight": { + "none": { "value": "1", "type": "lineHeights" }, + "tight": { "value": "1.25", "type": "lineHeights" }, + "snug": { "value": "1.375", "type": "lineHeights" }, + "normal": { "value": "1.5", "type": "lineHeights" }, + "relaxed": { "value": "1.625", "type": "lineHeights" } + }, + "letterSpacing": { + "tight": { "value": "-0.025em", "type": "letterSpacing" }, + "normal": { "value": "0", "type": "letterSpacing" }, + "widest": { "value": "0.1em", "type": "letterSpacing" } + }, + "boxShadow": { + "sm": { "value": "0 1px 2px rgba(0, 0, 0, 0.05)", "type": "boxShadow" }, + "default": { "value": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)", "type": "boxShadow" }, + "lg": { "value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)", "type": "boxShadow" }, + "xl": { "value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)", "type": "boxShadow" }, + "2xl": { "value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", "type": "boxShadow" }, + "glow-brand": { "value": "0 0 15px rgba(56, 189, 248, 0.2)", "type": "boxShadow" }, + "glow-brand-hover": { "value": "0 0 20px rgba(56, 189, 248, 0.4)", "type": "boxShadow" } + } + }, + "semantic": { + "color": { + "bg": { + "primary": { "value": "{core.color.dark.900}", "type": "color" }, + "secondary": { "value": "{core.color.dark.800}", "type": "color" }, + "card": { "value": "{core.color.slate.800}", "type": "color" }, + "input": { "value": "{core.color.slate.900}", "type": "color" } + }, + "text": { + "primary": { "value": "{core.color.white}", "type": "color" }, + "secondary": { "value": "{core.color.slate.200}", "type": "color" }, + "muted": { "value": "{core.color.slate.400}", "type": "color" }, + "placeholder": { "value": "{core.color.slate.500}", "type": "color" } + }, + "border": { + "default": { "value": "{core.color.slate.700}", "type": "color" }, + "light": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" }, + "focus": { "value": "{core.color.brand.500}", "type": "color" } + }, + "accent": { + "primary": { "value": "{core.color.brand.500}", "type": "color" }, + "secondary": { "value": "{core.color.purple.500}", "type": "color" } + }, + "status": { + "success": { "value": "{core.color.green.400}", "type": "color" }, + "error": { "value": "{core.color.red.400}", "type": "color" }, + "warning": { "value": "{core.color.yellow.400}", "type": "color" }, + "info": { "value": "{core.color.blue.400}", "type": "color" } + } + } + }, + "component": { + "button": { + "primary": { + "bg": { "value": "{core.color.brand.600}", "type": "color" }, + "bgHover": { "value": "{core.color.brand.500}", "type": "color" }, + "text": { "value": "{core.color.white}", "type": "color" }, + "borderRadius": { "value": "{core.borderRadius.lg}", "type": "borderRadius" }, + "paddingX": { "value": "{core.spacing.6}", "type": "spacing" }, + "paddingY": { "value": "{core.spacing.3}", "type": "spacing" } + }, + "secondary": { + "bg": { "value": "{core.color.slate.800}", "type": "color" }, + "bgHover": { "value": "{core.color.slate.700}", "type": "color" }, + "text": { "value": "{core.color.white}", "type": "color" }, + "border": { "value": "{core.color.slate.700}", "type": "color" }, + "borderRadius": { "value": "{core.borderRadius.lg}", "type": "borderRadius" } + } + }, + "card": { + "glass": { + "bg": { "value": "rgba(30, 41, 59, 0.4)", "type": "color" }, + "border": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" }, + "borderRadius": { "value": "{core.borderRadius.xl}", "type": "borderRadius" }, + "padding": { "value": "{core.spacing.6}", "type": "spacing" }, + "backdropBlur": { "value": "12", "type": "other" } + }, + "feature": { + "bg": { "value": "{component.card.glass.bg}", "type": "color" }, + "borderRadius": { "value": "{core.borderRadius.xl}", "type": "borderRadius" }, + "padding": { "value": "{core.spacing.8}", "type": "spacing" }, + "borderTopWidth": { "value": "2", "type": "borderWidth" } + } + }, + "input": { + "bg": { "value": "{core.color.slate.900}", "type": "color" }, + "border": { "value": "{core.color.slate.700}", "type": "color" }, + "borderFocus": { "value": "{core.color.brand.500}", "type": "color" }, + "borderRadius": { "value": "{core.borderRadius.lg}", "type": "borderRadius" }, + "paddingX": { "value": "{core.spacing.4}", "type": "spacing" }, + "paddingY": { "value": "{core.spacing.3}", "type": "spacing" } + }, + "badge": { + "borderRadius": { "value": "{core.borderRadius.full}", "type": "borderRadius" }, + "paddingX": { "value": "{core.spacing.3}", "type": "spacing" }, + "paddingY": { "value": "{core.spacing.1}", "type": "spacing" }, + "fontSize": { "value": "{core.fontSize.xs}", "type": "fontSizes" } + }, + "navbar": { + "height": { "value": "64", "type": "sizing" }, + "bg": { "value": "rgba(11, 17, 32, 0.8)", "type": "color" }, + "border": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" }, + "backdropBlur": { "value": "12", "type": "other" } + }, + "modal": { + "bg": { "value": "rgba(15, 23, 42, 0.95)", "type": "color" }, + "border": { "value": "rgba(255, 255, 255, 0.1)", "type": "color" }, + "borderRadius": { "value": "{core.borderRadius.3xl}", "type": "borderRadius" }, + "maxWidth": { "value": "800", "type": "sizing" }, + "backdropBlur": { "value": "16", "type": "other" } + } + } +}