# Mono — Complete Design System
> Version 1.0 · Derived from the Mono Theme (Theme 06)

---

## 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:** Mono
**Aesthetic Family:** Terminal / CLI dark mode, monospace-first UI, sharp 2px corners, dark amber signal
**Personality:** Precise, technical, unadorned, diagnostic — communicates raw system state, uptime, and control
**Best Suited For:** DevOps dashboards, server monitoring, CI/CD logs, API consoles, infrastructure tooling, terminal emulators, status pages, admin panels for engineers

**Core Principles:**
- IBM Plex Mono is the primary interface font — not a secondary "technical" font. It carries body copy, labels, buttons, badges, and tables. Albert Sans is the exception, reserved only for large display numerals and headings.
- Sharp, minimal 2px radius everywhere — this is a console, not a consumer app. Corners are functional, not decorative.
- Amber (`#f59e0b`) is the single signal color — the CRT-amber glow of legacy terminals, reinterpreted for modern dark UI.
- Three dark tones create depth without ever introducing light: base `#1a1b1e`, surface `#232428`, elevated `#2e2f33`.
- Status is always communicated with a `//` comment-style prefix and transparency-tinted badges — never solid fills.
- Every label, timestamp, and metadata string reads like a code comment: quiet, monospaced, and out of the way until needed.

---

