다음 프로젝트의 디자인 시스템을 정의해주세요:
프로젝트명: [프로젝트명]
브랜드 성격: [모던/클래식/미니멀 등]
타겟 사용자: [사용자 정보]
플랫폼: [웹/모바일/데스크톱]
## 🎨 디자인 시스템 가이드
### 📋 개요
- **프로젝트:** [프로젝트명]
- **버전:** 1.0
- **업데이트:** [날짜]
- **적용 범위:** [플랫폼]
### 🎯 디자인 원칙
1. **일관성 (Consistency)**
- 동일한 요소는 동일한 방식으로 표현
- 패턴의 재사용을 통한 학습 비용 최소화
2. **명확성 (Clarity)**
- 직관적이고 이해하기 쉬운 인터페이스
- 명확한 정보 계층 구조
3. **효율성 (Efficiency)**
- 최소한의 클릭으로 목표 달성
- 빠른 로딩과 반응성
### 🎨 컬러 시스템
#### Primary Colors
```css
--primary-50: #[색상코드];
--primary-100: #[색상코드];
--primary-500: #[색상코드]; /* Main */
--primary-900: #[색상코드];
```
#### Secondary Colors
```css
--secondary-50: #[색상코드];
--secondary-500: #[색상코드]; /* Main */
--secondary-900: #[색상코드];
```
#### Neutral Colors
```css
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-500: #6b7280;
--gray-900: #111827;
```
#### Semantic Colors
```css
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
```
### ✍️ 타이포그래피
#### Font Family
```css
--font-primary: 'Pretendard', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
```
#### Font Scale
```css
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
```
#### Font Weight
```css
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```
### 📏 Spacing System
```css
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
```
### 🔘 컴포넌트 가이드
#### Button
```css
/* Primary Button */
.btn-primary {
background: var(--primary-500);
color: white;
padding: var(--space-3) var(--space-6);
border-radius: 0.5rem;
font-weight: var(--font-medium);
}
.btn-primary:hover {
background: var(--primary-600);
}
/* Secondary Button */
.btn-secondary {
background: transparent;
color: var(--primary-500);
border: 1px solid var(--primary-500);
padding: var(--space-3) var(--space-6);
border-radius: 0.5rem;
}
```
#### Input Field
```css
.input {
border: 1px solid var(--gray-300);
border-radius: 0.5rem;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
}
.input:focus {
border-color: var(--primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
```
### 📱 반응형 브레이크포인트
```css
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
```
### 🎭 애니메이션
```css
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
--easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
--easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
```
### 📋 사용 가이드라인
#### Do's ✅
- 정의된 컬러 팔레트만 사용
- 일관된 spacing 시스템 적용
- 컴포넌트 재사용 우선
#### Don'ts ❌
- 임의의 색상 값 사용 금지
- 인라인 스타일 남용 금지
- 접근성 가이드라인 무시 금지