Epic-The-Musical-Timeline/DESIGN.md

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.