# Design Language for musical.quest ## Aesthetics and Tone musical.quest is a **gilded score room** — an art-deco instrument of discovery where the visual language of 1920s concert halls collides with the precision of a modern music intelligence dashboard. The mood is **professional-opulent**: think Chrysler Building meets Spotify's data layer, executed in powder-rose and aged champagne with 24-karat rule lines. Every surface carries the hallmark of art-deco restraint: symmetry is deliberate, ornament is earned, and negative space is treated as a held fermata between phrases. The site does not shout music — it *conducts* it. Visitors feel like they are entering a private listening salon where the walls are panelled in polished rosewood, the sconces cast warm blush light, and every typographic choice has been set by a master compositor who happened to understand streaming metadata. The tone is **professional but magnetic** — no stiff corporate grid, no neon chaos. Musical.quest occupies the space between a conservatory programme and a modern discovery engine. It whispers authority while the content pulls visitors forward like a well-placed dominant seventh chord demanding resolution. Inspiration sources: the sunburst marquetry of the Rockefeller Center lobby; Erté's ballet poster typography; the dashboard precision of a Neve recording console; the ink wash of a handwritten orchestral score. ## Layout Motifs and Structure **Radial dashboard composition** — the primary structural metaphor is a conductor's podium viewed from above. Content panels radiate from a central spine, arranged in a strict art-deco grid of **golden-ratio columns** (1 : 1.618 : 1) with heavyweight rule lines (`2px` champagne-gold `#C9A96E`) delineating every zone. **Structural logic:** - **Masthead band** — a full-width `120px` horizontal band at top, panelled like a theatre proscenium arch. The logotype sits in the exact centre, flanked symmetrically by two decorative chevron rule sequences in SVG. This band never scrolls. - **Tri-column dashboard** — below the masthead, three columns in golden-ratio proportion (`22vw / 56vw / 22vw`). Left and right columns are narrow instrument panels (metadata, filters, waveform motifs). The central column is the primary stage — wide, open, breathable. - **Panel cards** — each content unit is a **sharp-edged card** with `1px` rule border in `#C9A96E`, `0` border-radius (art-deco never rounds its corners), and a `4px` top accent bar in the card's category colour. Cards sit on a `4px` grid. Gutters are exactly `16px`. - **Section dividers** — horizontal rules composed of three lines: `1px` thin / `4px` thick / `1px` thin, with `8px` gap between, in champagne-gold. Used between every major section. - **Magnetic scroll** — panels snap to a grid as the user scrolls. The central column items have a subtle `translateY` magnetic pull: as a card enters the viewport it accelerates slightly then settles with a brief overshoot (spring easing, `stiffness 280, damping 24`). This gives the feeling of musical notes finding their position on a staff. - **Footer** — a mirrored proscenium band matching the masthead, with a sunburst SVG motif centered, flanked by navigation links. **Spatial economy:** 18% of viewport is rule/border/ornament; 28% is whitespace; 54% is content. Density is intentional — a real dashboard has instruments, not empty glass. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Logotype:** `Cormorant` — the most art-deco-adjacent Google Font, with high-contrast hairline-to-stroke modulation and elegant swash alternates. Set the logotype at `clamp(2.8rem, 5vw, 4.8rem)`, weight 600, letter-spacing `+0.12em`, all-caps. Section headers at `clamp(1.6rem, 2.8vw, 2.8rem)`, weight 500, italic. Cormorant's tall x-height and dramatic contrast read as engraved metal on screen. - **Dashboard / UI labels:** `DM Sans` — a geometric humanist grotesque with the functional clarity needed for metadata, filter labels, and panel heads. Variable font (`wght` axis 100→700). Used at 11–14px for labels, 15–18px for secondary copy, weight 400–500. Pairs with Cormorant the way a brass instrument pairs with strings. - **Data / Numbers:** `Barlow Condensed` — for play-counts, BPM readouts, track numbers, and timestamps. Weight 600, condensed width, all-caps. Creates the look of a mixing board's LED display. - **Body / Descriptions:** `DM Sans` at 16px / 26px line-height, weight 400. Comfortable reading measure of 65–70 characters. **Variable fluid sizing:** All font sizes use `clamp()` with three anchors — minimum (mobile), preferred (viewport-relative), maximum (desktop cap). This ensures the layout breathes proportionally at every breakpoint. **Palette — Pastel Art-Deco:** | Role | Name | Hex | |------|------|-----| | Page background | Champagne Vellum | `#FAF6EE` | | Primary surface | Ivory Panel | `#F5EFE3` | | Card surface | Blush Linen | `#F0E8DC` | | Rule / ornament | Aged Gold | `#C9A96E` | | Rule accent | Warm Brass | `#A8844A` | | Primary text | Ebony Ink | `#1C1410` | | Secondary text | Rosewood | `#6B4A3A` | | Accent — discovery | Dusty Rose | `#D4A5A0` | | Accent — collection | Sage Mist | `#A8B5A0` | | Accent — trending | Lavender Haze | `#B8AECA` | | Accent — live | Blush Copper | `#C8876E` | | Highlight / hover | Gilded Cream | `#EDD898` | The palette is deliberately **pastel but not soft** — every colour has enough grey in it to read as sophisticated rather than sweet. On the ivory background, the gold rules and blush accents create a warm luminosity reminiscent of old theatre programmes printed on cream stock. ## Imagery and Motifs **No photography. Minimal, purposeful SVG only.** **Recurring motifs (all SVG, inline, animatable):** 1. **The Sunburst Crown** — an art-deco starburst of 24 radiating lines, alternating long (`40px`) and short (`20px`), drawn in `#C9A96E` at `1.5px` stroke weight. Used as the site's favicon, the footer centrepiece, and behind the logotype in the masthead at 8% opacity. This is the site's visual signature. 2. **Chevron Rule Sequences** — sets of three nested right-angle chevrons (`>`) in increasing stroke weights (`0.8px / 1.4px / 2px`), used as decorative flanking elements beside section headers and as panel corner ornaments. Drawn at 12px height, in aged gold. 3. **Staff Lines** — five horizontal hairlines (`0.5px`, `#C9A96E` at 30% opacity) spaced exactly as a musical staff, used as a subtle background texture on the left and right instrument panels. Faint enough to feel like watermarked paper rather than a graphic element. 4. **Waveform Notch** — a single-cycle stylised waveform, art-deco-ified: instead of a smooth sine, it has angular peaks like a sawtooth but with the tips flattened into a brief plateau (think a 1920s radio tower silhouette). Used at 32px height as a category-divider icon. Animated on hover: the notches rise and fall with a staggered delay. 5. **Diamond Bullet** — a filled rotated square (`◆`) at 8px, in aged gold. Used as list bullets and as the separator between metadata items (Artist `◆` Year `◆` Genre). 6. **Panel Corner Brackets** — instead of a full border, each card uses only the four corners: two perpendicular lines meeting at each corner, `12px` in each direction, `2px` stroke in aged gold. The remaining border is implied by the panel's background contrast. This is a classic art-deco framing technique. **Animation philosophy:** Motion is musical — it has tempo, attack, and decay. Hover states respond in `80ms` (attack). Magnetic scroll uses `spring(stiffness: 280, damping: 24)`. The sunburst crown rotates `15°` over `4s` on a `ease-in-out` loop — barely perceptible, like the sweep hand of a metronome. ## Prompts for Implementation Build musical.quest as a **living score room** — a single immersive page where the dashboard reads like a musical programme note and every panel is an act in a performance. **Structural implementation blueprint:** **1. Proscenium Masthead (`
`)** Full-width `120px` fixed band. Background `#F5EFE3`. Bottom border: the triple rule (`1px #C9A96E / 4px #A8844A / 1px #C9A96E`) with `4px` gap. Centred logotype in Cormorant 600 italic caps, `clamp(2.8rem, 4vw, 4.2rem)`. Flanked left and right by two Chevron Rule SVGs (three nested `>` symbols, each `24px` tall, fading left-to-right in opacity `1 → 0.4 → 0.15`). On scroll past `80px`, masthead compresses to `64px` with a `200ms ease` transition. **2. Tri-Column Dashboard (`
`)** CSS Grid: `22vw 1fr 22vw`, max total `1440px`, centred. Column gap `16px`. The two side columns have `position: sticky; top: 120px` so they remain visible as the central column scrolls. Side columns background `#F0E8DC`. **3. Left Instrument Panel** Contains: current key signature indicator (decorative, static), a genre filter list using diamond bullets, a BPM range slider styled as a mixing-board fader (custom CSS, no library), and staff-line background texture. Font: DM Sans 11px labels, Barlow Condensed 600 for values. **4. Central Stage (scrollable)** Sequence of **discovery cards**, each `100%` column width with corner-bracket borders. Cards have a `4px` top accent bar coloured by category (rose/sage/lavender/copper). Card layout: Cormorant 500 italic heading at top-left, DM Sans body below, Barlow Condensed metadata row at bottom (`◆`-separated). On scroll entry: `translateY(24px) → 0` with spring easing and a `0.5px → 0` blur transition (subtle, like sound coming into focus). **5. Right Instrument Panel** Contains: trending waveform notch icons (animated on hover), a mini sunburst at `80px` diameter that rotates slowly, a curated collections list. Same sticky behaviour as left panel. **6. Section Transitions** Between card groups: the triple-rule divider, full column width. A small Cormorant italic section label sits centred on the rule, background-clipped to `#FAF6EE` to break the line. **7. Magnetic Scroll Behaviour (JS)** Use `IntersectionObserver` with `threshold: [0, 0.25, 0.5, 0.75, 1]`. On each threshold crossing, apply a spring-physics `translateY` to entering cards via CSS custom properties. No library — implement a simple spring integration loop with `requestAnimationFrame`. Cards overshoot by `4–6px` then settle. This is the "magnetic" quality: content is pulled to its resting position. **8. Hover Interactions** Card hover: `background #EDD898` fades in at 80ms, corner brackets shift `2px` outward (expanding), box-shadow `0 4px 16px rgba(201,169,110,0.18)`. Waveform notch icons animate on hover: each notch bar staggers with `40ms` delay, rising `6px` and returning. Cursor changes to a custom SVG cursor — a small baton (conductor's wand), 24×24px. **9. Footer Proscenium** Mirrors the masthead. Contains the full Sunburst Crown SVG at `120px` diameter, centred. Nav links in DM Sans 12px, letter-spaced `+0.15em`, all-caps, in Rosewood `#6B4A3A`. Above the footer: the triple-rule divider. **Avoid:** - Rounded corners anywhere (`border-radius: 0` is enforced globally for cards/panels) - Gradient backgrounds on content areas (gradients reserved only for the sunburst SVG radial) - Any modal/overlay CTAs - Pricing tables or stat-grids - Photography or raster imagery - Smooth scroll that fights the magnetic snap mechanic ## Uniqueness Notes 1. **Magnetic snap with spring overshoot** — no other design in the registry combines art-deco rigid geometry with physics-based spring scroll. The contrast between the severe `border-radius: 0` panels and the organic spring motion creates a tension that feels like a plucked string: taut structure, resonant motion. 2. **Triple-rule divider as musical notation** — using the three-line rule (thin/thick/thin) as both a decorative art-deco element *and* a visual metaphor for the ledger lines of a musical staff is unique to this design. It operates on two referential levels simultaneously. 3. **Custom conductor baton cursor** — replacing the default pointer with a 24px SVG baton on hover states reinforces the musical metaphor at the interaction layer. No other design in the registry uses a domain-specific custom cursor. 4. **Sticky instrument panels flanking scrollable central stage** — the tri-column layout with sticky side panels mimics the experience of sitting at a recording console: the fixed controls (faders, meters) frame a moving central tape. This spatial metaphor is original to this design. 5. **Pastel palette with zero sweetness** — the palette deliberately uses high-grey pastels (`#D4A5A0`, `#A8B5A0`, `#B8AECA`) that read as aged theatre pigments rather than millennial pink. The combination of these with aged gold rules and ivory linen backgrounds is not present in any current registry design. 6. **Seed documented:** `aesthetic: art-deco, layout: dashboard, typography: variable-fluid, palette: pastel, patterns: magnetic, imagery: minimal, motifs: sharp-angles, tone: professional` 7. **Avoided overused patterns from frequency analysis:** `holographic`, `vaporwave`, `brutalist`, `mid-century` (all at 6% or above in registry — explicitly avoided). Instead: art-deco and dashboard patterns are at low frequency, and `baskerville-refined` / `elegant-serif` typography variants (both at 2%) informed the Cormorant choice.