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]>
46 lines
2.1 KiB
Markdown
46 lines
2.1 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.
|
||
- 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.
|