55 lines
3.0 KiB
Markdown
55 lines
3.0 KiB
Markdown
# Design
|
||
|
||
## Status: direction chosen (2026-10-30)
|
||
The app at `/` (`src/app/`) is the house style. Its record, with every chosen and deselected idea and the
|
||
user's words: `docs/design/002-voyage-app.md`. The mockups under `src/mockups/` are history; don't take
|
||
styling from the dropped ones. New options vary structure, flow and behaviour within this direction —
|
||
never a new palette or font family.
|
||
|
||
## The direction: "two worlds" (look 2)
|
||
A stylised 3D sea voyage, bright and naturalistic in colour, framed by a Greek black-figure frieze that
|
||
drops like a curtain between scenes. The interface sits on parchment and borrows the frieze's terracotta,
|
||
black and meander band so that frieze, world and panels read as one piece.
|
||
|
||
## Tokens (`src/app/style.css` `:root`)
|
||
| Token | Value | Use |
|
||
|---|---|---|
|
||
| `--clay` | `#c46a33` | frieze ground; accents, active tab, play button |
|
||
| `--clay-deep` | `#9a4520` | eyebrows, hover, small accent text |
|
||
| `--glaze` | `#1d140e` | frieze figures; rules, borders, dark buttons, page frame |
|
||
| `--added-white` | `#efe3c8` | text on glaze |
|
||
| `--vellum` / `--vellum-hi` / `--vellum-lo` | `#e3d6b4` / `#ece2c6` / `#e0d1ab` | panel, cards, timeline |
|
||
| `--iron` / `--iron-soft` | `#2b2118` / `#5a4836` | body text / secondary text |
|
||
| `--line` | `rgb(43 33 24 / 0.2)` | hairlines |
|
||
| `--meander` | SVG data URI | the key band: 14px strip between two 2px glaze rules (`.meander-edge`) on top of every panel, card and bar |
|
||
|
||
Motif colours come from the data (`src/data/album/motifs.ts`) and are the same everywhere: timeline,
|
||
panel, ribbons and chips. On parchment, text in a motif colour is darkened to 4.5:1
|
||
(`src/app/timeline/ink.ts`); dots and knots keep the bright colour.
|
||
|
||
## Type
|
||
- **Inter** for all UI, labels and controls: 13px minimum (`--fs-label`), 14px small, 15px panel body,
|
||
weights 400–600, tracking ≤0.06em. Never small wide-tracked capitals (they were "very hard to read").
|
||
- **Cormorant Garamond** only for large display titles (`--fs-title` 2rem), lyric lines, Odyssey reading
|
||
text, and frieze inscriptions (≥19px on screen).
|
||
|
||
## Layout
|
||
- Desktop reference 1440×900: stage (3D canvas + frieze layer + caption card + bottom timeline) | right
|
||
panel 420px (collapsible to a 56px tab) | credits footer across the bottom.
|
||
- Timeline ≤190px tall by default; the current saga expanded with titles, the others compact.
|
||
- Below 900px: the panel becomes a bottom sheet; the timeline stays over the stage.
|
||
|
||
## 3D
|
||
Stylised, not realistic: toon/flat shading, ink outlines, flat colour-band water with drawn wave strokes,
|
||
a small flat sun, graphic silhouettes. Black-figure cut-outs (the giant, Athena) inside landings.
|
||
Pixel ratio ≤2; distant places are not drawn.
|
||
|
||
## Motion
|
||
Curtain drop ≈1.2s, parting lift ≈1.5s, doorway zoom ≈1.6s, fade ≈0.45/0.65s; ease-out curves.
|
||
`prefers-reduced-motion`: every scene change is a 200ms crossfade.
|
||
|
||
## Constraints
|
||
- Fonts self-hosted from `@fontsource/*`; three.js from npm; nothing from a CDN.
|
||
- The fan-credits footer is on every page and never hidden.
|
||
- Avoid generic, templated "AI-looking" UI.
|