# Ink — Complete Design System
> Version 1.0 · Derived from the Ink Theme (Theme 08)

---

## 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:** Ink
**Aesthetic Family:** Dark editorial, literary publishing, deep-night serif UI
**Personality:** Quiet, considered, nocturnal, literary — communicates calm authority and editorial trust
**Best Suited For:** Publishing platforms, CMS editors, long-form reading apps, newsroom dashboards, subscription/media products, dark-mode blogs, documentation readers

**Core Principles:**
- Deep near-black backgrounds (`#111213`) evoke ink on night paper, not a generic "dark mode" grey
- Two serif fonts share duties: Libre Baskerville for structure (headings, buttons, labels), Crimson Pro for reading (body copy, italic subheads)
- A single desaturated slate-blue accent (`#7c99b8`) — calm and bookish, never electric or saturated
- Moderate `6px` radius throughout — soft enough to feel considered, restrained enough to stay editorial
- Status and tags use transparency-tinted, bordered chips — muted olive greens, dusty reds, warm golds, never saturated semantic colors
- Generous line-height and italic accents throughout — this system is built to be *read*, not just scanned

---

## 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:          #111213;   /* Page / app background — deepest layer */
  --color-bg-surface:       #18191b;   /* Cards, panels, raised containers */
  --color-bg-elevated:      #1e1f21;   /* Hover states, active rows */
  --color-bg-sunken:        #0c0d0e;   /* Inset wells, quote blocks */
  --color-bg-overlay:       rgba(0, 0, 0, 0.60);   /* Dropdown / light overlay */
  --color-bg-overlay-modal: rgba(0, 0, 0, 0.75);   /* Modal backdrop */

  /* ─── COLOR: SLATE BLUE ACCENT ───────────────────────────────── */
  --color-slate-100:        rgba(124, 153, 184, 0.08);  /* Hover wash */
  --color-slate-200:        rgba(124, 153, 184, 0.20);  /* Featured tag background */
  --color-slate-300:        #9db5cc;   /* Hover state of primary button */
  --color-slate-400:        #7c99b8;   /* Primary accent — buttons, links, focus */
  --color-slate-500:        #5c7a99;   /* Pressed / active accent */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:     #c8ccd0;   /* Headings, primary content */
  --color-text-secondary:   #9ca0a6;   /* Sub-headings, control labels */
  --color-text-tertiary:    #8a8e95;   /* Body paragraph copy */
  --color-text-muted:       #5a5d62;   /* Field labels, captions, timestamps */
  --color-text-faint:       #3d3f42;   /* Section titles — deepest muted */
  --color-text-disabled:    #3d3f42;   /* Disabled states */
  --color-text-inverse:     #111213;   /* Text on slate-blue button */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-hairline:  #1e1f21;   /* Subtlest divider */
  --color-border-light:     #2c2d2f;   /* Section separators, table rules */
  --color-border-medium:    #2c2d2f;   /* Input / card edge */
  --color-border-strong:    #3a3c3f;   /* Hover / active border */
  --color-border-accent:    #7c99b8;   /* Focused input, active state */

  /* ─── COLOR: INTERACTIVE SURFACES ───────────────────────────── */
  --color-btn-primary-bg:    #7c99b8;
  --color-btn-primary-text:  #111213;
  --color-btn-primary-hover: #9db5cc;

  --color-btn-secondary-bg:     #1e1f21;
  --color-btn-secondary-text:   #c8ccd0;
  --color-btn-secondary-border: #2c2d2f;
  --color-btn-secondary-hover:  #2c2d2f;

  --color-btn-outline-text:   #7c99b8;
  --color-btn-outline-border: #7c99b8;
  --color-btn-outline-hover:  rgba(124, 153, 184, 0.10);

  --color-btn-destructive-bg:    #8b4040;
  --color-btn-destructive-text:  #e8d0d0;
  --color-btn-destructive-hover: #a04a4a;

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:          #4a7a5c;
  --color-success-text:     #6aad80;
  --color-success-bg:       rgba(74, 122, 92, 0.20);
  --color-success-border:   rgba(74, 122, 92, 0.30);

  --color-warning:          #7a6b40;
  --color-warning-text:     #b09060;
  --color-warning-bg:       rgba(122, 107, 64, 0.20);
  --color-warning-border:   rgba(122, 107, 64, 0.30);

  --color-error:            #8b4040;
  --color-error-text:       #c08080;
  --color-error-bg:         rgba(139, 64, 64, 0.20);
  --color-error-border:     rgba(139, 64, 64, 0.30);

  --color-info:             #7c99b8;
  --color-info-bg:          rgba(124, 153, 184, 0.20);
  --color-info-border:      rgba(124, 153, 184, 0.30);

  --color-neutral-text:     #5a5d62;
  --color-neutral-bg:       rgba(200, 204, 208, 0.10);
  --color-neutral-border:   rgba(200, 204, 208, 0.10);

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:     'Crimson Pro', Georgia, serif;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.625rem;   /* 10px */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.875rem;   /* 14px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.25rem;    /* 52px */

  /* ─── TYPOGRAPHY: WEIGHTS ────────────────────────────────────── */
  --weight-regular:  400;
  --weight-bold:     700;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ───────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-base:    1.4;
  --leading-relaxed: 1.7;
  --leading-loose:   1.8;

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tight:   0em;
  --tracking-normal:  0.02em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.07em;
  --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-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-32:  64px;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     4px;    /* Rare — tight decorative elements */
  --radius-sm:     5px;    /* Badges */
  --radius-md:     6px;    /* Primary — buttons, inputs, cards, dropdown bottom */
  --radius-lg:     10px;   /* Modals */
  --radius-full:   9999px; /* Toggle track, radio, avatar */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:     none;
  --shadow-xs:       0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-sm:       0 6px 16px rgba(0, 0, 0, 0.40);
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.60);
  --shadow-modal:    0 24px 64px rgba(0, 0, 0, 0.80);
  --shadow-focus:    0 0 0 3px rgba(124, 153, 184, 0.12);

  /* ─── 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-fast:    100ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;

  /* ─── 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` | `#111213` | 17, 18, 19 | Page-level background — the "night paper" |
| `--color-bg-surface` | `#18191b` | 24, 25, 27 | Cards, panels, article containers |
| `--color-bg-elevated` | `#1e1f21` | 30, 31, 33 | Hover fills, table row hover |
| `--color-bg-sunken` | `#0c0d0e` | 12, 13, 14 | Inset quote blocks, pull-quotes |

### 3.2 Slate Blue Accent Scale

| Token | Hex / Value | Use |
|-------|-------------|-----|
| `--color-slate-100` | `rgba(124,153,184,0.08)` | Hover wash on outline buttons |
| `--color-slate-200` | `rgba(124,153,184,0.20)` | Featured tag / info badge background |
| `--color-slate-300` | `#9db5cc` | Hover state of primary button |
| `--color-slate-400` | `#7c99b8` | **Primary accent** — buttons, focus, links, "Ink" wordmark |
| `--color-slate-500` | `#5c7a99` | Pressed / active accent |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#c8ccd0` | Headlines, byline names, primary values |
| `--color-text-secondary` | `#9ca0a6` | Sub-headings, control labels |
| `--color-text-tertiary` | `#8a8e95` | Body paragraph copy |
| `--color-text-muted` | `#5a5d62` | Field labels, captions, timestamps |
| `--color-text-faint` | `#3d3f42` | Section titles (uppercase), dates in tables |
| `--color-text-inverse` | `#111213` | Text on slate-blue button |

### 3.4 Border Colors

| Token | Hex | Role |
|-------|-----|------|
| `--color-border-hairline` | `#1e1f21` | Subtlest dividers |
| `--color-border-light` | `#2c2d2f` | Section separators, table rules |
| `--color-border-medium` | `#2c2d2f` | Default input, card edge |
| `--color-border-strong` | `#3a3c3f` | Hover / active border |
| `--color-border-accent` | `#7c99b8` | Focused input, selected state |

### 3.5 Semantic Colors

| State | Text | Background | Border |
|-------|------|------------|--------|
| Success / Live | `#6aad80` | `rgba(74,122,92,0.20)` | `rgba(74,122,92,0.30)` |
| Warning / Draft | `#b09060` | `rgba(122,107,64,0.20)` | `rgba(122,107,64,0.30)` |
| Error / Removed | `#c08080` | `rgba(139,64,64,0.20)` | `rgba(139,64,64,0.30)` |
| Info / Featured | `#7c99b8` | `rgba(124,153,184,0.20)` | `rgba(124,153,184,0.30)` |
| Neutral / Archive | `#5a5d62` | `rgba(200,204,208,0.10)` | `rgba(200,204,208,0.10)` |

All semantic colors in Ink are deliberately **desaturated** — muted olive-green, dusty rose-red, warm ochre — never the bright saturated greens/reds of a typical dashboard. This is a stylistic law, not an accident: Ink's semantic states must read as editorial annotations, not alarms.

---

## 4. Typography System

### 4.1 Font Families

**Display / Structure — `'Libre Baskerville'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap')`
- Fallback: `Georgia, 'Times New Roman', serif`
- Weights available: 400 (Regular), 700 (Bold)
- Character: Sturdy, high-contrast transitional serif, built for screen legibility at both large and small sizes
- Usage: Page titles, section headings, buttons, field labels, badges, table headers, eyebrow text, captions

**Body / Reading — `'Crimson Pro'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;1,400&display=swap')`
- Fallback: `Georgia, serif`
- Weights used: 400 (Regular), 400 Italic
- Character: Warm, flowing text serif with excellent long-form readability and graceful italics
- Usage: Body paragraphs, descriptions, subheads (often italic), pull-quotes, article abstracts

Unlike most systems in this collection, Ink uses **two serif fonts** rather than pairing a serif with a sans-serif. Libre Baskerville provides structural weight and clarity at UI sizes; Crimson Pro provides warmth and rhythm at reading sizes. There is no mono or sans-serif font anywhere in this system.

---

### 4.2 Type Scale — Full Specification

#### Display / Structure (Libre Baskerville)

| Role | Size Token | Size (px) | Weight | Line Height | Font |
|------|-----------|-----------|--------|-------------|------|
| Hero Title | `--text-5xl` | 52px (clamp 28–52px) | 700 | 1.1 | Libre Baskerville |
| Display | `--text-4xl` | 48px | 700 | 1 | Libre Baskerville |
| H2 | `--text-3xl` | 30px | 400 | 1.2 | Libre Baskerville |
| Modal / Card Title | `--text-xl` | 22px | 700 | 1.2 | Libre Baskerville |
| Button | `--text-sm` | 12–13px | 700 | 1 | Libre Baskerville |
| Field Label | `--text-xs` | 11px | 700 | 1 | Libre Baskerville |
| Section Title | `--text-xs` | 11px | 400 | 1 | Libre Baskerville |
| Badge | `--text-sm` | 11px | 700 | 1 | Libre Baskerville |
| Table Header | `--text-xs` | 11px | 700 | 1 | Libre Baskerville |
| Caption | `--text-xs` | 11px | 400 | 1.2 | Libre Baskerville |

#### Body / Reading (Crimson Pro)

| Role | Size Token | Size (px) | Weight | Style | Line Height | Font |
|------|-----------|-----------|--------|-------|-------------|------|
| Subhead | `--text-xl` | 22px | 400 | italic | 1.3 | Crimson Pro |
| Large Body | `--text-md` | 16px | 400 | normal | 1.7 | Crimson Pro |
| Base Body | `--text-base` | 14px | 400 | normal | 1.6 | Crimson Pro |
| Table Cell (headline) | `--text-md` | 15px | 400 | normal | 1.4 | Libre Baskerville* |
| Modal Description | `--text-md` | 15px | 400 | italic | 1.7 | Crimson Pro |
| Input Text | `--text-md` | 15px | 400 | normal | 1.5 | Crimson Pro |

\* Article headlines inside table rows use Libre Baskerville even at reading size, since they function as titles, not prose.

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Crimson+Pro:ital,wght@0,400;1,400&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);       /* clamp(28px, 4.5vw, 52px) */
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
}
h1 .accent { color: var(--color-slate-400); }

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);       /* 48px */
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);       /* 30px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-secondary);
}

.subhead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xl);        /* 22px */
  color: var(--color-slate-400);
  line-height: 1.3;
}

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

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-2xs);       /* 10px */
  letter-spacing: var(--tracking-widest); /* 0.14em */
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);        /* 11px */
  letter-spacing: var(--tracking-wider); /* 0.10em */
  text-transform: uppercase;
  color: var(--color-text-faint);   /* #3d3f42 */
  border-bottom: 1px solid var(--color-border-hairline);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