## 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:          #1a1b1e;   /* Page / app background — deepest layer */
  --color-bg-surface:       #232428;   /* Cards, panels, raised containers */
  --color-bg-elevated:      #2e2f33;   /* Hover states, active rows, nested surfaces */
  --color-bg-sunken:        #141517;   /* Inset wells, code blocks, terminal output panes */
  --color-bg-overlay:       rgba(10, 11, 12, 0.75);  /* Modal backdrop */
  --color-bg-overlay-blur:  rgba(10, 11, 12, 0.68);  /* Blur-capable overlay */

  /* ─── COLOR: AMBER ACCENT ────────────────────────────────────── */
  --color-amber-100:        rgba(245, 158, 11, 0.08);  /* Hover wash on outline buttons */
  --color-amber-200:        rgba(245, 158, 11, 0.12);  /* Badge / tinted background */
  --color-amber-300:        #fbbf24;   /* Light amber — hover state of primary button */
  --color-amber-400:        #f59e0b;   /* Primary accent — buttons, focus, links */
  --color-amber-500:        #d97706;   /* Pressed / active accent */
  --color-amber-600:        #b45309;   /* Deepest amber, rarely used */
  --color-amber-glow:       0 0 16px rgba(245, 158, 11, 0.35); /* CRT-glow signature */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:     #d4d4d8;   /* Headings, primary values, high-emphasis */
  --color-text-secondary:   #9ca3af;   /* Body copy, descriptions */
  --color-text-tertiary:    #6b7280;   /* Labels, captions, helper text */
  --color-text-muted:       #4b4c52;   /* Section titles, timestamps, comments */
  --color-text-disabled:    #35363a;   /* Disabled, non-interactive */
  --color-text-inverse:     #1a1b1e;   /* Dark text on amber button */
  --color-text-placeholder: #4b4c52;   /* Input placeholder */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-hairline:  #26272b;   /* Subtlest divider */
  --color-border-light:     #2e2f33;   /* Table rules, section separators */
  --color-border-medium:    #3a3b3f;   /* Input / card / surface edge */
  --color-border-strong:    #52545a;   /* Hover, active borders */
  --color-border-accent:    #f59e0b;   /* Focused input, selected row */

  /* ─── COLOR: INTERACTIVE SURFACES ───────────────────────────── */
  --color-btn-primary-bg:    #f59e0b;
  --color-btn-primary-text:  #1a1b1e;
  --color-btn-primary-hover: #fbbf24;

  --color-btn-secondary-bg:     #2e2f33;
  --color-btn-secondary-text:   #d4d4d8;
  --color-btn-secondary-border: #3a3b3f;
  --color-btn-secondary-hover:  #3a3b3f;

  --color-btn-outline-text:   #f59e0b;
  --color-btn-outline-border: #f59e0b;
  --color-btn-outline-hover:  rgba(245, 158, 11, 0.10);

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:          #4ade80;
  --color-success-bg:       rgba(74, 222, 128, 0.12);
  --color-success-border:   rgba(74, 222, 128, 0.30);
  --color-warning:          #f59e0b;
  --color-warning-bg:       rgba(245, 158, 11, 0.12);
  --color-warning-border:   rgba(245, 158, 11, 0.30);
  --color-error:            #ef4444;
  --color-error-bg:         rgba(239, 68, 68, 0.12);
  --color-error-border:     rgba(239, 68, 68, 0.30);
  --color-error-hover:      #f87171;
  --color-info:             #60a5fa;
  --color-info-bg:          rgba(96, 165, 250, 0.12);
  --color-info-border:      rgba(96, 165, 250, 0.30);

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'IBM Plex Mono', 'Cascadia Code', 'Consolas', monospace;
  --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.75rem;    /* 28px */
  --text-3xl:   2rem;       /* 32px */
  --text-4xl:   2.5rem;     /* 40px */
  --text-5xl:   2.75rem;    /* 44px */

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

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

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.03em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.16em;

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

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     2px;    /* Universal — buttons, inputs, badges, cards */
  --radius-sm:     2px;    /* Cards, tables, dropdown menus — same as xs */
  --radius-md:     4px;    /* Rare — only for oversized decorative blocks */
  --radius-full:   9999px; /* Circular toggle/radio shapes only */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-modal:   0 20px 48px rgba(0, 0, 0, 0.60);
  --shadow-dropdown: 0 12px 28px rgba(0, 0, 0, 0.50);
  --shadow-amber-glow: 0 0 16px rgba(245, 158, 11, 0.35);

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

  --duration-instant:  50ms;
  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    250ms;

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

  /* ─── 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;

}
```

---

## 3. Color Palette

### 3.1 Background Colors

| Token | Hex | RGB | Use |
|-------|-----|-----|-----|
| `--color-bg-base` | `#1a1b1e` | 26, 27, 30 | Page-level background — deepest layer |
| `--color-bg-surface` | `#232428` | 35, 36, 40 | Cards, panels, raised surfaces |
| `--color-bg-elevated` | `#2e2f33` | 46, 47, 51 | Hover fills, active table rows |
| `--color-bg-sunken` | `#141517` | 20, 21, 23 | Terminal output panes, code blocks |
| `--color-bg-overlay` | `rgba(10,11,12,0.75)` | — | Modal backdrop scrim |

### 3.2 Amber Accent Scale

| Token | Hex / Value | Use |
|-------|-------------|-----|
| `--color-amber-100` | `rgba(245,158,11,0.08)` | Outline button hover wash |
| `--color-amber-200` | `rgba(245,158,11,0.12)` | Badge / tinted background |
| `--color-amber-300` | `#fbbf24` | Hover state of primary button |
| `--color-amber-400` | `#f59e0b` | **Primary accent** — buttons, focus border, links |
| `--color-amber-500` | `#d97706` | Pressed / active accent |
| `--color-amber-600` | `#b45309` | Deepest amber — rare, high-emphasis text only |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#d4d4d8` | Headings, primary values, high-emphasis |
| `--color-text-secondary` | `#9ca3af` | Body copy, descriptions |
| `--color-text-tertiary` | `#6b7280` | Labels, captions, nav items |
| `--color-text-muted` | `#4b4c52` | Section titles (uppercase), timestamps, `//` comments |
| `--color-text-disabled` | `#35363a` | Disabled non-interactive states |
| `--color-text-inverse` | `#1a1b1e` | Text on bright amber button backgrounds |
| `--color-text-placeholder` | `#4b4c52` | Input placeholder text |

### 3.4 Border Colors

| Token | Hex | Role |
|-------|-----|------|
| `--color-border-hairline` | `#26272b` | Subtlest dividers within surfaces |
| `--color-border-light` | `#2e2f33` | Table row rules, section separators |
| `--color-border-medium` | `#3a3b3f` | Default input, card, surface edge |
| `--color-border-strong` | `#52545a` | Hover / active borders |
| `--color-border-accent` | `#f59e0b` | Focused input, selected row |

### 3.5 Semantic Colors

| State | Text | Background | Border |
|-------|------|------------|--------|
| Success / Run | `#4ade80` | `rgba(74,222,128,0.12)` | `rgba(74,222,128,0.30)` |
| Warning / Degraded | `#f59e0b` | `rgba(245,158,11,0.12)` | `rgba(245,158,11,0.30)` |
| Error / Down | `#ef4444` | `rgba(239,68,68,0.12)` | `rgba(239,68,68,0.30)` |
| Info / Cached | `#60a5fa` | `rgba(96,165,250,0.12)` | `rgba(96,165,250,0.30)` |

---

## 4. Typography System

### 4.1 Font Families

**Display — `'Albert Sans'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;700;800&display=swap')`
- Fallback: `'Segoe UI', system-ui, sans-serif`
- Weights used: 400, 500, 700, 800
- Character: Clean geometric grotesque — used sparingly, as a contrast note against the mono-dominant body
- Usage: **Only** for large display numerals, hero headings, and top-level page headings ≥18px. Never for UI, buttons, or body text.

**Body / UI / Mono — `'IBM Plex Mono'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap')`
- Fallback: `'Cascadia Code', 'Consolas', monospace`
- Weights used: 400, 500, 600, 700
- Character: Technical, exact character width, terminal-native
- Usage: **Everything else** — body copy, buttons, labels, badges, inputs, table cells, section titles, captions, timestamps. This is the workhorse font of the system.

This is a two-category font law, but inverted from typical systems: the monospace font is dominant, and the sans-serif is the exception reserved for scale.

---

### 4.2 Type Scale — Full Specification

#### Display (Albert Sans)

| Role | Size Token | Size (px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|-----------|--------|-------------|----------------|------|
| System Display | `--text-5xl` | 44px | 800 | 1 | -0.03em | Albert Sans |
| Page Heading | `--text-4xl` | 40px | 800 | 1.1 | -0.03em | Albert Sans |
| Heading | `--text-2xl` | 28px | 700 | 1.2 | -0.02em | Albert Sans |
| Subhead | `--text-xl` | 18px | 400 | 1.4 | 0em | Albert Sans |

#### Body / UI (IBM Plex Mono)

| Role | Size Token | Size (px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|-----------|--------|-------------|----------------|------|
| Title / H1 (in-panel) | `--text-xl` | 18px | 700 | 1.2 | 0em | IBM Plex Mono |
| Body | `--text-base` | 13px | 400 | 1.6 | 0em | IBM Plex Mono |
| Small Body | `--text-sm` | 12px | 400 | 1.5 | 0em | IBM Plex Mono |
| Table Cell | `--text-sm` | 12px | 400 | 1.4 | 0em | IBM Plex Mono |
| Button | `--text-sm` | 12px | 500 | 1 | 0.03em | IBM Plex Mono |
| Field Label | `--text-xs` | 11px | 400 | 1 | 0.05em | IBM Plex Mono |
| Section Title | `--text-2xs` | 10px | 400 | 1 | 0.16em (uppercase) | IBM Plex Mono |
| Badge | `--text-2xs` | 10px | 700 | 1 | 0.08em (uppercase) | IBM Plex Mono |
| Caption / Comment | `--text-xs` | 11px | 400 | 1.4 | 0em | IBM Plex Mono |

---

### 4.3 Google Fonts Import Block

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

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);       /* 40px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);       /* 28px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);        /* 18px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

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

.section-title {
  font-family: var(--font-body);
  font-size: var(--text-2xs);       /* 10px */
  font-weight: 400;
  letter-spacing: var(--tracking-widest); /* 0.16em */
  text-transform: lowercase;        /* Mono uses lowercase, not uppercase */
  color: var(--color-text-muted);   /* #4b4c52 */
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);      /* 13px */
  font-weight: 400;
  line-height: var(--leading-relaxed); /* 1.6 */
  color: var(--color-text-secondary);
}

