# Design Language for luv.st ## Aesthetics and Tone luv.st is a **retro 1970s scholarly chartroom rebound in gold and obsidian** -- imagine the chart-room of a 1970s ocean-going research vessel, refit by Yves Saint Laurent: gilded fume hoods, lacquered black bulkheads, vintage data charts pinned with brass tacks, and a hand-lettered "luv.st" cartouche stamped in gold leaf on every chart. The aesthetic merges retro-academic precision (charts, isobar maps, navigation logs) with gold-on-black luxury -- the opulence of a Conrad-era ship's library. Tone is *luxurious* in a deeply old-money way: never flashy, deeply burnished, knowingly elegant. The brand "luv.st" reframes itself as a luxury scholarship of love -- a vessel's logbook of romantic observations, set in classic serif typography and supported by retro data visualizations (mostly Edward Tufte-esque graphs of "sentiment over time"). The mood is *ship's library after midnight* -- mahogany, brass, leather chairs, an open ledger in candlelight. Inspirational anchors: the chart-rooms of the QE2, Bauer Studio engravings, gold-leaf Penguin Classics endpapers, Tufte's "Visual Explanations," the lacquered black-and-gold of 1970s Cartier window displays, and the printed scholarly journals of the Royal Geographical Society. ## Layout Motifs and Structure A **ma-negative-space** composition that uses generous Japanese-style ma (negative space) to make each scholarly observation feel like a precious specimen on a velvet pad. Everything is given lavish breathing room. Underline-draw motion is the signature: as text enters, gold underlines draw themselves beneath, like a scholar's gilded annotation. **Structural anatomy:** - **Cover plate (full-width, 100vh):** A single oversized cartouche set in serif-classic gold typography reading "luv.st · MMXXVI". Below it: an intricate hand-engraved compass rose in gold (rendered as SVG). Around the compass: negative space -- vast obsidian field. - **Chapter "logs" (vertical, 880px max width, centered, lavish spacing):** 7-9 scholarly entries, each composed of (top): a brass-tacked tab label ("Log IV · 0312° · Salt Wind"), (middle): a scholarly paragraph in 18px Cormorant Garamond on cream-tinted parchment surface, (below): a retro data-viz chart (sentiment line graph, isobar map, sparkline) annotated with hand-lettered captions. - **Inter-log negative space:** Each log is separated by *vast* negative space -- typically 240-360px of empty obsidian -- punctuated only by a thin gold rule and a tiny brass-tack ornament. - **Chart insets:** Each retro chart is set on a subtle aged-parchment rectangle with a gold inner border, sized 480x320px or 600x240px depending on chart type. - **Closing plate:** A single italic Cormorant Garamond line "Fin. Eight bells." centered, with a small gilt anchor SVG below it. Spatial rhythm: profoundly spacious. Each log entry occupies ~1.3 viewport-heights of scroll. The ma is *most* of the layout. ## Typography and Palette **Fonts (all Google Fonts):** - **Primary serif (serif-classic):** "Cormorant Garamond" 400/500/400i -- the centerpiece. Used at 17-19px for body, 1.78 line-height. The most classical of Garamonds, with delicate strokes ideal for the scholarly mood. - **Display:** "Cormorant Garamond" 500 italic for the wordmark at clamp(72px, 10vw, 168px), letter-spacing 0.005em. The italic gives the cover plate a calligraphic quality. - **Tab labels (brass-tacked log indices):** "Cormorant Garamond" 500 small-caps at 13-15px, letter-spacing 0.18em -- "Log IV · 0312° · Salt Wind". - **Chart captions / annotations:** "Cormorant Garamond" 400i at 10-12px -- the hand-engraved feel. - **Numerals:** "Cormorant Garamond" 500 with old-style figures. **Palette (gold-black-luxury):** - `#0A0805` -- Obsidian Black (primary background, the lacquered bulkhead) - `#161310` -- Deep Mahogany (panel fills, parchment-surrounding regions) - `#D9B86E` -- Aged Gold (primary type accents, rules, underlines) - `#F0DCA3` -- Polished Brass (highlights, hover state, active gold) - `#5C401F` -- Burnt Brass (chart strokes, deep accents, brass tacks) - `#EFE3C6` -- Parchment Cream (chart background, log-paper tint) - `#1F1A12` -- Inkwell Edge (vignette, panel edges) Lighting strategy: the entire field is Obsidian Black. The gold elements *glow* via a subtle box-shadow halo (Aged Gold at 0.2 alpha, 24px blur) -- producing a "lit by candlelight" effect across all gold marks. ## Imagery and Motifs **Core visual motifs:** - **Data-viz charts (the centerpiece imagery):** Each log entry features one retro scholarly chart -- a sentiment-over-time line graph, an isobar map of "emotional pressure," a sparkline cluster, or a star-chart-style scatter. All charts are SVG, hand-drawn-feeling, with thin Burnt Brass strokes on Parchment Cream backgrounds, annotated with tiny italic captions. - **Book-scholarly motif (motif):** Closed books, open ledgers, ink pots, sextants, compass roses, and brass dividers rendered as small gold-stroke SVG ornaments distributed sparingly through the composition. Each chapter has a small ornament near its title. - **Underline-draw motion:** Whenever text enters viewport, a gold underline draws itself beneath the text from left to right -- the signature motion pattern. - **Brass tacks:** Tiny SVG circle ornaments (gold gradient, ~12px diameter) used as tab pin-points and decorative anchors. They have a subtle gleam (highlight on the upper-left edge). - **Compass-rose:** A single elaborate hand-drawn compass-rose SVG appears on the cover plate -- 24 directional rays, gold strokes, with the cardinal letters (N S E W) in tiny Cormorant Garamond italic. **Decorative patterns:** - A faint gold-thread pattern (SVG: 0.5px gold lines at 60-degree angles, 5% opacity) on the Obsidian Black background -- like the under-pattern of brocaded velvet. - Chart paper-textures: Parchment Cream backgrounds have subtle SVG turbulence (5% opacity) for aged feel. ## Prompts for Implementation **Open with the chart-room being lit.** First 2200ms: the viewport begins in pitch Obsidian Black. After 600ms, an arc of gold light expands from the center, illuminating the compass-rose SVG which draws itself (stroke-dashoffset, 1600ms with progressive ease). When the compass completes, the "luv.st · MMXXVI" wordmark fades in above (opacity 0 -> 1, 800ms), and a gold underline draws beneath it left-to-right (`stroke-dashoffset`, 1200ms ease-out). **Underline-draw pattern (featured):** This is the primary motion vocabulary. - Every heading, every paragraph, every chart title has a gold underline (0.5-1px Aged Gold) that draws itself on scroll-in. - Underline durations: ~480ms for short labels, ~1200ms for paragraph-width underlines. - Use SVG `stroke-dashoffset` from `length` to `0`, triggered via IntersectionObserver. - Each underline has a slight overshoot (4px) past its target and settles back -- a quiet *scholarly finesse* gesture. - After completion, underlines have a faint *gleam* effect: a brighter Polished Brass section travels along the underline once (left-to-right, 800ms) before settling. **Chart pen-drawing animation:** On entry, each retro chart "draws itself" -- the chart's axes appear first (200ms each), then data lines stroke from left to right (1200ms cubic-bezier ease), then annotation captions fade in one by one (staggered 150ms). Brass-tack data-point markers pop into place last with a tiny scale-bounce (0 -> 1.2 -> 1 over 240ms). **Ma-respecting hover:** When the user hovers a log entry, the negative space *expands* slightly -- adjacent logs translate ±16px outward (subtle), giving the hovered log more breathing room. The hovered log's gold accents brighten to Polished Brass. **Compass rose ambient rotation:** The compass-rose SVG on the cover plate rotates extremely slowly (0.4 degrees per second, linear, infinite). On scroll past, it accelerates briefly (up to 8 deg/s) then decelerates. **Storytelling beats (luxurious-scholarly, no CTAs, no pricing, no marketing):** 1. Chart-room lighting intro with compass-rose. 2. Cover plate: "luv.st · MMXXVI" with subtitle. 3. Log entries I through IX, each one a scholarly observation + retro data chart. 4. Vast negative space between logs. 5. Closing plate: "Fin. Eight bells." **Anti-patterns to avoid:** No CTAs, no signup, no pricing, no testimonials, no stat-grids-as-decoration, no feature trios. The site is a ship's logbook, contemplative and complete. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Retro aesthetic (8%) + ma-negative-space layout (4%) -- generous spacing not seen elsewhere:** Retro designs are usually dense (poster-style); this one applies ma (Japanese negative space) to retro academia, producing an unusually contemplative retro register. 2. **Underline-draw pattern (6%) as the sole text-entrance motion vocabulary:** Most uses of underline-draw are decorative one-offs; here it's the universal entrance for every text element -- a unified scholarly annotation gesture. 3. **Data-viz imagery (4%) treated as scholarly chart specimens rather than dashboards:** The retro charts are hand-drawn-feeling SVG sketches, not data dashboards -- closer to vintage scientific journal illustrations. 4. **Book-scholarly motif (2%) with gold-black-luxury palette (2%):** Both individually rare; combined they produce a luxury-academic aesthetic distinct from the dark-academia and corporate registers elsewhere in the collection. 5. **Serif-classic typography (5%) at large display sizes with classical proportions:** Most large-display typography in the collection uses sans or display-novelty faces; treating Cormorant Garamond italic as the *hero display* face is unusual and gives the site genuine antique elegance. **Chosen seed/style:** aesthetic=retro, layout=ma-negative-space, typography=serif-classic, palette=gold-black-luxury, patterns=underline-draw, imagery=data-viz, motifs=book-scholarly, tone=luxurious. **Avoided overused patterns:** Avoided parallax (95%), centered/card-grid baseline (95%/91%), mono typography (81%), and the default mysterious-moody tone (71%) for luxurious-scholarly stillness.