# Design

Reference mockups: `docs/design/mockups/round2-app-scrapbook-river.html`. These were approved by the owner on 2026-10-30.
Parked theme ideas (shelf, card catalogue): `round1-seven-directions.html`.

## App (everyday use): "Hardcover-style"
Dark, calm, dense. Three panes on desktop (nav · library list · entry detail); stacks on mobile.

| Token | Value | Use |
|---|---|---|
| `--surface-0` | `#17152b` | sidebar |
| `--surface-1` | `#1e1b36` | page |
| `--surface-2` | `#262247` | boxes in detail |
| `--surface-3` | `#2d2852` | selected row, pills, tabs |
| `--text` | `#ece9ff` | primary text |
| `--text-muted` | `#a9a3d6` | meta text |
| `--text-faint` | `#8d87c2` | box headings, placeholders |
| `--accent` | `#6d5dfc` | active tab, in-progress status |
| `--rating` | `#fbbf24` | stars, logo, draft badge |
| `--warn` | `#f97316` | source-change warnings and the Changes count only |
| `--ok` | `#34d399` | source synced |

- Type: Inter for the UI; Gelasio for long-form review text.
- Radii: 8px for controls, 10px for boxes, 999px for pills, 3–5px for covers.
- Orange means "a platform changed something". Never use it decoratively.
- Drafts (entries with no catalogue link) get a small amber outlined "Draft" badge and a striped placeholder cover.

## Media type colours (shared by both surfaces)
| Type | Colour |
|---|---|
| Books | `#6b3fa0` |
| Audio/podcasts | `#2f6b58` |
| Games | `#c1652f` |
| Film & TV | `#344b7a` |
| Music | `#a33b62` |

## Public page: "scrapbook + river" (Phase 2)
- **Scrapbook:**
  - Kraft background `#d8c3a0`. Polaroid cards `#fffdf7` with tape, captions in Caveat, body in Gelasio.
  - Note cards `#fffbe6`, ticket cards `#efe0bd` with a dashed border.
  - A grid underneath, with slight rotations of ±2° at most. Must work on phones.
- **River:**
  - Navy `#142033`. Instrument Serif headings, Instrument Sans body.
  - Streams per media type in soft tones: books `#b9a6f2`, audio `#ffd27a`, games `#f2a1a1`, film/TV `#9ad0c2`. Stream width is time spent.
  - Covers sit on streams. Threads are dotted white curves with an italic serif label.