# Mono — Construction Instructions & AI Prompting Guide
> Version 1.0 · Complete decision framework for building with the Mono system

---

## Table of Contents

1. [Design Philosophy & Core Rules](#1-design-philosophy--core-rules)
2. [The Two-Font Law](#2-the-two-font-law)
3. [Color Application Rules](#3-color-application-rules)
4. [Border Radius Decision Framework](#4-border-radius-decision-framework)
5. [Background & Surface Rules](#5-background--surface-rules)
6. [Shadow & Elevation Rules](#6-shadow--elevation-rules)
7. [The Amber Accent — When and How](#7-the-amber-accent--when-and-how)
8. [Typography Application Rules](#8-typography-application-rules)
9. [Spacing Construction Rules](#9-spacing-construction-rules)
10. [Component Construction Guides](#10-component-construction-guides)
11. [Interactive States — Full Decision Guide](#11-interactive-states--full-decision-guide)
12. [Layout Construction Rules](#12-layout-construction-rules)
13. [Animation Rules](#13-animation-rules)
14. [What Never to Do — Anti-Pattern List](#14-what-never-to-do--anti-pattern-list)
15. [AI Prompting Instructions](#15-ai-prompting-instructions)
16. [New Project Checklist](#16-new-project-checklist)
17. [Component Pattern Library](#17-component-pattern-library)
18. [Responsive Construction Rules](#18-responsive-construction-rules)
19. [Accessibility Guidelines](#19-accessibility-guidelines)
20. [Common Scenarios — Decision Trees](#20-common-scenarios--decision-trees)

---

## 1. Design Philosophy & Core Rules

### The Fundamental Premise

The Mono system is built on a single conviction: **the interface is a terminal, not a storefront.** Every decision — the monospace-dominant type, the near-zero border radius, the single amber signal color — communicates that this product shows you raw, truthful system state without decoration getting in the way. Nothing here is trying to look "friendly." It is trying to look *correct*.

This is the aesthetic language of `htop`, a Grafana dark dashboard, a `tail -f` log stream, and an old amber CRT monitor. The dark layered backgrounds, the amber glow, the code-comment section titles — they tell the engineer: *this is instrumentation, and it will not lie to you.*

---

### The 10 Commandments of This System

**1. Monospace is the default, not the exception.**
IBM Plex Mono carries body copy, labels, buttons, badges, and tables. Albert Sans is reserved exclusively for large display numerals and page-level headings ≥18px. If you're unsure which font to use, the answer is IBM Plex Mono.

**2. Everything is nearly square.**
`border-radius: 2px` is the default for buttons, inputs, cards, badges, and modals. This is not zero-radius brutalism (see the Sharp system) — it is a hair's-width softening, present but imperceptible at a glance.

**3. Amber is the only signal.**
`#f59e0b` is the system's single interactive and alert color. It appears on: primary buttons, focused input borders, active modal borders, and the "warning" semantic state (which intentionally shares the accent color). Do not introduce a second accent hue.

**4. Section titles are lowercase code comments.**
Unlike every other system in this collection, Mono's section dividers are lowercase, not uppercase — `typography`, `color_palette`, `buttons` — echoing a comment string in source code. This is a defining, non-negotiable rule.

**5. Status badges are transparency-tinted, never solid.**
Every status pill uses `rgba(color, 0.12)` background with full-opacity text — the exact numeric opacity (`0.12`) is a system constant. Do not round it to `0.15` or `0.10`; consistency across badges matters more than any individual value.

**6. The amber glow is a CRT phosphor effect, not a generic drop shadow.**
`box-shadow: 0 0 16px rgba(245,158,11,0.35)` appears only on primary button hover (and optionally a live-status pulse). It must always be a soft, centered, non-directional glow — never an offset drop shadow.

**7. Borders, not shadows, define surfaces.**
Cards and panels use `border: 1px solid #3a3b3f` with zero ambient shadow. Shadows are reserved for genuinely floating elements: dropdowns and modals only.

**8. Toggle switches look like relays, not pills.**
The toggle track is `2px` radius (nearly square) with a dark, square-ish thumb — a deliberate rejection of the soft iOS-style toggle pattern used elsewhere. This is a physical switch metaphor, not a soft capsule.

**9. Field labels read like config keys.**
Prefix technical field labels with `// ` where it fits the context (e.g. `// api_endpoint`, `// auth_token`). This is optional flourish but strongly reinforces the terminal metaphor when building config-heavy forms.

**10. Motion is fast, not smooth.**
Transitions run at `150ms` base — faster than the `200ms` standard used in the collection's other dark systems. A terminal should feel instantaneous. Nothing eases in slowly; nothing bounces.

---

## 2. The Two-Font Law

Every piece of text belongs to exactly one of two categories. This law is inverted from most systems in the collection: monospace is the default, sans-serif is the exception.

### Category 1: Display — Albert Sans
**Assignment question: Is this a large numeral, hero display value, or page-level heading ≥18px?**

If yes → Albert Sans, weight 700–800.

- Page hero title: YES → Albert Sans 800
- Large stat number (e.g., "1,204 requests/sec"): YES → Albert Sans 800
- Section heading (H2, ~28px): YES → Albert Sans 700
- Modal title: NO → use IBM Plex Mono 700 instead (modals are UI, not display)
- Card heading: NO → IBM Plex Mono 700
- Any text under 18px: NO → IBM Plex Mono

---

### Category 2: UI / Body / Technical — IBM Plex Mono
**Assignment question: Is this any UI element, body copy, or anything under 18px?**

If yes → IBM Plex Mono. This is nearly everything.

- Button text: YES → IBM Plex Mono 500
- Input text / placeholder: YES → IBM Plex Mono 400
- Field label: YES → IBM Plex Mono 400
- Section titles (lowercase dividers): YES → IBM Plex Mono 400
- Body paragraph: YES → IBM Plex Mono 400
- Badge text: YES → IBM Plex Mono 700
- Table header / cell: YES → IBM Plex Mono 400
- Timestamp, comment, caption: YES → IBM Plex Mono 400
- Modal title: YES → IBM Plex Mono 700

When in doubt, use IBM Plex Mono. Reaching for Albert Sans should feel like a deliberate, occasional decision — not a default.

---

### Font Decision Flowchart

```
Is it a large display numeral or page heading ≥18px? ──YES──► Albert Sans, 700–800
        │ NO
        ▼
Default to IBM Plex Mono
```

---

## 3. Color Application Rules

### 3.1 Background Selection Rules

| Surface | Color | Why |
|---------|-------|-----|
| Page body | `#1a1b1e` | Deepest layer |
| Cards / panels | `#232428` | Surface layer |
| Hover fill / active row | `#2e2f33` | Elevated layer |
| Inputs | `#1a1b1e` | Same as page base — inputs are inset |
| Modal | `#232428` | Surface level, defined by amber border |
| Terminal / code output pane | `#141517` | Sunken — one step below page base |

**Rule:** you have exactly four dark tones: `sunken` → `base` → `surface` → `elevated`. Never introduce a fifth. Never lighten a background to indicate emphasis — use the amber accent or text-weight instead.

---

### 3.2 Amber Accent Usage Rules

Amber is the interactive and alert signal. Use it in exactly these contexts:

1. **Primary button background** — `#f59e0b` fill with `#1a1b1e` text
2. **Input focus** — `border-color: #f59e0b` (no glow ring — border-only, unlike Capsule)
3. **Outline button** — `color: #f59e0b` + `border: 1.5px solid #f59e0b`
4. **Modal border** — non-destructive modals use an amber border as their sole elevation cue
5. **Warning badge** — `background: rgba(245,158,11,0.12)` + `color: #f59e0b`

**Never:**
- Amber as a card, page, or modal background fill
- Amber body text outside of labeled links or values
- A second accent hue introduced alongside amber
- Amber glow applied to anything except primary button hover / live status dot

---

### 3.3 Text Color Assignment

| Priority | Color | Examples |
|----------|-------|---------|
| Highest — primary content | `#d4d4d8` | Headings, values, strong labels |
| High — supporting content | `#9ca3af` | Body copy, descriptions |
| Medium — contextual | `#6b7280` | Field labels, captions |
| Low — metadata, dim | `#4b4c52` | Section titles, timestamps, `//` comments |
| Disabled | `#35363a` | Greyed-out states |
| On accent (amber button) | `#1a1b1e` | Dark text on bright amber button only |

**Rule:** never use `#d4d4d8` for secondary information. If a value needs emphasis, raise it one level in the hierarchy rather than introducing a new color.

---

### 3.4 Semantic Color Rules

Always apply all three together for success/warning/error/info states:
- Tinted background at `rgba(color, 0.12)` — this exact opacity, not `0.15`
- Fully-opaque text in the semantic color
- No border required by default (borders are optional accents, not mandatory)

---

## 4. Border Radius Decision Framework

The rule is simple: **almost everything is `2px`.** There is no pill-first or sharp-zero philosophy here — it's a deliberate middle ground that reads as "precision instrument," not "consumer app" and not "raw brutalist."

### Is this element a button, input, badge, or card?
→ `border-radius: 2px` — no exceptions.

### Is this a dropdown panel?
→ `border-radius: 0 0 2px 2px` — flat top (continues the trigger), rounded bottom corners only.

### Is this a radio button?
→ `border-radius: 9999px` — the only fully circular element besides the status dot.

### Is this a toggle track or thumb?
→ Track: `2px`. Thumb: `1px`. Neither is a pill.

### Is this a table cell?
→ `border-radius: 0px` — always flat.

---

### Quick Reference Table

| Element | Radius |
|---------|--------|
| Button (all variants) | 2px |
| Text input / textarea | 2px |
| Badge / chip | 2px |
| Card / surface | 2px |
| Modal | 2px |
| Checkbox | 2px |
| Radio | 9999px |
| Toggle track | 2px |
| Toggle thumb | 1px |
| Dropdown panel | 0 0 2px 2px |
| Table container | 2px |
| Table cell | 0px |

---

## 5. Background & Surface Rules

### 5.1 The Dark Layering Model

```
Layer 4 (highest): Modals, Dropdowns   → #232428 (surface) + amber/red border
Layer 3:           Cards, Panels       → #232428 (surface)
Layer 2:           Hover / Active fills → #2e2f33 (elevated)
Layer 1:           Sunken (code, logs) → #141517
Layer 0 (lowest):  Page Background     → #1a1b1e (base)
```

**Key insight:** modals do not get a lighter background than cards — both use `#232428`. Elevation comes exclusively from the amber (or red, for destructive) border, never from a lighter fill.

---

### 5.2 Input Background Rule

Inputs share the page's base color (`#1a1b1e`), not the card surface color. This means inputs recess visually below the card that contains them — the border and focus-state color provide all necessary definition.

---

### 5.3 No Warm or Light Surfaces

This system has zero light-mode exceptions and zero warm-toned backgrounds. Everything lives in a cool, near-neutral dark grey range. The only warmth in the entire system is the amber accent itself — reserve it for that singular purpose.

---

## 6. Shadow & Elevation Rules

### 6.1 The Terminal Shadow Rule

Ambient shadows are pure black:

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

The single exception is the amber glow (Section 7 of the design system doc), which is chromatic by design and reserved for primary button hover.

### 6.2 Elevation and Shadow Pairing

| What You're Building | Shadow to Use |
|---------------------|---------------|
| Card / surface | none — border only |
| Dropdown panel | `--shadow-dropdown` |
| Modal / dialog | `--shadow-modal` (optional, border does the heavy lifting) |
| Primary button hover | `--shadow-amber-glow` |
| Tooltip | `--shadow-xs` |

### 6.3 Never Combine Border and Shadow for the Same Elevation Signal

Cards use a border only. Modals use a border *and* may add a subtle black shadow behind it for lift — but the border remains the primary definer, and the shadow should never be strong enough to read as the main visual cue.

---

## 7. The Amber Accent — When and How

### When to Use Amber

| Use It | Don't Use It |
|--------|--------------|
| Primary button fill | Card or modal backgrounds |
| Input focus border | Section backgrounds |
| Outline button text/border | Body copy text |
| Modal border (non-destructive) | Table row fills |
| Warning badge | Success/error/info badges |
| Live status dot (optional pulse) | Decorative elements |

**Rule:** every amber element says "this is active, focused, or needs your attention." Nothing decorative should be amber.

### How NOT to Use Amber

- Never as a fill color for any container larger than a badge or button
- Never paired with a second accent hue in the same viewport
- Never used for both a success and warning state — success is green, warning is amber

---

## 8. Typography Application Rules

### 8.1 The Lowercase Section Title Pattern

```
typography                          ← IBM Plex Mono 400, 10px, lowercase, #4b4c52, tracking 0.16em
─────────────────────────────       ← 1px border-bottom #2e2f33, padding-bottom 8px
                                     ← 20px gap before first content
[Section content begins]
```

This lowercase pattern is unique to Mono in this collection. Never uppercase a section title in this system — it breaks the "code comment" metaphor central to the design.

### 8.2 The Header Eyebrow Pattern

```
// theme_06.mono                    ← eyebrow, IBM Plex Mono 10px, tracking 0.15em, #4b4c52
MONO_SYSTEM                         ← title, IBM Plex Mono 700, clamp(22px,3.5vw,40px), #d4d4d8
v2.4.1 — design toolkit             ← version subtitle, weight 400, 0.6em relative size, #6b7280
```

Page headers use a `border-left: 3px solid #f59e0b; padding-left: 20px` treatment rather than a top border or centered layout — echoing a terminal command prompt bracket.

### 8.3 Weight as Hierarchy

| Hierarchy Level | Weight | Color |
|-----------------|--------|-------|
| Display | 800 | `#d4d4d8` |
| Heading | 700 | `#9ca3af` or `#d4d4d8` |
| Body | 400 | `#9ca3af` |
| Section title | 400 | `#4b4c52` |
| Label | 400 | `#6b7280` |
| Caption / comment | 400 | `#4b4c52` |

Because IBM Plex Mono has fewer usable weights than a variable sans, hierarchy in this system leans more heavily on **color** and **size** than on weight contrast. Do not force heavier weights (600–700) onto body copy just to create emphasis — use color instead.

---

## 9. Spacing Construction Rules

### 9.1 The Padding Budget for Components

| Component | Padding |
|-----------|---------|
| Badge | 2px vertical, 8px horizontal |
| Input | 9px vertical, 12px horizontal |
| Button | 9px vertical, 18px horizontal |
| Card | 24px all sides |
| Modal | 28px all sides |
| Table header cell | 8px vertical, 12px horizontal |
| Table body cell | 10px vertical, 12px horizontal |

**Rule:** Mono's padding budget is consistently tighter than the collection's other dark systems (Capsule uses 24px card padding vs Mono's same 24px, but Mono's button and input padding is noticeably tighter — 9px/12px vs Capsule's 10px/18px). This density is intentional; it reflects the log-viewer / dashboard use case.

---

### 9.2 Vertical Rhythm in Forms

```
[Field Label — IBM Plex Mono 11px, "// field_name"]
         ↕ 5px
[Input — #1a1b1e bg, #3a3b3f border]
         ↕ 14px (between field groups)
[Next Field Label]
```

---

### 9.3 Card Gap Rhythm

Cards in a dashboard grid are separated by `16px` — the tightest inter-card gap in the collection, reflecting the density expected of a monitoring dashboard.

---

## 10. Component Construction Guides

### 10.1 How to Build a Modal — Step by Step

**Step 1: Overlay** — `rgba(10,11,12,0.75)`, no blur (blur softens the terminal aesthetic; avoid it here)

**Step 2: Modal container** — `#232428` background, `1.5px solid #f59e0b` border (or `#ef4444` for destructive), `border-radius: 2px`, `padding: 28px`, `max-width: 480px`

**Step 3: Title** — IBM Plex Mono 700, 16px, `#d4d4d8`, margin-bottom `4px`. Consider a function-call style title, e.g. `confirm_deploy()`

**Step 4: Description** — IBM Plex Mono 400, 11px, `#6b7280`, line-height 1.7, margin-bottom `20px`. Prefix lines with `// ` for the comment metaphor.

**Step 5: Input (if applicable)** — same as standard input, margin-bottom `12px`

**Step 6: Button row** — flex, gap `8px`, justify-content `flex-end`. Cancel uses secondary style; confirm uses primary (or destructive) style. Consider function-call button labels, e.g. `deploy()`, `cancel()`, `kill -9`.

---

### 10.2 How to Build a Card — Step by Step

**Step 1: Container** — `#232428` background, `1px solid #3a3b3f` border, `border-radius: 2px`, `padding: 24px`. No shadow, no accent line.

**Step 2: Section title** — IBM Plex Mono 400, 10px, **lowercase**, `#4b4c52`, tracking `0.16em`, border-bottom `1px solid #2e2f33`, padding-bottom `8px`, margin-bottom `20px`.

**Step 3: Content** — body text IBM Plex Mono 400, 12–13px, `#9ca3af`. Strong values in `#f59e0b` or `#d4d4d8`.

---

### 10.3 How to Build a Status Badge — Step by Step

**Step 1: Shell** — `border-radius: 2px`, `padding: 2px 8px`, `display: inline-flex`

**Step 2: Pick the semantic color** — success `#4ade80` / warning `#f59e0b` / error `#ef4444` / info `#60a5fa`

**Step 3: Apply the transparency rule** — background `rgba([color], 0.12)`, text at full opacity. This exact `0.12` value is a system constant.

**Step 4: Typography** — IBM Plex Mono 700, 10px, uppercase, letter-spacing `0.08em`

---

### 10.4 How to Build a Toggle — Step by Step

**Step 1: Track** — `40px × 22px`, `border-radius: 2px`, background `#3a3b3f` (off) / `#f59e0b` (on)

**Step 2: Thumb** — `16px × 16px`, `border-radius: 1px`, background `#1a1b1e` (dark, not white), `top: 3px; left: 3px`, `translateX(18px)` when on

**Step 3: Label** — IBM Plex Mono 400, 11px, `#9ca3af`, placed to the right, gap `8px`

---

## 11. Interactive States — Full Decision Guide

### 11.1 Button States

**Primary (amber):**
- Default: `background: #f59e0b`, `color: #1a1b1e`
- Hover: `background: #fbbf24` + `box-shadow: 0 0 16px rgba(245,158,11,0.35)`
- Active: `transform: scale(0.98)`
- Disabled: `opacity: 0.35`

**Secondary (dark):**
- Default: `background: #2e2f33`, `border: 1px solid #3a3b3f`
- Hover: `background: #3a3b3f`

**Outline (amber ghost):**
- Default: `background: transparent`, `border: 1.5px solid #f59e0b`, `color: #f59e0b`
- Hover: `background: rgba(245,158,11,0.10)`

**Destructive (red):**
- Default: `background: #ef4444`
- Hover: `background: #f87171`

### 11.2 Input Focus

```css
.input:focus { border-color: #f59e0b; }
```

No glow ring on focus — border-color change alone is the complete focus signal in this system. This is deliberately more minimal than Capsule's border+glow combination.

### 11.3 Table Row Hover

```css
tr:hover td { background: #2e2f33; }
```

---

## 12. Layout Construction Rules

### 12.1 Page Layout Model

```css
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}
```

### 12.2 Dashboard Grid Pattern

```css
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.layout-wide-narrow { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
```

Cards stack with `16px` gaps — tighter than any other system in the collection.

---

## 13. Animation Rules

### 13.1 What Can Animate

| Element | Property | Duration | Easing |
|---------|----------|----------|--------|
| Button hover | `background`, `box-shadow` | 150ms | ease-out |
| Button press | `transform: scale(0.98)` | 50ms | linear |
| Input focus | `border-color` | 150ms | ease-out |
| Toggle thumb | `transform` | 150ms | ease-out |
| Dropdown open | `opacity` | 100ms | ease-out |
| Live status dot | `opacity` pulse | 2s loop | ease-in-out |

### 13.2 What Should Not Animate

- Card appearance on load
- Section title opacity
- Badge color changes (instant only)
- Any bounce, spring, or overshoot easing — this system never bounces

---

## 14. What Never to Do — Anti-Pattern List

### Typography Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use Albert Sans for buttons, labels, or body text | Reserve Albert Sans for display numerals/headings ≥18px only |
| Uppercase the section titles | Section titles are always lowercase |
| Use serif or italic text anywhere | This system is monospace/sans only, always upright |
| Use a third font family | Only Albert Sans + IBM Plex Mono exist in this system |

### Color Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use a second accent color alongside amber | `#f59e0b` is the only accent |
| Use solid-fill status badges | Always `rgba(color, 0.12)` tinted backgrounds |
| Use warm cream or light backgrounds | All backgrounds are cool dark greys |
| Apply amber glow to secondary/outline buttons | Glow is primary-button-hover only |

### Border Radius Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use `border-radius: 9999px` on buttons or inputs | Buttons/inputs are `2px` |
| Use `0px` (fully sharp) on any interactive element | Mono is `2px`, not zero — that's the Sharp system |
| Round the toggle into a pill shape | Toggle track is `2px`, thumb is `1px` |

### Structural Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Add a colored top accent line to cards | Mono has no accent lines — borders only |
| Use a glow ring on input focus | Border-color change alone is the focus signal |
| Use `backdrop-filter: blur()` on modal overlays | Keep the overlay crisp — no blur in this system |
| Add bounce/spring easing to any transition | All easing is linear-adjacent: ease-out, ease-in, ease-standard |

---

## 15. AI Prompting Instructions

**System prompt to include:**

> Build this UI using the Mono design system.
>
> Core rules:
> — Dark mode only. Background: `#1a1b1e`. Cards/panels: `#232428`. Hover fills: `#2e2f33`. Sunken/code panes: `#141517`.
> — Border-radius is `2px` everywhere: buttons, inputs, cards, badges, modals. Dropdown panels are `0 0 2px 2px`. Only radio buttons and the status dot are fully circular.
> — Primary accent: `#f59e0b` (amber). Use for: primary button fill, input focus border, modal border, warning badges. Amber glow `0 0 16px rgba(245,158,11,0.35)` on primary button hover only.
> — Fonts: IBM Plex Mono for everything (buttons, labels, body, badges, tables, titles). Albert Sans ONLY for large display numerals and page headings ≥18px.
> — Section titles are lowercase (not uppercase), IBM Plex Mono 10px, `#4b4c52`, tracking `0.16em`, with `border-bottom: 1px solid #2e2f33`.
> — Status badges: always `rgba(color, 0.12)` background + full-opacity text. Never solid fills.
> — No warm shadows, no colored ambient shadows except the amber glow. Use `rgba(0,0,0,...)` for all other shadows.
> — No blur on modal overlays. No accent lines on cards.
> — Text hierarchy: `#d4d4d8` (primary) → `#9ca3af` (body) → `#6b7280` (labels) → `#4b4c52` (metadata/muted).

---

## 16. New Project Checklist

**Fonts:**
- [ ] Albert Sans imported (weights 400–800)
- [ ] IBM Plex Mono imported (weights 400–700)
- [ ] `font-family: 'IBM Plex Mono', monospace` set on `body`

**Colors:**
- [ ] `--color-bg-base: #1a1b1e` on root/container
- [ ] `--color-bg-surface: #232428` for cards
- [ ] `--color-amber-400: #f59e0b` as primary accent

**Radius:**
- [ ] All buttons, inputs, cards, badges, modals at `border-radius: 2px`
- [ ] Dropdown panels at `0 0 2px 2px`
- [ ] Radio buttons and status dot at `9999px`

**Shadows:**
- [ ] No colored shadows except the amber glow on primary button hover
- [ ] Cards use border only, no shadow
- [ ] Modal overlay has no blur

**Structure:**
- [ ] Section titles are lowercase, not uppercase
- [ ] Status badges use `rgba(color, 0.12)` tinted backgrounds
- [ ] Toggle track is `2px` radius, not a pill

---

## 17. Component Pattern Library

### Pattern: Process Log Row

```html
<div class="surface" style="padding:24px;overflow-x:auto;">
  <div class="section-title">process_log</div>
  <table class="table">
    <thead><tr><th>PID</th><th>STATUS</th><th>SERVICE</th><th>UPTIME</th></tr></thead>
    <tbody>
      <tr>
        <td style="color:#f59e0b;">4821</td>
        <td><span class="badge badge-success">RUN</span></td>
        <td>api-gateway</td>
        <td>14d 3h</td>
      </tr>
    </tbody>
  </table>
</div>
```

### Pattern: Page Header

```html
<div style="margin-bottom:40px;border-left:3px solid #f59e0b;padding-left:20px;">
  <div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:0.15em;color:#4b4c52;">// theme_06.mono</div>
  <h1 style="font-family:'IBM Plex Mono';font-size:clamp(22px,3.5vw,40px);font-weight:700;color:#d4d4d8;">
    MONO<span style="color:#f59e0b;">_</span>SYSTEM
  </h1>
</div>
```

### Pattern: Status Summary List

```html
<div style="font-family:'IBM Plex Mono';font-size:11px;color:#4b4c52;line-height:1.8;">
  <span style="color:#4ade80;">●</span> online: 3 nodes<br>
  <span style="color:#f59e0b;">●</span> warn: 1 degraded<br>
  <span style="color:#ef4444;">●</span> down: 0 nodes
</div>
```

---

## 18. Responsive Construction Rules

**Below 480px:**
- Modal padding reduces from 28px to 18px
- Two-column grids collapse to single column
- Table scrolls horizontally within its container

**480px–1023px:**
- Two-column layouts remain where space allows, else collapse
- Card padding reduces from 24px to 18px

**1024px+:**
- Full system at designed specifications
- 2fr + 1fr layouts enabled

---

## 19. Accessibility Guidelines

### 19.1 Color Contrast Requirements

| Pairing | Contrast | WCAG Level |
|---------|----------|-----------|
| `#d4d4d8` on `#1a1b1e` | 12.6:1 | AAA ✓ |
| `#9ca3af` on `#1a1b1e` | 7.8:1 | AAA ✓ |
| `#6b7280` on `#1a1b1e` | 4.9:1 | AA ✓ |
| `#f59e0b` on `#1a1b1e` | 8.2:1 | AAA ✓ |
| `#1a1b1e` on `#f59e0b` | 8.2:1 | AAA ✓ |
| `#4b4c52` on `#1a1b1e` | 2.6:1 | ✗ Muted/decorative only |

**Rules:**
- `--color-text-muted` is acceptable only for section titles, timestamps, and comment-style text — never for content the user must read to complete a task.

### 19.2 Focus Management

- All interactive elements need a visible `:focus-visible` state: `outline: 2px solid #f59e0b; outline-offset: 2px;`
- Input focus uses border-color change — ensure it's never removed without an alternative signal

---

## 20. Common Scenarios — Decision Trees

### Scenario: "Which font do I use?"

```
Is it a large display numeral or page heading ≥18px? ──YES──► Albert Sans
        │ NO
        ▼
Default: IBM Plex Mono
```

### Scenario: "Should this section title be uppercase?"

```
Is this the Mono system? ──YES──► No. Always lowercase.
```

### Scenario: "What background does this element use?"

```
Is it the page body? ──YES──► #1a1b1e
        │ NO
        ▼
Is it a card, modal, or dropdown? ──YES──► #232428
        │ NO
        ▼
Is it a hovered row or active fill? ──YES──► #2e2f33
        │ NO
        ▼
Is it a code/terminal output pane? ──YES──► #141517
        │ NO
        ▼
Is it an input field? ──YES──► #1a1b1e
```

### Scenario: "Should this have the amber glow?"

```
Is it a primary button, and is it being hovered right now? ──YES──► Add the glow
        │ NO
        ▼
Is it a live/pulsing status dot? ──YES──► Optional pulse animation, no glow needed
        │ NO
        ▼
Do not add the glow.
```

---

*End of Instructions — Mono v1.0*
*Design System Document: mono-design-system.md*
*Instructions Document: mono-instructions.md*