label {
  font-family: var(--font-body);
  font-size: var(--text-xs);        /* 11px */
  font-weight: 400;
  color: var(--color-text-tertiary);
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  display: block;
}

.caption, .comment {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
```

**Note on casing:** unlike most systems in this collection, Mono's section titles use **lowercase**, not uppercase — mimicking a code comment (`// typography`, `// color_palette`) rather than a shouted label. This is a deliberate, distinctive rule for this system only.

---

## 5. Spacing System

Based on a 2px base unit — a tighter grid than the other systems in this collection, matching the density of a terminal / log viewer.

### 5.1 Base Scale Table

| Token | Value | Common Use |
|-------|-------|------------|
| `--space-1` | 2px | Micro gaps |
| `--space-2` | 4px | Caption-to-value gap |
| `--space-3` | 5px | Label margin-bottom |
| `--space-4` | 6px | Icon-to-text gap |
| `--space-5` | 8px | Badge row gap |
| `--space-6` | 9px | Button vertical padding |
| `--space-7` | 10px | Table header padding-v |
| `--space-8` | 12px | Input padding-h, table cell padding-v |
| `--space-9` | 14px | Field group gap |
| `--space-10` | 16px | Section title margin bottom (compact) |
| `--space-11` | 18px | Button horizontal padding |
| `--space-12` | 20px | Section title margin bottom (standard) |
| `--space-14` | 24px | Card padding |
| `--space-16` | 28px | Modal padding |
| `--space-18` | 32px | Section vertical gap |
| `--space-20` | 40px | Page padding |

---

### 5.2 Component Spacing Specifications

#### Modal
```
Container padding:  28px
Title margin-bottom: 4px
Description margin-bottom: 20px
Input margin-bottom: 12px
Button gap: 8px
Max-width: 480px
```

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

#### Button
```
Base:  padding 9px 18px
Small: padding 7px 12px
Large: padding 11px 24px
Border-radius: 2px (always)
```

#### Input
```
Padding: 9px 12px
Textarea padding: 9px 12px (same, radius unchanged)
Label margin-bottom: 5px
Field group gap: 14px
```

#### Badge
```
Padding: 2px 8px
Font size: 10px
Border-radius: 2px
```

#### Table
```
Header cell padding: 8px 12px
Body cell padding: 10px 12px
Row hover: background #2e2f33
```

---

## 6. Border Radius System

Mono uses a **sharp-first** philosophy: `2px` is the radius for nearly every element in the system — just enough to soften a hard edge without introducing any perceptible curve. This is a terminal, not a consumer surface.

### 6.1 Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| `--radius-none` | `0px` | Table cells, dropdown top corners |
| `--radius-xs` | `2px` | **Default** — buttons, inputs, badges, cards, modals, dropdown bottom corners |
| `--radius-md` | `4px` | Rare — oversized decorative blocks only |
| `--radius-full` | `9999px` | Radio buttons only |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Button (all variants) | 2px |
| Text input | 2px |
| Textarea | 2px |
| Select / dropdown trigger | 2px |
| Dropdown panel | `0 0 2px 2px` (flat top, matches trigger) |
| Badge / status chip | 2px |
| Checkbox | 2px |
| Radio | 9999px (circle) |
| Toggle track | 2px (square-ish, not a pill) |
| Toggle thumb | 1px |
| Card / surface | 2px |
| Modal | 2px |
| Table container | 2px |
| Table cell | 0px |

---

## 7. Shadow & Elevation System

### 7.1 The Terminal Shadow Rule

All ambient shadows use pure black. There are no colored ambient shadows in this system:

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

The **one exception** is the amber glow, reserved exclusively for the primary button's hover state and for live-status indicators — see 7.3.

### 7.2 Elevation and Shadow Pairing

| What You're Building | Shadow to Use |
|---------------------|---------------|
| Flat surface / card | none — border only |
| Dropdown panel | `--shadow-dropdown` |
| Modal / dialog | `--shadow-modal` |
| Tooltip | `--shadow-xs` |
| Hovered primary button | `--shadow-amber-glow` |

### 7.3 The Amber Glow — Primary Button Signature

Every primary amber button emits a faint CRT-style glow on hover, evoking legacy amber phosphor terminals:

```css
box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
```

This glow must appear on primary button hover only, and optionally on a "live" status dot's pulse animation. It should never be applied to cards, modals, or secondary buttons.

### 7.4 Cards — Border Over Shadow

Cards and surfaces in Mono rely entirely on `border: 1px solid #3a3b3f` for definition — never a drop shadow. Shadows are reserved for genuinely floating elements: dropdowns and modals.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-body);
  font-size: var(--text-sm);         /* 12px */
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-btn-primary-text); /* #1a1b1e */

  background: var(--color-btn-primary-bg); /* #f59e0b */
  border: none;
  border-radius: var(--radius-xs);   /* 2px */

  padding: 9px 18px;
  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); /* #fbbf24 */
  box-shadow: var(--shadow-amber-glow);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
