Files

kappa d680e8bbc0 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

9.6 KiB

Raw Permalink Blame History

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

/* 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)

/* 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

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

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

/* 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

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

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

Glassmorphism

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: 아이콘, 로고

코드 변환 시 주의사항

oklch() 색상은 hex로 변환 필요
Tailwind v4 문법 사용 중 (--spacing, CSS Variables)
Alpine.js 인터랙션 별도 구현 필요

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

9.6 KiB Raw Permalink Blame History

Anvil Hosting - Figma Design Guide

1. Color Palette

Brand Colors (Primary)

Dark Theme (Background)

Neutral (Slate)

Semantic Colors

2. Typography

Font Families

Font Scale

Font Weights

Letter Spacing

3. Spacing System

4. Border Radius

5. Shadows

Elevation System

Glow Effects (Brand)

6. Component Styles

Buttons

Primary Button

Secondary Button

Ghost Button

Cards

Glass Panel

Feature Card

Input Fields

Badges / Tags

Navigation

7. Layout Grid

Container

Grid System

Breakpoints

8. Animation & Transitions

Duration

Easing

Common Animations

9. Iconography

Icon Sources

Icon Sizes

10. Special Effects

Grid Background

Gradient Glow

Glassmorphism

11. Figma Setup Checklist

Variables 생성

Components 생성

Pages 구성

12. Figma Plugin 추천

13. Export Settings

이미지 내보내기

코드 변환 시 주의사항

9.6 KiB

Raw Permalink Blame History