label {
  font-family: var(--font-display);
  font-size: var(--text-xs);        /* 11px */
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);   /* #5a5d62 */
  margin-bottom: 6px;
  display: block;
}

.caption {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}
```

---

## 5. Spacing System

Based on a 2px base unit, with generous multi-line spacing to support long-form reading contexts.

### 5.1 Base Scale Table

| Token | Value | Common Use |
|-------|-------|------------|
| `--space-1` | 2px | Micro gaps |
| `--space-2` | 4px | Caption-to-value gap |
| `--space-3` | 6px | Label margin-bottom |
| `--space-4` | 8px | Badge padding H, inline gap |
| `--space-5` | 10px | Button vertical padding |
| `--space-6` | 12px | Table cell padding-v, button gap |
| `--space-7` | 14px | Input padding-v |
| `--space-8` | 16px | Field group gap |
| `--space-9` | 18px | Card grid gap |
| `--space-10` | 20px | Section title margin-bottom, form grid gap |
| `--space-12` | 24px | Card / modal padding (compact) |
| `--space-14` | 28px | Header bottom padding |
| `--space-16` | 32px | Modal padding, section gap |
| `--space-20` | 40px | Page section top margin |
| `--space-24` | 48px | Large section gap |

---

### 5.2 Component Spacing Specifications

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

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

#### Button
```
Base: padding 10px 20px
Border-radius: 6px (always)
```

#### Input
```
Padding: 10px 14px
Label margin-bottom: 6px
Field group gap: 16px
```

#### Table
```
Header cell padding: 10px 14px
Body cell padding: 12px 14px
Row hover: background #1e1f21
```

---

## 6. Border Radius System

Ink uses a **moderate, consistent** radius that reads as considered rather than sharp or fully rounded — the visual equivalent of a well-set book margin.

### 6.1 Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| `--radius-none` | `0px` | Table cells |
| `--radius-xs` | `4px` | Rare — small decorative elements |
| `--radius-sm` | `5px` | Badges / tags |
| `--radius-md` | `6px` | **Primary** — buttons, inputs, cards, dropdown bottom corners |
| `--radius-lg` | `10px` | Modals |
| `--radius-full` | `9999px` | Toggle track, radio, avatar |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Button (all variants) | 6px |
| Text input / textarea | 6px |
| Select / dropdown trigger | 6px |
| Dropdown panel | `0 0 6px 6px` |
| Badge / tag | 5px |
| Card / surface | 6px |
| Modal | 10px |
| Checkbox | 4px |
| Radio | 9999px |
| Toggle track | 12px (fully pill, height 24px) |
| Toggle thumb | 50% (circle) |
| Table container | 6px |
| Table cell | 0px |

---

## 7. Shadow & Elevation System

### 7.1 The Deep Night Shadow Rule

All ambient shadows use pure black at high opacity — deeper than most dark systems in this collection, because Ink's base background is already near-black and needs a strong shadow to register as elevated:

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

### 7.2 Elevation and Shadow Pairing

| What You're Building | Shadow to Use |
|---------------------|---------------|
| Card on page | none — border only |
| Dropdown panel | `--shadow-dropdown` (12px 32px, 60% opacity) |
| Modal / dialog | `--shadow-modal` (24px 64px, 80% opacity) — the deepest shadow in the collection |
| Input focus | `--shadow-focus` (soft slate-blue ring, 12% opacity) |
| Tooltip | `--shadow-xs` |

### 7.3 The Input Focus Ring

Unlike Mono's border-only focus, Ink pairs a border color change with a soft focus ring — appropriate for a system meant to feel considered and tactile:

```css
.input:focus {
  border-color: #7c99b8;
  box-shadow: 0 0 0 3px rgba(124, 153, 184, 0.12);
}
```

### 7.4 Cards — Border Only

Cards rely entirely on `border: 1px solid #2c2d2f` for definition — no ambient shadow. The near-black background contrast between page (`#111213`) and card (`#18191b`) is subtle by design; the border does the defining work.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-btn-primary-text); /* #111213 */

  background: var(--color-btn-primary-bg); /* #7c99b8 */
  border: none;
  border-radius: var(--radius-md);      /* 6px */

  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-primary:hover { background: var(--color-btn-primary-hover); /* #9db5cc */ }
