Mercury

# Mercury Design System

## Tokens — Colors

| Token | Hex | Usage |
|-------|-----|-------|
| `primary-600` | `#5865F2` | Primary CTA buttons, active states, links |
| `primary-700` | `#4752C4` | Hovered primary buttons |
| `primary-50` | `#EBEDFB` | Light primary backgrounds |
| `secondary-500` | `#8B7EB8` | Secondary accents |
| `secondary-50` | `#E8E9F3` | Secondary button backgrounds |
| `dark-900` | `#1A1B26` | Footer, dark section backgrounds |
| `dark-800` | `#2D2E3F` | Dark gradients, overlays |
| `dark-700` | `#3F3D56` | Card dark mode, gradients |
| `purple-600` | `#4B3F6B` | Product images, decorative elements |
| `purple-500` | `#5D4F7A` | Purple accents |
| `gray-900` | `#1F2937` | Headings, primary text on light |
| `gray-700` | `#374151` | Body text on light backgrounds |
| `gray-500` | `#6B7280` | Muted text, descriptions |
| `gray-400` | `#9CA3AF` | Placeholder text |
| `gray-100` | `#F3F4F6` | Light borders, dividers |
| `gray-50` | `#F9FAFB` | Light backgrounds, card backgrounds |
| `white` | `#FFFFFF` | White surfaces, text on dark |

## Tokens — Typography

### Font Families
- **Sans**: `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
- **Display**: Same as Sans (or potentially custom)

### Type Scale

| Token | Size | Line Height | Weight | Usage |
|-------|------|-------------|--------|-------|
| `display-xl` | 72px | 1.1 | 600 | Hero headings |
| `display-lg` | 60px | 1.15 | 600 | Large hero text |
| `heading-xl` | 48px | 1.2 | 600 | Page headings |
| `heading-lg` | 40px | 1.25 | 600 | Section headings |
| `heading-md` | 32px | 1.3 | 600 | Card headings |
| `heading-sm` | 24px | 1.35 | 600 | Subheadings |
| `body-lg` | 18px | 1.6 | 400 | Large body text, hero subtext |
| `body-md` | 16px | 1.6 | 400 | Standard body text |
| `body-sm` | 14px | 1.5 | 400 | Small text, captions |
| `label-md` | 15px | 1.4 | 500 | Navigation links, labels |
| `label-sm` | 13px | 1.4 | 500 | Small labels, footnotes |

## Tokens — Spacing

| Token | Value | Usage |
|-------|-------|-------|
| `space-2` | 8px | Tight spacing, icon gaps |
| `space-3` | 12px | Small element spacing |
| `space-4` | 16px | Default element spacing |
| `space-5` | 20px | Medium spacing |
| `space-6` | 24px | Card spacing, margins |
| `space-8` | 32px | Large spacing, section gaps |
| `space-10` | 40px | XL spacing |
| `space-12` | 48px | Section spacing |
| `space-16` | 64px | Large section spacing |
| `space-20` | 80px | Page section padding |
| `space-24` | 96px | XL page section padding |
| `space-30` | 120px | Hero section padding |

## Tokens — Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `radius-sm` | 6px | Small elements |
| `radius-md` | 8px | Buttons, inputs |
| `radius-lg` | 12px | Cards, containers |
| `radius-xl` | 16px | Large cards |
| `radius-2xl` | 20px | Feature cards, modals |
| `radius-full` | 9999px | Pills, badges |

## Tokens — Shadows

| Token | Value | Usage |
|-------|-------|-------|
| `shadow-sm` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` | Subtle depth |
| `shadow-md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1)` | Cards, dropdowns |
| `shadow-lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1)` | Elevated cards |
| `shadow-xl` | `0 20px 25px -5px rgba(0, 0, 0, 0.1)` | Modals, popovers |

## Tokens — Borders

| Token | Value | Usage |
|-------|-------|-------|
| `border-light` | `1px solid #E5E7EB` | Light mode dividers |
| `border-dark` | `1px solid #374151` | Dark mode dividers |

## Components

### Button

**Primary Button:**
- Background: `primary-600` (#5865F2)
- Text: white, 15px, weight 500
- Padding: 12px 28px
- Border radius: 8px
- Hover: `primary-700`

**Secondary Button:**
- Background: `secondary-50` (#E8E9F3)
- Text: `gray-900`, 15px, weight 500
- Padding: 12px 28px
- Border radius: 8px
- Hover: darken background 5%

**Ghost Button:**
- Background: transparent
- Text: `gray-700`
- Border: 1px solid `gray-300`
- Padding: 10px 24px
- Border radius: 8px

### Navigation

- Height: ~80px
- Logo: 24px height
- Nav links: 15px, weight 500, color `white` on dark or `gray-700` on light
- Dropdown indicator: chevron down icon
- Max width: 1280px container
- Padding horizontal: 32-48px

### Input Field

- Background: rgba(255, 255, 255, 0.1) on dark, white on light
- Border: 1px solid rgba(255, 255, 255, 0.2) or `gray-300`
- Padding: 12px 16px
- Border radius: 8px
- Placeholder: `gray-400`
- Text: 15px

### Card (Pricing)

- Background: white
- Border: 1px solid `gray-200`
- Border radius: 16px
- Padding: 40px 32px
- Shadow: `shadow-md`

### Footer

- Background: `dark-900` (#1A1B26)
- Text: `gray-400`, 14px
- Link hover: white
- Padding: 48px vertical

### Disclaimer Banner

- Background: `dark-900` or rgba(0, 0, 0, 0.8)
- Text: white or `gray-300`, 12-13px
- Padding: 16px 24px
- Full width, fixed at bottom

## Layout Patterns

### Hero Section
- Full viewport height or min-height 600px
- Centered content, max-width 800px for text
- Background: gradient or image overlay
- Vertical padding: 120-160px
- Text alignment: center

### Content Container
- Max width: 1280px
- Horizontal padding: 32-48px
- Margin: 0 auto

### Grid Layout (Pricing Cards)
- 3 columns on desktop
- Gap: 24px
- Equal height cards

### Navigation Layout
- Fixed or sticky header
- Flexbox: space-between
- Left: logo
- Center: nav links
- Right: auth buttons