# Capsule — Complete Design System
> Version 1.0 · Derived from the Capsule Theme (Theme 04)

---

## Table of Contents

1. [System Overview](#1-system-overview)
2. [CSS Custom Properties — Master Token Sheet](#2-css-custom-properties--master-token-sheet)
3. [Color Palette](#3-color-palette)
4. [Typography System](#4-typography-system)
5. [Spacing System](#5-spacing-system)
6. [Border Radius System](#6-border-radius-system)
7. [Shadow & Elevation System](#7-shadow--elevation-system)
8. [Component Specifications](#8-component-specifications)
9. [Layout & Grid System](#9-layout--grid-system)
10. [Animation & Transition Tokens](#10-animation--transition-tokens)
11. [Z-Index System](#11-z-index-system)
12. [Breakpoints](#12-breakpoints)
13. [Icon System](#13-icon-system)
14. [State Definitions](#14-state-definitions)

---

## 1. System Overview

**Design Language:** Capsule  
**Aesthetic Family:** Dark-mode pill UI, developer tools aesthetic, fluid rounded forms, blue-accent focus  
**Personality:** Approachable yet technical, smooth, confident, contemporary — communicates speed, precision, and modern infrastructure  
**Best Suited For:** Developer dashboards, CI/CD platforms, deployment tools, SaaS products, DevOps UIs, project management, API consoles, dark-mode productivity apps

**Core Principles:**
- Everything is a pill — buttons, inputs, badges, and even status indicators use `border-radius: 9999px`
- Dark backgrounds with layered depth — three distinct dark tones create hierarchy without light
- Blue as the single energetic accent — `#58a6ff` anchors all interactive states
- Outfit for structural UI; Nunito Sans for reading-friendly display and body copy
- Glow shadows over flat shadows — interactive elements cast subtle blue radiance on hover
- Transparency-tinted badges over solid-filled ones — status communicates with restraint

---

## 2. CSS Custom Properties — Master Token Sheet

Paste this block into the `:root` of every project using this system.

```css
:root {

  /* ─── COLOR: BACKGROUNDS ─────────────────────────────────────── */
  --color-bg-base:          #0d1117;   /* Page / app background — deepest layer */
  --color-bg-surface:       #161b22;   /* Cards, panels, raised containers */
  --color-bg-elevated:      #21262d;   /* Hover states, nested surfaces */
  --color-bg-sunken:        #0a0d12;   /* Inset wells, code blocks, sidebar depths */
  --color-bg-overlay:       rgba(13, 17, 23, 0.80); /* Modal backdrop */
  --color-bg-overlay-blur:  rgba(13, 17, 23, 0.72); /* Blur-capable overlay */

  /* ─── COLOR: BLUE ACCENT ─────────────────────────────────────── */
  --color-blue-100:         rgba(88, 166, 255, 0.08);   /* Lightest tint — hover washes */
  --color-blue-200:         rgba(88, 166, 255, 0.15);   /* Badge background, gentle highlight */
  --color-blue-300:         #79b8ff;   /* Light blue, hover state of accent */
  --color-blue-400:         #58a6ff;   /* Primary accent — buttons, links, focus */
  --color-blue-500:         #388bfd;   /* Pressed / active accent */
  --color-blue-600:         #1f6feb;   /* Deeper blue, strong active states */
  --color-blue-glow:        0 4px 16px rgba(88, 166, 255, 0.25);

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:     #e6edf3;   /* Near-white — headings, primary content */
  --color-text-secondary:   #c9d1d9;   /* Medium — body copy, descriptions */
  --color-text-tertiary:    #8b949e;   /* Muted — labels, captions, helper text */
  --color-text-muted:       #484f58;   /* Dim — section titles, timestamps */
  --color-text-disabled:    #30363d;   /* Disabled — non-interactive elements */
  --color-text-inverse:     #0d1117;   /* Dark text on bright accent backgrounds */
  --color-text-placeholder: #484f58;   /* Input placeholder */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-hairline:  #1c2128;   /* Subtlest divider, barely-there */
  --color-border-light:     #21262d;   /* Section separators, table row rules */
  --color-border-medium:    #30363d;   /* Input borders, card edges */
  --color-border-strong:    #484f58;   /* Active states, focused rings */
  --color-border-accent:    #58a6ff;   /* Focused input, selected card */
  --color-border-surface:   #30363d;   /* Standard surface card border */

  /* ─── COLOR: INTERACTIVE SURFACES ───────────────────────────── */
  --color-btn-primary-bg:   #58a6ff;   /* Blue pill button */
  --color-btn-primary-text: #0d1117;   /* Dark text on blue button */
  --color-btn-primary-hover:#79b8ff;   /* Lighter blue on hover */
  --color-btn-primary-shadow: rgba(88, 166, 255, 0.25);

  --color-btn-secondary-bg:   #21262d;
  --color-btn-secondary-text: #e6edf3;
  --color-btn-secondary-border: #30363d;
  --color-btn-secondary-hover: #30363d;

  --color-btn-outline-text:   #58a6ff;
  --color-btn-outline-border: #58a6ff;
  --color-btn-outline-hover:  rgba(88, 166, 255, 0.10);

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:          #3fb950;
  --color-success-bg:       rgba(63, 185, 80, 0.15);
  --color-success-border:   rgba(63, 185, 80, 0.30);
  --color-warning:          #d29922;
  --color-warning-bg:       rgba(210, 153, 34, 0.15);
  --color-warning-border:   rgba(210, 153, 34, 0.30);
  --color-error:            #f85149;
  --color-error-bg:         rgba(248, 81, 73, 0.15);
  --color-error-border:     rgba(248, 81, 73, 0.30);
  --color-info:             #58a6ff;
  --color-info-bg:          rgba(88, 166, 255, 0.15);
  --color-info-border:      rgba(88, 166, 255, 0.30);
  --color-purple:           #bc8cff;
  --color-purple-bg:        rgba(188, 140, 255, 0.15);

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Cascadia Code', 'Consolas', monospace;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.625rem;   /* 10px */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.875rem;   /* 14px */
  --text-lg:    1rem;       /* 16px */
  --text-xl:    1.125rem;   /* 18px */
  --text-2xl:   1.25rem;    /* 20px */
  --text-3xl:   1.5rem;     /* 24px */
  --text-4xl:   1.875rem;   /* 30px */
  --text-5xl:   2.25rem;    /* 36px */
  --text-6xl:   3rem;       /* 48px */
  --text-7xl:   3.75rem;    /* 60px */

  /* ─── TYPOGRAPHY: WEIGHTS ────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ───────────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-base:    1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.03em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* ─── SPACING SCALE ──────────────────────────────────────────── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-9:   18px;
  --space-10:  20px;
  --space-11:  22px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-18:  36px;
  --space-20:  40px;
  --space-24:  48px;
  --space-28:  56px;
  --space-32:  64px;
  --space-40:  80px;
  --space-48:  96px;
  --space-64:  128px;
  --space-80:  160px;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     4px;    /* Checkbox, table cells — only non-pill interactive element */
  --radius-sm:     8px;    /* Compact inner containers, inline blocks */
  --radius-md:     12px;   /* Small cards, compact panels */
  --radius-lg:     16px;   /* Cards, modals, dropdown panels — standard container */
  --radius-xl:     20px;   /* Large modals, hero containers */
  --radius-full:   9999px; /* Primary radius — ALL buttons, inputs, badges, toggles */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.50);
  --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.70);
  --shadow-modal:   0 24px 64px rgba(0, 0, 0, 0.70);
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-dropdown: 0 16px 32px rgba(0, 0, 0, 0.50);
  --shadow-blue-glow: 0 4px 16px rgba(88, 166, 255, 0.25);

  /* ─── ANIMATION ──────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --duration-instant:  50ms;
  --duration-fast:    100ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container-xs:    380px;
  --container-sm:    480px;
  --container-md:    640px;
  --container-lg:    800px;
  --container-xl:   1040px;
  --container-2xl:  1280px;
  --container-3xl:  1440px;

  /* ─── Z-INDEX STACK ──────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-top:      999;

}
```

---

## 3. Color Palette

### 3.1 Background Colors

| Token | Hex | RGB | Use |
|-------|-----|-----|-----|
| `--color-bg-base` | `#0d1117` | 13, 17, 23 | Page-level background — deepest layer |
| `--color-bg-surface` | `#161b22` | 22, 27, 34 | Cards, panels, raised surfaces |
| `--color-bg-elevated` | `#21262d` | 33, 38, 45 | Hover state fills, nested containers |
| `--color-bg-sunken` | `#0a0d12` | 10, 13, 18 | Inset wells, code backgrounds |
| `--color-bg-overlay` | `rgba(13,17,23,0.80)` | — | Modal backdrop scrim |

### 3.2 Blue Accent Scale

| Token | Hex / Value | Use |
|-------|-------------|-----|
| `--color-blue-100` | `rgba(88,166,255,0.08)` | Hover wash on outline buttons, ghost states |
| `--color-blue-200` | `rgba(88,166,255,0.15)` | Info / running badge background |
| `--color-blue-300` | `#79b8ff` | Hover state of primary button |
| `--color-blue-400` | `#58a6ff` | **Primary accent** — buttons, links, focus rings |
| `--color-blue-500` | `#388bfd` | Pressed / active accent |
| `--color-blue-600` | `#1f6feb` | Deep interaction, strong selected states |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#e6edf3` | All headings, primary content, high-emphasis |
| `--color-text-secondary` | `#c9d1d9` | Body copy, descriptions, supporting text |
| `--color-text-tertiary` | `#8b949e` | Labels, captions, hints, nav items |
| `--color-text-muted` | `#484f58` | Section titles (uppercase), timestamps, metadata |
| `--color-text-disabled` | `#30363d` | Disabled non-interactive states |
| `--color-text-inverse` | `#0d1117` | Text on bright blue button backgrounds |
| `--color-text-placeholder` | `#484f58` | Input placeholder text |

### 3.4 Border Colors

| Token | Hex | Role |
|-------|-----|------|
| `--color-border-hairline` | `#1c2128` | Subtlest dividers within surfaces |
| `--color-border-light` | `#21262d` | Table row rules, section separators |
| `--color-border-medium` | `#30363d` | Default input, card, and surface edge |
| `--color-border-strong` | `#484f58` | Active/hover borders |
| `--color-border-accent` | `#58a6ff` | Focused input, selected card outline |

### 3.5 Semantic Colors

| State | Text | Background | Border |
|-------|------|------------|--------|
| Success / Deployed | `#3fb950` | `rgba(63,185,80,0.15)` | `rgba(63,185,80,0.30)` |
| Warning / Building | `#d29922` | `rgba(210,153,34,0.15)` | `rgba(210,153,34,0.30)` |
| Error / Failed | `#f85149` | `rgba(248,81,73,0.15)` | `rgba(248,81,73,0.30)` |
| Info / Running | `#58a6ff` | `rgba(88,166,255,0.15)` | `rgba(88,166,255,0.30)` |
| Preview / Purple | `#bc8cff` | `rgba(188,140,255,0.15)` | `rgba(188,140,255,0.30)` |

---

## 4. Typography System

### 4.1 Font Families

**Display / Headings — `'Nunito Sans'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800;900&display=swap')`
- Fallback: `'Segoe UI', system-ui, sans-serif`
- Weights available: 300, 400, 500, 600, 700, 800, 900
- Character: Rounded, friendly, approachable sans — high x-height, excellent readability at large sizes
- Usage: Page titles, hero display text, large numerical values

**Body / UI — `'Outfit'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap')`
- Fallback: `'Segoe UI', system-ui, sans-serif`
- Weights used: 300, 400, 500, 600, 700, 800
- Character: Clean geometric sans, modern, slightly softened — equally legible at UI and reading sizes
- Usage: All UI text, buttons, inputs, navigation, body copy, labels, descriptions

**Mono / Code — `'IBM Plex Mono'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap')`
- Fallback: `'Cascadia Code', 'Consolas', monospace`
- Weights used: 300, 400, 500
- Character: Technical, developer-oriented — precise spacing, clear disambiguation of characters
- Usage: Code snippets, branch names, commit hashes, CLI output, technical metadata, keyboard shortcuts

---

### 4.2 Type Scale — Full Specification

#### Display (Nunito Sans)

| Role | Size Token | Size (rem/px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|---------------|--------|-------------|----------------|------|
| Hero Display | `--text-7xl` | 3.75rem / 60px | 900 | 1.05 | -0.03em | Nunito Sans |
| Page Title | `--text-6xl` | 3rem / 48px | 900 | 1.1 | -0.03em | Nunito Sans |
| Section Title | `--text-5xl` | 2.25rem / 36px | 800 | 1.15 | -0.02em | Nunito Sans |
| Card Display | `--text-4xl` | 1.875rem / 30px | 800 | 1.2 | -0.02em | Nunito Sans |
| Sub-display | `--text-3xl` | 1.5rem / 24px | 700 | 1.25 | -0.01em | Nunito Sans |

#### Body / UI (Outfit)

| Role | Size Token | Size (rem/px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|---------------|--------|-------------|----------------|------|
| Heading H1 | `--text-3xl` | 1.5rem / 24px | 700 | 1.3 | -0.01em | Outfit |
| Heading H2 | `--text-2xl` | 1.25rem / 20px | 700 | 1.35 | -0.01em | Outfit |
| Subheading | `--text-xl` | 1.125rem / 18px | 500 | 1.4 | 0em | Outfit |
| Large Body | `--text-lg` | 1rem / 16px | 400 | 1.65 | 0em | Outfit |
| Base Body | `--text-md` | 0.875rem / 14px | 400 | 1.65 | 0em | Outfit |
| Small Body | `--text-base` | 0.8125rem / 13px | 400 | 1.6 | 0em | Outfit |
| Caption | `--text-sm` | 0.75rem / 12px | 400 | 1.5 | 0em | Outfit |
| Button Large | `--text-md` | 0.875rem / 14px | 700 | 1 | 0.01em | Outfit |
| Button Base | `--text-base` | 0.8125rem / 13px | 600 | 1 | 0.01em | Outfit |
| Button Small | `--text-sm` | 0.75rem / 12px | 600 | 1 | 0.01em | Outfit |
| Nav Link | `--text-base` | 0.8125rem / 13px | 500 | 1 | 0em | Outfit |

#### Mono / Labels (IBM Plex Mono)

| Role | Size Token | Size (rem/px) | Weight | Transform | Letter Spacing | Font |
|------|-----------|---------------|--------|-----------|----------------|------|
| Section Title | `--text-2xs` | 0.625rem / 10px | 600 | uppercase | 0.14em | Outfit (not mono) |
| Field Label | `--text-sm` | 0.75rem / 12px | 500 | none | 0em | Outfit |
| Badge / Chip | `--text-2xs` | 0.625rem / 10px | 700 | uppercase | 0.03em | Outfit |
| Branch Name | `--text-md` | 0.875rem / 14px | 400 | none | 0em | IBM Plex Mono |
| Commit Hash | `--text-sm` | 0.75rem / 12px | 400 | none | 0em | IBM Plex Mono |
| Timestamp | `--text-sm` | 0.75rem / 12px | 300 | none | 0em | Outfit |
| Code Inline | `--text-sm` | 0.75rem / 12px | 400 | none | 0em | IBM Plex Mono |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@300;400;500&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);       /* 36px */
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);       /* 30px */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);       /* 20px */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);        /* 16px */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-md);        /* 14px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);      /* 13px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-tertiary);
}

.section-title {
  font-family: var(--font-body);
  font-size: var(--text-2xs);       /* 10px */
  font-weight: 600;
  letter-spacing: var(--tracking-widest); /* 0.14em */
  text-transform: uppercase;
  color: var(--color-text-muted);   /* #484f58 */
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-md);        /* 14px */
  font-weight: 400;
  line-height: var(--leading-relaxed); /* 1.65 */
  color: var(--color-text-tertiary);
}

label {
  font-family: var(--font-body);
  font-size: var(--text-sm);        /* 12px */
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
  display: block;
}

.caption, .meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}
```

---

## 5. Spacing System

Based on a 2px base unit. All spacing values are multiples or logical steps.

### 5.1 Base Scale Table

| Token | Value | Pixels | Common Use |
|-------|-------|--------|------------|
| `--space-1` | 2px | 2 | Micro gaps, icon-to-text |
| `--space-2` | 4px | 4 | Between label and helper text |
| `--space-3` | 6px | 6 | Compact badge padding V |
| `--space-4` | 8px | 8 | Badge padding H, inline gap |
| `--space-5` | 10px | 10 | Tight button padding |
| `--space-6` | 12px | 12 | Badge H padding, button gap |
| `--space-7` | 14px | 14 | Section title margin bottom base |
| `--space-8` | 16px | 16 | Card/panel horizontal padding (compact) |
| `--space-9` | 18px | 18 | Input horizontal padding |
| `--space-10` | 20px | 20 | Section title margin-bottom, field group gap |
| `--space-12` | 24px | 24 | Card standard padding |
| `--space-14` | 28px | 28 | Modal inner padding (compact) |
| `--space-16` | 32px | 32 | Modal standard padding |
| `--space-20` | 40px | 40 | Page section top margin |
| `--space-24` | 48px | 48 | Large section gap |
| `--space-32` | 64px | 64 | Hero spacing |

---

### 5.2 Component Spacing Specifications

#### Modal
```
Container padding:  32px all sides
Title margin-bottom: 6px
Description margin-bottom: 20px
Input margin-bottom: 12px
Button row margin-top: 8px
Button gap: 10px
Max-width: 480px
```

#### Card
```
Standard padding: 24px
Compact padding: 20px
Section title margin-bottom: 20px
Content gap: 8px–14px
```

#### Button
```
Small:   padding 5px 14px
Base:    padding 10px 22px
Large:   padding 12px 28px
Pill shape: same padding, border-radius: 9999px (always)
```

#### Input
```
Padding: 10px 18px (horizontal for pill form)
Textarea padding: 12px 18px (border-radius: 16px — not full pill)
Label margin-bottom: 6px
Field group gap: 16px
```

#### Badge / Status
```
Padding: 3px 12px
Font size: 11px
Border-radius: 9999px (always pill)
```

#### Table
```
Header cell padding: 10px 14px
Body cell padding: 12px 14px
Row hover: background #21262d
```

---

## 6. Border Radius System

The Capsule system uses a **pill-first** philosophy. The default radius for nearly every interactive element is `9999px`. Structural containers use `16px`. This is the defining characteristic of the system — enforce it strictly.

### 6.1 Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| `--radius-none` | `0px` | Table cells only |
| `--radius-xs` | `4px` | Checkbox, radio box |
| `--radius-sm` | `8px` | Small decorative blocks, inline code |
| `--radius-md` | `12px` | Compact badge containers |
| `--radius-lg` | `16px` | Cards, modals, dropdown menus — standard containers |
| `--radius-xl` | `20px` | Large modal dialogs |
| `--radius-full` | `9999px` | **Default** — all buttons, all inputs, all badges, toggles, pills |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Button (all sizes) | 9999px |
| Text input | 9999px |
| Textarea | 16px (not full pill — too wide to pill) |
| Select / Dropdown trigger | 9999px |
| Badge / chip (all) | 9999px |
| Checkbox | 4px |
| Radio | 9999px |
| Toggle track | 9999px |
| Card | 16px |
| Modal | 16px–20px |
| Dropdown panel | 16px |
| Tooltip | 8px |
| Table container | 8px |
| Table cell | 0px |
| Navigation bar | 0px |
| Floating nav item | 9999px |
| Status pill | 9999px |
| Progress bar track | 9999px |
| Progress bar fill | 9999px |
| Avatar / image | 9999px (circle) or 8px (square crop) |

---

## 7. Shadow & Elevation System

### 7.1 The Dark Theme Shadow Rule

All shadows use pure black as their base, since this system is dark-mode native. The formula is:

```css
rgba(0, 0, 0, [opacity])
```

Black shadows on dark surfaces create the perception of depth through the differential contrast between the surface and the space "below" it. The deeper the shadow opacity, the more elevated the element appears.

### 7.2 Elevation and Shadow Pairing

| What You're Building | Shadow to Use |
|---------------------|---------------|
| Flat card on surface | `--shadow-card` (2px 8px) |
| Dropdown panel | `--shadow-dropdown` (16px 32px) |
| Sidebar / persistent panel | `--shadow-md` |
| Modal / dialog | `--shadow-modal` (24px 64px) |
| Toast notification | `--shadow-lg` |
| Tooltip | `--shadow-sm` |
| Hovered interactive element | `--shadow-blue-glow` (blue radiance) |

### 7.3 The Blue Glow — Primary Button Hover Signature

Every primary blue button in this system emits a blue glow shadow on hover — a soft radiance that communicates interactivity in a dark environment:

```css
box-shadow: 0 4px 16px rgba(88, 166, 255, 0.25);
```

This glow is the Capsule system's signature interactive detail. It must appear on primary button hover. It should not be applied to secondary buttons or outline buttons.

### 7.4 Cards — Surface Shadow

Cards sit on `#0d1117` and use the surface background `#161b22`. The subtle shadow separates them:

```css
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
```

Alternatively, cards rely on their `border: 1px solid #30363d` to define their edge, with minimal shadow. Both approaches are valid — the border-only approach is preferred for data-dense interfaces.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-btn-primary-text);    /* #0d1117 */

  background: var(--color-btn-primary-bg); /* #58a6ff */
  border: none;
  border-radius: var(--radius-full);       /* 9999px */

  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.btn-primary:hover {
  background: var(--color-btn-primary-hover); /* #79b8ff */
  box-shadow: var(--shadow-blue-glow);
}
.btn-primary:active { transform: scale(0.98); }
```

#### Secondary Button
```css
.btn-secondary {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-btn-secondary-text);    /* #e6edf3 */

  background: var(--color-btn-secondary-bg); /* #21262d */
  border: 1px solid var(--color-btn-secondary-border); /* #30363d */
  border-radius: var(--radius-full);

  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.btn-secondary:hover { background: var(--color-btn-secondary-hover); }
```

#### Outline Button
```css
.btn-outline {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-btn-outline-text);      /* #58a6ff */

  background: transparent;
  border: 1.5px solid var(--color-btn-outline-border); /* #58a6ff */
  border-radius: var(--radius-full);

  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-outline:hover { background: var(--color-btn-outline-hover); }
```

#### Destructive Button
```css
.btn-destructive {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  color: #ffffff;

  background: var(--color-error);   /* #f85149 */
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-destructive:hover { background: #ff6b6b; }
```

---

### 8.2 Form Inputs

#### Text Input
```css
.input {
  font-family: var(--font-body);
  font-size: var(--text-md);              /* 14px */
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.5;

  background: var(--color-bg-base);       /* #0d1117 */
  border: 1.5px solid var(--color-border-medium); /* #30363d */
  border-radius: var(--radius-full);      /* 9999px */

  padding: 10px 18px;
  width: 100%;
  height: 42px;

  outline: none;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:focus {
  border-color: var(--color-border-accent);  /* #58a6ff */
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.input:disabled { opacity: 0.4; cursor: not-allowed; }
.input.error    { border-color: var(--color-error); }
```

#### Textarea
```css
.textarea {
  /* Same as .input */
  border-radius: var(--radius-lg);  /* 16px — not full pill; too wide */
  height: auto;
  min-height: 88px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}
```

#### Select / Dropdown Trigger
```css
.select {
  /* Same as .input */
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
```

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);    /* 12px */
  font-weight: 500;
  color: var(--color-text-tertiary);  /* #8b949e */
  margin-bottom: 6px;
  display: block;
}
```

---

### 8.4 Card

```css
.card {
  background: var(--color-bg-surface);    /* #161b22 */
  border: 1px solid var(--color-border-surface); /* #30363d */
  border-radius: var(--radius-lg);        /* 16px */
  padding: 24px;
  position: relative;
}
```

Note: The Capsule system does not use a top accent line on cards. The dark surface differentiates cards from the base background. Elevation is achieved through border color and background contrast only.

---

### 8.5 Modal

```css
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
}

.modal {
  background: var(--color-bg-surface);   /* #161b22 */
  border: 1px solid var(--color-border-medium); /* #30363d */
  border-radius: var(--radius-xl);       /* 20px */
  padding: 32px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-modal);
  position: relative;
}
```

Note: The Capsule modal has no accent line. The dark surface, rounded corners, and deep shadow provide sufficient visual containment. The signature detail is the fully rounded corners meeting the pill-shaped inputs and buttons inside.

---

### 8.6 Badge / Status Chip

```css
.badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-full); /* 9999px — always pill */
  padding: 3px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Status variants */
.badge-deployed  { background: rgba(63,185,80,0.15);  color: #3fb950; }
.badge-building  { background: rgba(210,153,34,0.15); color: #d29922; }
.badge-failed    { background: rgba(248,81,73,0.15);  color: #f85149; }
.badge-running   { background: rgba(88,166,255,0.15); color: #58a6ff; }
.badge-preview   { background: rgba(188,140,255,0.15);color: #bc8cff; }
.badge-neutral   { background: #21262d; color: #8b949e; border: 1px solid #30363d; }

/* Inline pill row (branch status) */
.status-pill {
  background: var(--color-bg-elevated);  /* #21262d */
  border-radius: var(--radius-full);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
```

---

### 8.7 Toggle Switch

```css
.toggle-track {
  width: 44px;
  height: 24px;
  background: #30363d;            /* off state */
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.toggle-track.on  { background: var(--color-blue-400); } /* #58a6ff */

.toggle-thumb {
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform var(--duration-base) var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-track.on .toggle-thumb { transform: translateX(20px); }
```

---

### 8.8 Tooltip

```css
.tooltip {
  font-family: var(--font-body);
  font-size: var(--text-sm);      /* 12px */
  font-weight: 400;
  color: #ffffff;
  background: #111;
  border-radius: var(--radius-sm);  /* 8px — slightly rounded */
  padding: 4px 8px;
  max-width: 220px;
  white-space: nowrap;
  z-index: var(--z-tooltip);
  pointer-events: none;
}
```

---

### 8.9 Table

```css
.table-container {
  border-radius: var(--radius-lg); /* 16px */
  overflow: hidden;
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  font-family: var(--font-body);
  font-size: var(--text-xs);        /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary); /* #8b949e */
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}
.table td {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-light); /* #21262d */
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-elevated); } /* #21262d */
```

---

### 8.10 Dropdown Panel

```css
.dropdown-panel {
  background: var(--color-bg-surface);    /* #161b22 */
  border: 1.5px solid var(--color-border-medium); /* #30363d */
  border-radius: var(--radius-lg);        /* 16px */
  box-shadow: var(--shadow-dropdown);
  margin-top: 6px;
  overflow: hidden;
  z-index: var(--z-dropdown);
}

.dropdown-item {
  font-family: var(--font-body);
  font-size: var(--text-base);   /* 13px */
  color: var(--color-text-secondary);
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover {
  background: var(--color-bg-elevated); /* #21262d */
  color: var(--color-blue-400);         /* #58a6ff */
}
```

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value | Use |
|-------|-------|-----|
| `--container-xs` | 380px | Micro modals, compact widgets |
| `--container-sm` | 480px | Standard modals, narrow forms |
| `--container-md` | 640px | Content columns, medium dialogs |
| `--container-lg` | 800px | Page sections, wide panels |
| `--container-xl` | 1040px | Full dashboard content |
| `--container-2xl` | 1280px | Wide content |
| `--container-3xl` | 1440px | Max page width |

### 9.2 Column Grid

```css
.page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);     /* 16px */
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
```

### 9.3 Standard Layouts

```css
/* Content + Sidebar */
.layout-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-16);   /* 32px */
}

/* Two Equal Columns */
.layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);   /* 20px */
}

/* Three Columns */
.layout-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

/* Wide + Narrow (Dashboard: main content + sidebar widget) */
.layout-wide-narrow {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-10);
}

/* Stack (Modal / Form) */
.layout-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
```

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-standard` | `cubic-bezier(0.16, 1, 0.3, 1)` | Modal entry, panel open |
| `--ease-spring` | `cubic-bezier(0.34, 1.4, 0.64, 1)` | Hover pop, success feedback |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Exit transitions, collapsing |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | State changes (color, bg) |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-instant` | 50ms | Color hover changes |
| `--duration-fast` | 100ms | Border, opacity toggles |
| `--duration-base` | 200ms | All interactive state changes |
| `--duration-slow` | 350ms | Panel slides, modal entry |
| `--duration-slower` | 500ms | Page transitions |

### 10.3 Standard Transitions

```css
/* Interactive elements */
.interactive {
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* Modal entry */
.modal-enter {
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-standard),
              opacity   var(--duration-base) var(--ease-out);
}

/* Button press */
.btn-press { transition: transform var(--duration-instant); }
.btn-press:active { transform: scale(0.98); }

/* Focus glow (inputs) */
.input-focus {
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow  var(--duration-base) var(--ease-out);
}
```

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-below` | -1 | Background decoration |
| `--z-base` | 0 | Normal document flow |
| `--z-raised` | 10 | Slightly elevated cards |
| `--z-dropdown` | 100 | Dropdown menus, select panels |
| `--z-sticky` | 200 | Sticky nav, fixed headers |
| `--z-overlay` | 300 | Backdrop overlays |
| `--z-modal` | 400 | Modals and dialogs |
| `--z-toast` | 500 | Toast notifications |
| `--z-tooltip` | 600 | Tooltips (must always be on top) |
| `--z-top` | 999 | Emergency override only |

---

## 12. Breakpoints

```css
/* Mobile first */
--bp-sm:  480px;   /* Compact mobile */
--bp-md:  768px;   /* Tablet */
--bp-lg:  1024px;  /* Laptop */
--bp-xl:  1280px;  /* Desktop */
--bp-2xl: 1440px;  /* Wide desktop */

/* Usage */
@media (min-width: 480px)  { /* sm+ */ }
@media (min-width: 768px)  { /* md+ */ }
@media (min-width: 1024px) { /* lg+ */ }
@media (min-width: 1280px) { /* xl+ */ }
```

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|------------------------|
| < 480px | 16px |
| 480px–767px | 20px |
| 768px–1023px | 32px |
| 1024px–1279px | 40px |
| 1280px+ | 48px |

---

## 13. Icon System

- **Size scale:** 14px, 16px, 18px, 20px, 24px
- **Default size:** 14px for inline UI, 16px for standalone interactive, 20px for section icons
- **Stroke weight:** 1.5px (stroke-based, never filled except status dot indicators)
- **Color:** Inherit from parent text color; never hardcode icon color independently
- **Library recommendation:** Lucide Icons — stroke-based, geometric, matches the clean Outfit/Nunito Sans personality
- **Alignment:** Always `vertical-align: middle` when inline with text
- **Gap to text:** `--space-4` (8px) for standard; `--space-3` (6px) for compact

```css
.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Status dot (filled circle indicator) */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
```

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background | Box Shadow |
|-------|--------|------------|-----------|
| Default | `#30363d` | `#0d1117` | none |
| Hover | `#484f58` | `#0d1117` | none |
| Focus | `#58a6ff` | `#0d1117` | `0 0 0 3px rgba(88,166,255,0.15)` |
| Filled | `#30363d` | `#0d1117` | none |
| Disabled | `#30363d` | `#0d1117` | none (opacity 0.4) |
| Error | `#f85149` | `#0d1117` | `0 0 0 3px rgba(248,81,73,0.15)` |
| Success | `#3fb950` | `#0d1117` | none |

### 14.2 Button States

| State | Primary Bg | Primary Text | Secondary Bg | Secondary Border |
|-------|-----------|--------------|--------------|-----------------|
| Default | `#58a6ff` | `#0d1117` | `#21262d` | `#30363d` |
| Hover | `#79b8ff` + glow | `#0d1117` | `#30363d` | `#484f58` |
| Active/Press | scale 0.98 | — | scale 0.98 | — |
| Disabled | opacity 0.35 | — | opacity 0.35 | — |
| Loading | opacity 0.7 + spinner | — | — | — |

### 14.3 Link States

```css
a {
  color: var(--color-blue-400);           /* #58a6ff */
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--color-blue-300);           /* #79b8ff */
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:visited { color: var(--color-text-tertiary); }
```

### 14.4 Toggle States

| State | Track Background | Thumb Position |
|-------|-----------------|----------------|
| Off | `#30363d` | `left: 3px` |
| On | `#58a6ff` | `translateX(20px)` |
| Hover (off) | `#484f58` | — |
| Hover (on) | `#79b8ff` | — |
| Disabled | `#21262d` | opacity 0.4 |

---

*End of Design System — Capsule v1.0*