Loom

# Loom Design System

## Tokens — Colors

| Token | Value | Usage |
|-------|-------|-------|
| Primary Blue | `#2D6FF7` | Primary buttons, links, brand accents |
| Primary Blue Hover | `#1E5FE0` | Button hover states |
| White | `#FFFFFF` | Main background, card surfaces |
| Black | `#1B1B1B` | Headings, primary text |
| Gray 900 | `#111827` | Dark text |
| Gray 700 | `#374151` | Secondary text |
| Gray 600 | `#4B5563` | Body text |
| Gray 500 | `#6B7280` | Muted text |
| Gray 400 | `#9CA3AF` | Placeholder text |
| Gray 300 | `#D1D5DB` | Borders, dividers |
| Gray 200 | `#E5E7EB` | Light borders |
| Gray 100 | `#F3F4F6` | Subtle backgrounds |
| Gray 50 | `#F9FAFB` | Section backgrounds |
| Light Blue | `#E8F0FE` | Feature section backgrounds |
| Light Purple | `#F5F3FF` | Card backgrounds, accents |
| Purple | `#8B5CF6` | Gradient start, accents |
| Pink | `#EC4899` | Gradient accent |
| Orange | `#F97316` | Gradient start |
| Teal | `#06B6D4` | Gradient accent |
| Info Blue | `#3B82F6` | Info states |
| Success Green | `#10B981` | Success states |
| Warning Yellow | `#F59E0B` | Warning states |
| Error Red | `#EF4444` | Error states |

## Tokens — Typography

**Font Families:**
- Primary: `'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif`
- Monospace: `'SF Mono', 'Consolas', 'Monaco', monospace`

**Type Scale:**

| Token | Size | Line Height | Weight | Usage |
|-------|------|-------------|--------|-------|
| Display XL | 72px | 1.1 | 900 | Hero headings |
| Display L | 60px | 1.1 | 900 | Page headings |
| Display M | 48px | 1.2 | 900 | Section headings |
| Heading XL | 36px | 1.2 | 700 | Large headings |
| Heading L | 30px | 1.3 | 700 | Subsection headings |
| Heading M | 24px | 1.4 | 700 | Card headings |
| Heading S | 20px | 1.4 | 600 | Small headings |
| Body L | 20px | 1.6 | 400 | Large body text |
| Body M | 18px | 1.6 | 400 | Subheadings, leads |
| Body | 16px | 1.5 | 400 | Default body text |
| Body S | 14px | 1.5 | 400 | Small text, captions |
| Label | 14px | 1.4 | 500 | Form labels |
| Caption | 12px | 1.4 | 500 | Tiny text, badges |

## Tokens — Spacing

Base unit: 4px

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Minimal spacing |
| sm | 8px | Tight spacing |
| md | 12px | Default spacing |
| base | 16px | Base unit |
| lg | 24px | Comfortable spacing |
| xl | 32px | Large spacing |
| 2xl | 48px | Section spacing |
| 3xl | 64px | Large sections |
| 4xl | 80px | Major sections |
| 5xl | 96px | Hero sections |
| 6xl | 128px | Extra large sections |

## Tokens — Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| sm | 6px | Small elements |
| base | 8px | Buttons, inputs |
| md | 12px | Cards, panels |
| lg | 16px | Large cards |
| xl | 24px | Feature cards, video players |
| 2xl | 32px | Hero elements |
| full | 9999px | Pills, badges, avatars |

## Tokens — Shadows

| Token | Value | Usage |
|-------|-------|-------|
| xs | `0 1px 2px rgba(0, 0, 0, 0.05)` | Subtle elevation |
| sm | `0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)` | Cards |
| base | `0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)` | Elevated cards |
| md | `0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)` | Hover states |
| lg | `0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)` | Modals, popovers |
| xl | `0 25px 50px rgba(0, 0, 0, 0.15)` | Dialogs |

## Tokens — Borders

| Token | Value | Usage |
|-------|-------|-------|
| Default | `1px solid #E5E7EB` | Standard borders |
| Light | `1px solid #F3F4F6` | Subtle dividers |
| Medium | `1px solid #D1D5DB` | Emphasized borders |
| Focus | `2px solid #2D6FF7` | Focus states |

## Components

### Buttons

**Primary:**
- Background: `#2D6FF7`
- Text: `#FFFFFF`
- Padding: `12px 24px`
- Border radius: `8px`
- Font: 16px, weight 500
- Hover: `#1E5FE0` with shadow

**Secondary:**
- Background: `#E8F0FE`
- Text: `#1B1B1B`
- Same padding and radius
- Hover: darker background

**Ghost/Outline:**
- Background: transparent
- Border: `1px solid #D1D5DB`
- Text: `#374151`

### Cards

**Pricing Card:**
- Background: `#FFFFFF`
- Border: `1px solid #E5E7EB`
- Border radius: `16px`
- Padding: `32px`
- Shadow: `sm`

**Featured Card (Business + AI):**
- Gradient border effect
- Purple to orange gradient
- Background: `linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(251, 146, 60, 0.1))`

**Use Case Card:**
- Background: `#F5F3FF`
- Border radius: `24px`
- Padding: `48px 24px`
- No border, no shadow

### Navigation

**Header:**
- Height: 72px
- Background: `#FFFFFF`
- Border bottom: `1px solid #F3F4F6`
- Logo: 40px height
- Nav items: 16px, weight 500
- Horizontal layout with dropdowns

### Forms

**Input:**
- Height: 48px
- Padding: `12px 16px`
- Border: `1px solid #D1D5DB`
- Border radius: `8px`
- Font: 16px
- Focus: border `#2D6FF7`, shadow

**Radio Button:**
- Size: 20px
- Border: `2px solid #D1D5DB`
- Checked: `#2D6FF7` with inner dot

### Badges

**Most Popular:**
- Background: gradient or solid color
- Padding: `4px 12px`
- Border radius: `6px`
- Font: 12px, uppercase, weight 600

### Video Player

- Border radius: `24px`
- Shadow: `lg`
- Aspect ratio: 16:9
- Play button: 64px circle, `#2D6FF7`

## Layout Patterns

### Hero Section
- Max width: 1200px
- Vertical padding: 96px
- Centered content
- Heading + subheading + CTA buttons
- Video below fold with large border radius

### Pricing Grid
- 4-column grid on desktop (1fr each)
- Gap: 24px
- Responsive: 2 columns tablet, 1 column mobile
- Featured card has visual emphasis (border, badge)

### Feature Cards
- 3-column grid
- Equal height cards
- Large border radius (24px)
- Gradient backgrounds in mockups

### Container
- Max width: 1200px
- Horizontal padding: 24px (mobile), 48px (desktop)
- Centered with `margin: 0 auto`