```

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

  background: var(--color-btn-secondary-bg); /* #2e2f33 */
  border: 1px solid var(--color-btn-secondary-border); /* #3a3b3f */
  border-radius: var(--radius-xs);

  padding: 9px 18px;
  cursor: pointer;
  transition: background 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-sm);
  font-weight: 500;
  color: var(--color-btn-outline-text);      /* #f59e0b */

  background: transparent;
  border: 1.5px solid var(--color-btn-outline-border);
  border-radius: var(--radius-xs);

  padding: 9px 18px;
  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-sm);
  font-weight: 500;
  color: #ffffff;

  background: var(--color-error);   /* #ef4444 */
  border: none;
  border-radius: var(--radius-xs);
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-destructive:hover { background: var(--color-error-hover); /* #f87171 */ }
```

---

### 8.2 Form Inputs

#### Text Input
```css
.input {
  font-family: var(--font-body);
  font-size: var(--text-base);            /* 13px */
  font-weight: 400;
  color: var(--color-text-primary);

  background: var(--color-bg-base);       /* #1a1b1e */
  border: 1.5px solid var(--color-border-medium); /* #3a3b3f */
  border-radius: var(--radius-xs);        /* 2px */

  padding: 9px 12px;
  width: 100%;

  outline: none;
  transition: border-color var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:focus { border-color: var(--color-border-accent); /* #f59e0b */ }
.input:disabled { opacity: 0.4; cursor: not-allowed; }
```

