---
description: Design system foundations - colors, typography, spacing, component patterns
globs: "**/*.vue,**/*.css,**/*.ts"
alwaysApply: false
---

# Design System

## Design Tokens

### Color Palette
Semantic color tokens defined by purpose, not appearance:
- `primary` — main brand actions (#606060 / configurable)
- `accent` — highlight, Bitcoin orange (#F7931A)
- `success` — positive states (#10B981)
- `error` — negative states (#EF4444)
- `warning` — caution states (#F59E0B)
- `info` — informational (#3B82F6)
- Neutrals: gray-50 through gray-900

### Typography
- Display font: Geometric sans-serif (Space Grotesk, Inter Display)
- Body font: Clean sans-serif (Inter, system-ui)
- Mono font: Menlo, Monaco, Courier New
- Use single font family with weight variations for simplicity

### Spacing
All spacing on 4px grid. Common patterns:
- Component padding: `p-4` (16px) to `p-6` (24px)
- Section spacing: `py-12` (48px) to `py-16` (64px)
- Element gaps: `gap-4` (16px) default

### Shadows & Glows
```css
shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08)
shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1)
shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15)
```

## Component Patterns

### Buttons
- Primary: solid background, white text, `rounded-lg`, `font-semibold`
- Secondary: border only, primary text, fill on hover
- Ghost: text only, subtle background on hover
- Icon: `p-2 rounded-md`, minimum 44x44px touch target
- Sizes: sm (`px-4 py-2`), md (`px-6 py-3`), lg (`px-8 py-4`)

### Cards
- Background: white/dark with `rounded-2xl` (16px radius)
- Padding: `p-6`
- Shadow: `shadow-card` default, `shadow-elevated` on hover
- Interactive cards get `hover:shadow-lg transition-shadow duration-300 cursor-pointer`

### Form Elements
- Inputs: `min-h-[44px]` touch target, `text-base` (prevents iOS zoom), `rounded-lg`
- Labels: `text-sm font-semibold text-gray-700 mb-2`
- Error text: `text-sm text-error mt-1`
- Focus: `focus:border-primary focus:ring-2 focus:ring-primary/50`

### Badges
- Status badges: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`
- Color variants: success (green-100/green-800), warning (yellow-100/yellow-800), error (red-100/red-800)

### Icons
- SVG preferred, using Lucide Icons
- Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (48px)
- Always use `currentColor` for stroke/fill
- Icon-only buttons must have `aria-label`

## Layout Patterns
- Standard container: `max-w-7xl mx-auto px-4 md:px-6`
- Reading container: `max-w-3xl mx-auto px-4 md:px-6`
- Sidebar + content: `grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6`