# 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.