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	정보

📝 타이포그래피

폰트 패밀리

/* 본문 (한글 최적화) */
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 (네비게이션, 모달)

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

Glass Card (피처 카드, 가격표)

/* 기본 상태 */
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)

background: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);

Text Gradient

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

Soft Gradient (배경)

background: linear-gradient(135deg,
  rgba(56, 189, 248, 0.15) 0%,
  rgba(168, 85, 247, 0.1) 100%);

💫 Glow 효과

Brand Glow

box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);

Purple Glow

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): 초기 디자인 토큰 추출