# DESIGN.md
## Design System Overview
[Brief description of the design philosophy and principles]
## Typography
### Font Stack
```css
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
```
### Type 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 */
--text-5xl: 3rem; /* 48px */
```
### Font Weights
```css
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```
## Color Palette
### Primary Colors
```css
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-200: #bfdbfe;
--primary-300: #93c5fd;
--primary-400: #60a5fa;
--primary-500: #3b82f6; /* Main */
--primary-600: #2563eb;
--primary-700: #1d4ed8;
--primary-800: #1e40af;
--primary-900: #1e3a8a;
```
### Neutral Colors
```css
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
```
### Semantic Colors
```css
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
```
## Spacing System
### Base Unit: 4px
```css
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
```
## Component Styles
### Buttons
```css
.btn {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-weight: var(--font-medium);
transition: all 0.2s;
}
.btn-primary {
background: var(--primary-500);
color: white;
}
.btn-secondary {
background: var(--gray-200);
color: var(--gray-800);
}
```
### Cards
```css
.card {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
```
### Forms
```css
.input {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
font-size: var(--text-base);
}
.input:focus {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
```
## Visual Effects
### Shadows
```css
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
```
### Border Radius
```css
--radius-sm: 0.125rem; /* 2px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-full: 9999px;
```
### Transitions
```css
--transition-fast: 150ms ease-in-out;
--transition-base: 200ms ease-in-out;
--transition-slow: 300ms ease-in-out;
```
## Animation System
### Keyframes
```css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
```
### Usage Classes
```css
.animate-fadeIn { animation: fadeIn var(--transition-base); }
.animate-slideUp { animation: slideUp var(--transition-slow); }
.animate-pulse { animation: pulse 2s infinite; }
```
## Responsive Design
### Breakpoints
```css
--screen-sm: 640px; /* Mobile landscape */
--screen-md: 768px; /* Tablet */
--screen-lg: 1024px; /* Desktop */
--screen-xl: 1280px; /* Large desktop */
--screen-2xl: 1536px; /* Extra large */
```
### Mobile-First Media Queries
```css
/* Tablet and up */
@media (min-width: 768px) { }
/* Desktop and up */
@media (min-width: 1024px) { }
/* Large desktop and up */
@media (min-width: 1280px) { }
```
## Accessibility
### Focus States
```css
:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
```
### Color Contrast
- Text on background: minimum 4.5:1 ratio
- Large text: minimum 3:1 ratio
- Interactive elements: minimum 3:1 ratio
### Motion Preferences
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
## Dark Mode
### Dark Theme Variables
```css
[data-theme="dark"] {
--bg-primary: var(--gray-900);
--bg-secondary: var(--gray-800);
--text-primary: var(--gray-50);
--text-secondary: var(--gray-300);
}
```
## Keywords <!-- #keywords -->
- design system
- typography
- colors
- spacing
- components
- accessibility
