Bluesky

# Bluesky Design System

## Tokens — Colors

| Token | Hex | Usage |
|-------|-----|-------|
| `blue-primary` | `#0085FF` | Primary brand color, CTAs, links, active states |
| `blue-light` | `#D0E7F5` | Light backgrounds, modal overlays |
| `blue-gradient-start` | `#0085FF` | Gradient background start |
| `blue-gradient-end` | `#58B5F9` | Gradient background end |
| `white` | `#FFFFFF` | Text on blue, card backgrounds, primary backgrounds |
| `gray-50` | `#F9FAFB` | Lightest gray, subtle backgrounds |
| `gray-100` | `#F3F4F6` | Skeleton loaders, disabled states |
| `gray-200` | `#E5E7EB` | Borders, dividers |
| `gray-300` | `#D1D5DB` | Inactive elements |
| `gray-400` | `#9CA3AF` | Placeholder text |
| `gray-500` | `#6B7280` | Secondary text, icons |
| `gray-600` | `#4B5563` | Body text on light backgrounds |
| `gray-700` | `#374151` | Headings, emphasized text |
| `gray-900` | `#111827` | Primary text, dark headings |
| `black` | `#000000` | High contrast text |

## Tokens — Typography

**Font Families:**
- Primary: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`
- Fallback: System font stack

**Type Scale:**

| Token | Size | Line Height | Weight | Usage |
|-------|------|-------------|--------|-------|
| `text-xs` | 12px | 16px | 400 | Metadata, timestamps |
| `text-sm` | 13px | 18px | 400 | Captions, small labels |
| `text-base` | 15px | 22px | 400 | Body text, post content |
| `text-lg` | 16px | 24px | 400 | Large body, input text |
| `text-xl` | 18px | 28px | 500 | Subheadings |
| `text-2xl` | 24px | 32px | 600 | Card headings |
| `text-3xl` | 30px | 36px | 700 | Section titles |
| `text-4xl` | 36px | 40px | 700 | Page headings |
| `text-5xl` | 48px | 1 | 700 | Hero headings |
| `text-6xl` | 60px | 1 | 700 | Large hero text |
| `text-7xl` | 72px | 1 | 700 | Marketing headlines |

## Tokens — Spacing

| Token | Value | Usage |
|-------|-------|-------|
| `space-1` | 4px | Tight spacing, icon gaps |
| `space-2` | 8px | Small gaps, compact layouts |
| `space-3` | 12px | Button padding vertical |
| `space-4` | 16px | Default gap, card padding |
| `space-5` | 20px | Medium spacing |
| `space-6` | 24px | Button padding horizontal, card padding |
| `space-8` | 32px | Section spacing |
| `space-10` | 40px | Large section gaps |
| `space-12` | 48px | Major section spacing |
| `space-16` | 64px | Hero spacing |
| `space-20` | 80px | Extra large spacing |

## Tokens — Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `radius-sm` | 4px | Small elements, badges |
| `radius-md` | 8px | Input fields |
| `radius-lg` | 12px | Small cards |
| `radius-xl` | 16px | Cards, containers |
| `radius-2xl` | 24px | Large cards, modals, buttons |
| `radius-full` | 9999px | Pills, avatars, circular elements |

## Tokens — Shadows

| Token | Value | Usage |
|-------|-------|-------|
| `shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.05)` | Subtle elevation |
| `shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.1)` | Cards, dropdowns |
| `shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1)` | Modals, popovers |
| `shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.1)` | Large modals |

## Tokens — Borders

| Token | Value | Usage |
|-------|-------|-------|
| `border-width` | 1px | Default borders |
| `border-color` | `#E5E7EB` | Default border color |
| `border-color-hover` | `#D1D5DB` | Hover state borders |

## Components

### Button
- **Primary**: Blue background (`#0085FF`), white text, 24px border radius, 12px vertical × 24px horizontal padding
- **Secondary**: White background, blue text, blue border
- **Ghost**: Transparent background, blue text on hover
- **States**: Hover darkens by ~10%, active state slight scale

### Card
- White background
- 16-24px border radius
- 16-24px padding
- Subtle shadow (`shadow-md`)
- 1px border (`gray-200`)

### Avatar
- Circular (border-radius: 50%)
- Sizes: 24px, 32px, 40px, 48px, 64px
- Gray background for skeleton state

### Post Card
- White background
- Avatar (40px) + content layout
- Action buttons (reply, repost, like) in horizontal row
- Icon size: 16-20px
- Gray icons, blue on hover/active

### Modal/Dialog
- Centered overlay
- Light blue gradient background with blur
- White/light content card
- 24px border radius
- Close button (X) in top-right
- Max-width: 480-600px
- Padding: 32-48px

### Navigation
- Horizontal tabs with underline indicator
- Pill-shaped nav items in header
- Active state: blue underline (3px thick)
- Text: 15px, medium weight

### Input
- Border: 1px solid gray-300
- Border radius: 8px
- Padding: 12px 16px
- Focus: blue border, blue ring
- Placeholder: gray-400

### Skeleton Loader
- Gray-100 background
- Shimmer animation
- Border radius matches final component

## Layout Patterns

### Three-Column Layout (Desktop)
- Left sidebar: 280px fixed
- Center feed: Flexible, max-width 600px
- Right sidebar: 320px fixed
- Gap: 24px

### Feed Layout
- Full-width container
- Posts stacked vertically with 1px gray border between
- No gap between posts (borders serve as dividers)

### Hero Section
- Full-width blue gradient background
- Centered content, max-width 1200px
- Large heading + subheading + CTA
- Decorative post cards positioned absolutely

### Content Cards
- Max-width: 800-1000px
- Centered on page
- 24px border radius
- White background on blue gradient

### Modal Centering
- Fixed position overlay
- Flexbox centering (align-items: center, justify-content: center)
- Semi-transparent backdrop