#### Textarea
```css
.textarea {
  /* Same as .input */
  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-xs);    /* 11px */
  font-weight: 400;
  color: var(--color-text-tertiary);  /* #6b7280 */
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  display: block;
}
```

Field labels are conventionally prefixed with `// ` (e.g. `// api_endpoint`) to reinforce the code-comment metaphor. This is optional but recommended for forms that map directly to config or API fields.

---

### 8.4 Card / Surface

```css
.surface {
  background: var(--color-bg-surface);    /* #232428 */
  border: 1px solid var(--color-border-medium); /* #3a3b3f */
  border-radius: var(--radius-xs);        /* 2px */
  padding: 24px;
}
```

No accent lines, no top borders, no drop shadow. The card is defined entirely by its border and background contrast against the page.

---

### 8.5 Modal

```css
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--color-bg-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
}

.modal {
  background: var(--color-bg-surface);   /* #232428 */
  border: 1.5px solid var(--color-border-accent); /* #f59e0b */
  border-radius: var(--radius-xs);       /* 2px */
  padding: 28px;
  width: 100%;
  max-width: 480px;
  font-family: var(--font-body);
}

/* Destructive modal variant swaps the border to the error color */
.modal.modal-destructive { border-color: var(--color-error); }
```

The amber (or red, for destructive) border is the modal's only elevation cue — there is deliberately no colored ambient shadow, only the black `--shadow-modal` if any lift is required.

---

### 8.6 Badge / Status Chip

```css
.badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-xs); /* 2px */
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.badge-success { background: rgba(74,222,128,0.12);  color: #4ade80; }
.badge-warning { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.badge-error   { background: rgba(239,68,68,0.12);   color: #ef4444; }
.badge-info    { background: rgba(96,165,250,0.12);  color: #60a5fa; }
.badge-neutral { background: var(--color-bg-elevated); color: var(--color-text-tertiary); }
```

---

### 8.7 Toggle Switch

Unlike pill-shaped systems, Mono's toggle track is nearly square (`2px` radius) — it looks like a physical relay switch, not a soft iOS-style pill:

```css
.toggle-track {
  width: 40px;
  height: 22px;
  background: var(--color-border-medium);  /* off */
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.toggle-track.on { background: var(--color-amber-400); }

.toggle-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-bg-base);   /* dark thumb, inverted from typical white */
  border-radius: 1px;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform var(--duration-base) var(--ease-out);
}
.toggle-track.on .toggle-thumb { transform: translateX(18px); }
```