.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-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-btn-secondary-text);    /* #c8ccd0 */

  background: var(--color-btn-secondary-bg); /* #1e1f21 */
  border: 1.5px solid var(--color-btn-secondary-border); /* #2c2d2f */
  border-radius: var(--radius-md);

  padding: 10px 20px;
  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-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-btn-outline-text);      /* #7c99b8 */

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

  padding: 10px 20px;
  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-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-btn-destructive-text); /* #e8d0d0 */

  background: var(--color-btn-destructive-bg); /* #8b4040 */
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-destructive:hover { background: var(--color-btn-destructive-hover); /* #a04a4a */ }
```

---

### 8.2 Form Inputs

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

  background: var(--color-bg-base);       /* #111213 */
  border: 1.5px solid var(--color-border-medium); /* #2c2d2f */
  border-radius: var(--radius-md);        /* 6px */

  padding: 10px 14px;
  width: 100%;

  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-muted); }
.input:focus {
  border-color: var(--color-border-accent); /* #7c99b8 */
  box-shadow: var(--shadow-focus);
}
.input:disabled { opacity: 0.4; cursor: not-allowed; }
```

#### Textarea
```css
.textarea {
  /* Same as .input */
  min-height: 88px;
  resize: vertical;
  line-height: var(--leading-relaxed);
  font-family: var(--font-body);
}
```

