30 lines
1.6 KiB
Markdown
30 lines
1.6 KiB
Markdown
# 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.
|