**Signature detail:** the thumb is dark (`--color-bg-base`), not white — it reads as a physical switch mechanism against the lit amber track, rather than a floating knob.

---

### 8.8 Table

```css
.table { width: 100%; border-collapse: collapse; font-size: 13px; }

.table th {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-tertiary);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-medium);
}
.table td {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-light);
}
.table tr:hover td { background: var(--color-bg-elevated); }
```

---

### 8.9 Dropdown Panel

```css
.dropdown-panel {
  background: var(--color-bg-surface);    /* #232428 */
  border: 1.5px solid var(--color-border-accent); /* #f59e0b */
  border-top: none;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  z-index: var(--z-dropdown);
}

.dropdown-item {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 9px 12px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover {
  background: var(--color-bg-elevated);
  color: var(--color-amber-400);
}
```

The dropdown panel keeps the amber border of its trigger and drops the top edge entirely — visually "continuing" the input rather than floating separately.

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value | Use |
|-------|-------|-----|
| `--container-xs` | 380px | Micro modals |
| `--container-sm` | 480px | Standard modals, narrow forms |
| `--container-md` | 640px | Content columns |
| `--container-lg` | 800px | Page sections |
| `--container-xl` | 1040px | Full dashboard content |
| `--container-2xl` | 1200px | Max page width |

### 9.2 Standard Layouts

```css
/* Two Equal Columns (buttons + status codes) */
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Wide + Narrow (process log + flags panel) */
.layout-wide-narrow { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

/* Stack (modal / form) */
.layout-stack { display: flex; flex-direction: column; gap: 14px; }
```

Cards in a Mono dashboard are separated by `16px` gaps — tight, dense, log-like. This is less breathing room than Capsule (`20px`) or Luxury Editorial (`24px`), reflecting the system's data-density priorities.

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-standard` | `cubic-bezier(0.16, 1, 0.3, 1)` | Modal / dropdown entry |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | State changes (color, background) |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Exit transitions |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-instant` | 50ms | Color hover changes, button press |
| `--duration-fast` | 100ms | Border, opacity toggles |
| `--duration-base` | 150ms | All interactive state changes |
| `--duration-slow` | 250ms | Panel/modal entry |

Mono's transitions are consistently **faster** than the other systems in this collection (150ms base vs 200ms elsewhere) — a terminal should feel instantaneous, not cinematic.

### 10.3 Standard Transitions

```css
.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);
}

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

---

## 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 |

---

## 12. Breakpoints

```css
--bp-sm:  480px;
--bp-md:  768px;
--bp-lg:  1024px;
--bp-xl:  1280px;

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

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|------------------------|
| < 480px | 16px |
| 480px–767px | 20px |
| 768px–1023px | 24px |
| 1024px+ | 24px |

---

## 13. Icon System

- **Size scale:** 12px, 13px, 14px, 16px, 20px
- **Default size:** 13px inline with mono text, 16px standalone
- **Stroke weight:** 1.5px, stroke-based, never filled (except the live-status dot)
- **Color:** Inherit from parent text color
- **Library recommendation:** Lucide Icons — geometric, matches the terminal precision
- **Status dot:** filled circle, 6px diameter, used for online/warn/down indicators, optionally pulsing

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

.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
```

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background |
|-------|--------|------------|
| Default | `#3a3b3f` | `#1a1b1e` |
| Hover | `#52545a` | `#1a1b1e` |
| Focus | `#f59e0b` | `#1a1b1e` |
| Disabled | `#3a3b3f` | `#1a1b1e` (opacity 0.4) |
| Error | `#ef4444` | `#1a1b1e` |

### 14.2 Button States

| State | Primary Bg | Primary Text | Secondary Bg |
|-------|-----------|--------------|--------------|
| Default | `#f59e0b` | `#1a1b1e` | `#2e2f33` |
| Hover | `#fbbf24` + amber glow | `#1a1b1e` | `#3a3b3f` |
| Active/Press | scale 0.98 | — | scale 0.98 |
| Disabled | opacity 0.35 | — | opacity 0.35 |

### 14.3 Live Status Indicator

```css
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.status-dot.live { animation: pulse-dot 2s ease-in-out infinite; }
```

---

*End of Design System — Mono v1.0*