#### 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-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);  /* #5a5d62 */
  margin-bottom: 6px;
  display: block;
}
```

---

### 8.4 Card / Surface

```css
.surface {
  background: var(--color-bg-surface);    /* #18191b */
  border: 1px solid var(--color-border-medium); /* #2c2d2f */
  border-radius: var(--radius-md);        /* 6px */
  padding: 24px;
}
```

No accent lines, no top border color. The card's identity comes from its subtle background lift and hairline border against the near-black page.

---

### 8.5 Modal

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

.modal {
  background: var(--color-bg-surface);    /* #18191b */
  border: 1px solid var(--color-border-medium); /* #2c2d2f */
  border-radius: var(--radius-lg);        /* 10px */
  box-shadow: var(--shadow-modal);        /* 0 24px 64px rgba(0,0,0,0.80) */
  max-width: 480px;
  width: 90%;
  padding: 32px;
}

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

---

### 8.6 Badge / Tag

```css
.badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm); /* 5px */
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-success  { background: rgba(74,122,92,0.20);   color: #6aad80; border-color: rgba(74,122,92,0.30); }
.badge-warning  { background: rgba(122,107,64,0.20);  color: #b09060; border-color: rgba(122,107,64,0.30); }
.badge-error    { background: rgba(139,64,64,0.20);   color: #c08080; border-color: rgba(139,64,64,0.30); }
.badge-info     { background: rgba(124,153,184,0.20); color: #7c99b8; border-color: rgba(124,153,184,0.30); }
.badge-neutral  { background: rgba(200,204,208,0.10); color: #5a5d62; border-color: rgba(200,204,208,0.10); }
```

Ink badges always carry a matching tinted border — this is a distinguishing detail versus Mono and Capsule, whose badges are typically borderless.

---

### 8.7 Toggle Switch

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

.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);
}
.toggle-track.on .toggle-thumb { transform: translateX(20px); }
```

Unlike Mono's square relay-switch metaphor, Ink's toggle is a fully rounded, soft pill with a white circular thumb — a warmer, more tactile interaction that fits the editorial tone.

---

### 8.8 Table

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

.table th {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-medium);
}
.table td {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-tertiary);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-hairline);
}
.table tr:hover td { background: var(--color-bg-elevated); }
```

Article/entity titles inside table cells switch to Libre Baskerville at 15px to signal "this is a title," while supporting metadata columns (dates, counts) remain Crimson Pro or muted Libre Baskerville caption style.

---

### 8.9 Dropdown Panel

```css
.dropdown-panel {
  background: var(--color-bg-surface);    /* #18191b */
  border: 1.5px solid var(--color-border-medium); /* #2c2d2f */
  border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow-dropdown);
  margin-top: 3px;
  overflow: hidden;
  z-index: var(--z-dropdown);
}

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

---

## 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 + tags) */
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Wide + Narrow (chart/table + controls) */
.layout-wide-narrow { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

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

---

## 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 |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Exit transitions |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-fast` | 100ms | Border, opacity toggles |
| `--duration-base` | 200ms | Interactive state changes |
| `--duration-slow` | 350ms | Modal entry |

### 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 100ms; }
.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:** 14px, 16px, 18px, 20px, 24px
- **Default size:** 16px inline, 20px standalone
- **Stroke weight:** 1.5px, stroke-based, never filled
- **Color:** Inherit from parent text color
- **Library recommendation:** Lucide Icons — thin geometric strokes read well against serif type

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

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background | Box Shadow |
|-------|--------|------------|-----------|
| Default | `#2c2d2f` | `#111213` | none |
| Hover | `#3a3c3f` | `#111213` | none |
| Focus | `#7c99b8` | `#111213` | `0 0 0 3px rgba(124,153,184,0.12)` |
| Disabled | `#2c2d2f` | `#111213` (opacity 0.4) | none |
| Error | `#8b4040` | `#111213` | `0 0 0 3px rgba(139,64,64,0.12)` |

### 14.2 Button States

| State | Primary Bg | Primary Text | Secondary Bg |
|-------|-----------|--------------|--------------|
| Default | `#7c99b8` | `#111213` | `#1e1f21` |
| Hover | `#9db5cc` | `#111213` | `#2c2d2f` |
| Active/Press | scale 0.98 | — | scale 0.98 |
| Disabled | opacity 0.35 | — | opacity 0.35 |

### 14.3 Toggle States

| State | Track Background | Thumb Position |
|-------|-------------------|----------------|
| Off | `#2c2d2f` | `left: 3px` |
| On | `#7c99b8` | `translateX(20px)` |
| Disabled | `#1e1f21` | opacity 0.4 |

---

*End of Design System — Ink v1.0*