Lucas WintherandClaude Opus 5.5
5fa59310f3
- Tags and custom fields update the cached entry optimistically and build from the latest cache; one entry's PATCHes run in order (mutation scope). - The review textarea follows server changes (Restore) unless edited. - friendlyError() maps validation reasons and 413 to plain copy everywhere. - Rating scale from me/preferences; /login and /register use auth/status; Attachments lists from the API. - Gelasio vendored (official OFL variable TTFs); minors from the review. - Docs: DESIGN (AA on orange, faint labels), DECISIONS, TODO, ARCHITECTURE. Co-Authored-By: Claude Opus 5.5 <[email protected]>
50 lines
2.5 KiB
Markdown
50 lines
2.5 KiB
Markdown
# 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.
|
||
- Text on `--warn` (the Changes count, the "See what changed" button) is dark `#1c0f04` (6.4:1), never white: white on `#f97316` is 2.8:1 and fails WCAG AA.
|
||
- Sidebar group labels ("Sources") use `--text-faint`. The mockup's `#6f69a3` is 3.6:1 on `--surface-0` and fails AA.
|
||
- Placeholders on `--surface-3` inputs use `--text-muted`: `--text-faint` there is 4.15:1.
|
||
- Fonts are self-hosted in `apps/web/src/fonts/` (Inter, Gelasio; both OFL). The app makes no third-party font requests.
|
||
- 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.
|