# DESIGN.md — Aftercare HTML docs

Visual contract: **Cobalt Grid** (`FRAME.md` / `frame-showcase.html`).
Atoms are sacred. Composition is free for long-form reading.

## 1. Product

Static HTML documentation for the Aftercare framework. Audience: agency developers and site-owner agents. Tone: risograph monograph / trend report — measured, editorial, sparse on covers, dense on indexes.

## 2. Color

| Token | Value | Role |
|---|---|---|
| `--paper` | `#F0EBDE` | Canvas |
| `--paper-2` | `#E6E0CE` | Code / inset regions |
| `--ink` | `#1F2BE0` | Only ink — type, rules, grid, decoration |
| `--ink-soft` | `#5560E5` | Editorial subtitles only |
| `--grid` | `rgba(31,43,224,0.10)` | Permanent graph paper |
| `--ink-faint` | `rgba(31,43,224,0.18)` | Ledger row dividers |

**Never** a second hue, gradient fill as decoration, or drop shadow (QR paper outset excepted).

## 3. Typography

| Face | Use |
|---|---|
| Newsreader 400 | Display, chapter titles, ledger names (size = hierarchy; never bold) |
| Hanken Grotesk 400 / 600 | Body; uppercase micro labels at 0.16–0.18em |
| DM Mono 400 | Chrome, tags, page numbers, code |

## 4. Surface & shape

- Permanent ~40px (or 2cqw in frames) graph-paper grid on every page ground
- Top + bottom 1.5px cobalt hairlines inset ~80px
- **0 border-radius** everywhere
- Flat: no elevation shadows

## 5. Primitives

| Primitive | States / notes |
|---|---|
| **Cover hero** | Brand “Aftercare” as display-hero; kick + italic ed-callout; glitch right; QR top-right |
| **Index ledger** | Topbar rule + rows (mono num · Newsreader name · Hanken desc) |
| **Chapter opener** | Mono CHAPTER NN; Newsreader title; optional lede; soft glitch left |
| **Prose block** | Max ~42rem; Hanken body 1.5; headings Newsreader |
| **Code block** | paper-2 ground, 1.5px ink border, DM Mono; 0 radius |
| **Table / ledger** | ink-faint row rules; header 1.5px ink |
| **Nav chrome** | Micro / mono links; current = solid underline |
| **Colophon foot** | Serif wordmark left; mono meta right; top 1.5px rule |
| **Pixel-glitch** | Stair-stepped scanline column |
| **QR-block** | 8×8 mosaic; paper outset anti-shadow |

## 6. Motion

Out of scope for docs (FRAME.md). Prefer none; optional 150ms opacity on link hover only.

## 7. Responsive

- Desktop: edge padding 80px; cover min-height 100vh
- ≤900px: padding 24px; stack ledger to single column; shrink display headlines with clamp
- Hairlines inset proportionally; glitch may hide under 700px to protect reading measure

## 8. Accessibility

- Cobalt on cream must remain load-bearing text (not ink-soft for body)
- Focus: 1.5px solid ink outline, 2px offset
- Skip link to `#main`
- Semantic landmarks: header nav, main, footer

## 9. Accepted debt

- Docs are static HTML (not Aftercare content); markdown in `docs/*.md` remains source for agents
- Pixel-glitch is CSS scanlines (showcase pattern), not SVG