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]>
2.5 KiB
2.5 KiB
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#f97316is 2.8:1 and fails WCAG AA. - Sidebar group labels ("Sources") use
--text-faint. The mockup's#6f69a3is 3.6:1 on--surface-0and fails AA. - Placeholders on
--surface-3inputs use--text-muted:--text-faintthere 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#fffdf7with tape, captions in Caveat, body in Gelasio. - Note cards
#fffbe6, ticket cards#efe0bdwith a dashed border. - A grid underneath, with slight rotations of ±2° at most. Must work on phones.
- Kraft background
- 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.
- Navy