# Design

## Status: visual direction open
No design system, palette or type scale is chosen yet. Seven mockups under `src/mockups/` each commit fully
to a different direction; the maintainer will pick one, or combine several, and this file then records the
chosen direction as tokens and rules. Until then, do not treat any single mockup's palette or fonts as the
house style.

## The candidate directions
| # | Folder | Direction |
|---|---|---|
| 1 | `01-editorial` | Editorial scroll: horizontal line, parchment and serif, motifs as thin threads |
| 2 | `02-vertical-story` | Vertical story: downward scroll with a sticky detail panel |
| 3 | `03-transit-map` | Transit map: motifs as metro lines, songs as stations |
| 4 | `04-greek-frieze` | Greek frieze: an unrolled black-figure vase frieze |
| 5 | `05-score` | Score / waveform: staff or waveform, parts as segments |
| 6 | `06-constellation` | Constellation (3D, three.js): songs as stars |
| 7 | `07-sea-voyage` | Sea voyage (3D, three.js): ship, sea, saga islands |

Details per direction: `docs/specs/001-timeline-mockups.md`.

## Constraints that hold for every direction
- Fonts are self-hosted from `@fontsource/*` (installed: Cormorant Garamond, Inter); nothing from a CDN.
- three.js only where a direction is 3D.
- Motif colours come from the data (`Motif.color` in `src/data/sample.ts`), so threads match across views.
- The fan-credits footer (`src/shared/credits.css`) is present on every page; a direction may restyle it
  but not remove or hide it.
- Avoid generic, templated "AI-looking" UI; a direction that is just another layout in different colours
  has failed.