Lucas WintherandClaude Opus 5.5
560c27c04d
Adds the approved v1 design spec, UI mockups, AGENTS.md (with CLAUDE.md and GEMINI.md pointers), architecture/decisions/todo/permissions docs, agent permission files, and an empty Bun workspaces skeleton. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2.1 KiB
2.1 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.
- 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