# Design Language for luminary.dev ## Aesthetics and Tone `luminary.dev` is a **corrupted broadcast reel from a dead television station** — imagine a late-night arts programme from 1987 that was taped over, partially erased, and discovered on a VHS cassette in a charity shop three decades later. The tape is burgundy-stained at the edges. The signal dropout manifests as horizontal scan-line tears. The station ID card still flickers in on a 2-second loop before the programme resumes. This is not cyberpunk glitch. It is **nostalgic-retro glitch** — warm, amber-tinged, melancholic. The corruption is *age*, not attack. Every glitch effect feels like magnetic decay rather than digital assault: scan-line displacement, chroma drift (red channel shifts +3px right, blue −2px left), phosphor afterglow on bright type, and a slow VHS head-clog shimmer that runs vertically every 8–12 seconds. The mood is **the beauty inside entropy** — a platform for luminaries (the domain's premise) whose ideas survived despite degraded transmission. The site does not mourn the corruption; it celebrates that anything survived at all. Typography is monospaced precision set inside an environment that is deliberately, lovingly imprecise. **Tone keywords:** melancholic, warm, analogue, reverent, curious. Not cold, not aggressive, not clean. ## Layout Motifs and Structure The page is a **vertical broadcast reel** — one continuous scroll with no horizontal navigation, no cards, no pricing blocks. The structure is deliberately anti-grid: instead of columns, content is positioned along a **single editorial spine** that drifts 4–6% off-centre to the left, as if the tape was never threaded quite straight. **Section rhythm (editorial-flow pattern):** 1. **Station ID Ident** — full-viewport opening. A phosphor-green station ID card (text: `LMNR-1` and the domain) on deep burgundy, held for 1.8 seconds before dissolving into the page with a horizontal scan-tear transition. 2. **Manifesto Column** — body text in a `min(580px, 88vw)` column, left-edge anchored at `calc(50% − 340px)`. Text is monospaced, line-height 1.75, with subtle phosphor-glow on the first word of each paragraph. 3. **Glitch Interstitial** — a full-bleed `` layer, 160px tall, showing scan-line noise and a horizontal chroma smear. This appears between every major section as a "tape splice" — a non-decorative structural separator. 4. **Feature Reel** — a sequence of wide (78vw) horizontal panels, each stacked vertically like film frames, left-aligned with a 4-digit frame counter in the top-left corner (`0001`, `0002`…). Each panel contains a featured luminary or idea. 5. **Signal Fade** — at page bottom, content dissolves to static noise over 80px, then the burgundy field reasserts and shows a looping station sign-off message. **Spatial logic:** No gutters between sections — sections bleed into each other through the glitch interstitials. The only consistent spacing unit is `8px` (1 tape-line), used as a base increment for all margins and paddings. **Scrolling behaviour:** As the user scrolls, a thin phosphor-green vertical progress bar runs along the left edge of the viewport (not right — counter to convention). Its glow pulses gently at 0.3Hz. ## Typography and Palette **Type system (Google Fonts only):** - **Primary display & body — `Share Tech Mono`** at weights 400 (the only weight available). Used for all headings, body copy, captions, and the station ID. Share Tech Mono reads as broadcast-terminal type — it has the exact visual flavour of a late-80s character-generator used for TV lower-thirds. - Wordmark: `LUMINARY.DEV` at `clamp(28px, 6vw, 72px)`, letter-spacing `0.18em`, all-caps, colour `#F5E6C8` (aged phosphor white). - H1: `clamp(32px, 5.5vw, 64px)`, letter-spacing `0.08em`. - Body: `16px` / `28px` line-height, letter-spacing `0.02em`. - Frame counters: `11px`, `0.25em` tracking, colour `#7A3040` (dim burgundy). - **Secondary accent — `Staatliches`** (Google Fonts condensed display). Used exclusively for section titles set at 90° rotated, flush-left along the editorial spine. Staatliches is a condensed art-deco sans that contrasts sharply with the monospace grid — it reads as a **broadcast lower-third title card** rather than a heading. - Section titles: `clamp(14px, 2vw, 22px)`, `letter-spacing: 0.3em`, all-caps, rotated −90deg, positioned in the left margin gutter. **Palette — deep burgundy, aged transmission:** | Role | Name | Hex | |---|---|---| | Page background | Deep Burgundy | `#2B0A14` | | Surface / panels | Darkened Claret | `#3D1020` | | Body text | Aged Phosphor | `#F0DFC0` | | Accent / glitch | Phosphor Green | `#7FFF9E` | | Chroma aberration (red channel) | Tape Red | `#FF3B52` | | Chroma aberration (blue channel) | Signal Blue | `#3B8FFF` | | Dim label | Faded Rose | `#9A5060` | | Scan-line noise | Near-black | `#1A0009` | | Station ID card background | CRT Amber | `#FFBF47` | | Gradient mesh anchor 1 | Warm Mauve | `#7A3050` | | Gradient mesh anchor 2 | Deep Teal | `#0D3D4A` | **Gradient mesh:** The page background is not a flat `#2B0A14`. It is a CSS `conic-gradient` or SVG mesh composed of the two gradient-mesh anchors (`#7A3050` and `#0D3D4A`), blended with the deep burgundy base at very low opacity (0.15–0.25). This creates a subtle iridescent "magnetic tape surface" look without introducing modern glassmorphism. ## Imagery and Motifs **No photography** — the registry's photography rate is 90%; luminary.dev opts out entirely. All visual matter is generated or drawn. **Gradient mesh background (primary imagery):** An SVG `` or hand-crafted radial gradient cluster. Four gradient blobs anchored at screen corners and one central bloom, using the palette's warm mauve and deep teal, overlaid on the burgundy base at 18% opacity. The mesh is `position: fixed`, `z-index: 0`, `pointer-events: none`. It shifts very slowly (full cycle: 40 seconds) via a CSS `@keyframes` that translates each anchor point ±30px — barely perceptible, like heat shimmer. **Scan-line overlay (structural motif):** A `repeating-linear-gradient` of alternating `transparent` and `rgba(0,0,0,0.12)` at 2px intervals creates a persistent CRT scan-line texture across the entire viewport at `position: fixed, z-index: 3`. Opacity is 0.4 at rest, rising to 0.65 during glitch events. **Flowing-curves motif (decorative):** An SVG layer containing three sinusoidal wave forms — drawn as `` with `stroke` only, no fill. Stroke weight: 0.8px. Colours: `#7FFF9E` at 15% opacity (phosphor), `#FF3B52` at 10% opacity (tape red), `#3B8FFF` at 10% opacity (signal blue). The three waves are phase-offset by 120° and scroll at different rates (parallax: 0.3x, 0.5x, 0.7x relative to page scroll). They evoke oscilloscope traces from a broadcast monitoring rack — they are the signal that carries the content. **Frame counter badges:** Each feature-reel panel has a top-left `` formatted as `0001 / 0048` in the dim label colour. These are non-interactive decorative labels that evoke film-leader numbering. **VHS head-shimmer animation:** Every 8–12 seconds (randomised per session load), a `
` with `position: fixed; top: random(20%, 70%); height: 3px; width: 100%; background: linear-gradient(90deg, transparent, #F0DFC0 40%, transparent)` flashes at 60ms duration. This is the sole repeating animation; all others are scroll-triggered or one-shot. **Glitch text effect (headings only):** H1 elements have a CSS `::before` and `::after` pseudo-element clone offset by `(+3px, 0)` in tape-red and `(−2px, 0)` in signal-blue, with a `clip-path` that cycles every 4 seconds through 3 different horizontal slice positions. The clips are narrow (8–18px tall bands) and the animation is not looping — it fires, holds for 80ms, then rests for 3.92 seconds. ## Prompts for Implementation Build `luminary.dev` as **a single-page broadcast transmission** — one long scroll, no routing, no tabs, no sticky nav. The page is experienced like watching a recovered archive tape: you cannot skip ahead, you must scroll through. **Opening sequence (must feel like a television ident, not a hero section):** - Viewport is filled with `#2B0A14` for 200ms on load. - A station ID card fades in over 400ms: centred `
`, 320×180px, background `#FFBF47`, border `2px solid #F0DFC0`, containing `LMNR-1` in Share Tech Mono at 28px and the domain at 14px below. - After 1.8s hold, the card triggers a horizontal scan-tear exit: 6 `clip-path` frames over 300ms, each slicing the card into horizontal bands and offsetting them ±5–20px randomly, until the card is gone. - The page content (already rendered below) is now scrollable. **Fade-reveal pattern (every section):** - All section content starts at `opacity: 0; transform: translateY(12px)`. - As the section's top edge crosses `80vh`, it transitions to `opacity: 1; transform: translateY(0)` over `600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`. - The transition is staggered per-paragraph: each `

` delays by `index × 80ms`. - This is the **fade-reveal** pattern from the seed — it should feel like a signal coming into focus, not a bounce-in. **Glitch interstitials (between every major section):** - A `` element, 100vw × 160px, rendered with noise using `Math.random()` per-pixel at 50% density, then overlaid with 2 horizontal scan-tear lines at random y-positions within the canvas. - Canvas background: `#1A0009`. Noise pixels are 1×1 and coloured from a weighted distribution: 40% `#3D1020`, 30% `#7A3050`, 20% `#F0DFC0`, 10% `#7FFF9E`. - Canvas re-renders at 8fps (not 60fps) to feel like tape dropout, not digital animation. **Flowing-curves parallax:** - Three SVG sinusoidal paths, each 120vw wide (overflowing viewport by 10vw each side), `position: absolute` within a `position: relative` section wrapper. - On scroll, use `IntersectionObserver` to activate and `requestAnimationFrame` to update `translateX` based on `scrollY * multiplier` where multipliers are 0.08, 0.14, 0.22 for the three waves. - Do NOT use `scroll` event listener directly — use rAF throttling. **Typography implementation details:** - Load `Share Tech Mono` and `Staatliches` via Google Fonts `` with `display=swap`. - Apply `font-feature-settings: "tnum" 1` to all Share Tech Mono instances to force tabular numerals — essential for the frame counters to align correctly. - Section labels (Staatliches, rotated): use `writing-mode: vertical-rl; transform: rotate(180deg)` for proper baseline alignment, placed in a `position: absolute; left: -52px` container relative to the section. **AVOID in implementation:** - No call-to-action buttons with arrow icons - No pricing tables or plan comparisons - No testimonial carousels - No sticky navigation bar - No card grids - No hero section with headline + subheadline + button triple ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: glitch | layout: editorial-flow | typography: tech-mono | palette: deep-burgundy | patterns: fade-reveal | imagery: gradient-mesh | motifs: flowing-curves | tone: nostalgic-retro **Differentiators from the existing corpus:** 1. **Glitch as age, not attack.** The corpus has 11% glitch usage but all instances treated glitch as cyberpunk aggression (chromatic aberration on hover, rapid flicker). `luminary.dev` reframes glitch as *magnetic decay* — warm, amber-tinted, melancholic. The VHS head-shimmer and scan-line palette (burgundy + phosphor green + aged white) is not present in any reviewed design. 2. **Television station ident as opening ritual.** No design in the corpus uses a broadcast ident pattern as the entry point. The LMNR-1 card, held for 1.8 seconds before a scan-tear exit, is a structural gesture that sets temporal expectation — the site will be paced like a broadcast, not a page. 3. **Flowing-curves as oscilloscope traces.** The `motifs: flowing-curves` seed is interpreted as oscilloscope waveforms from a broadcast signal chain — three phase-offset sine waves at near-zero opacity in the chroma aberration colours. This directly ties the decorative motif to the site's conceptual premise (signal, transmission, luminaries) rather than treating curves as abstract decoration. 4. **Deep burgundy as a dominant background hue.** The frequency data shows dark-mode at 14%, but burgundy as a base colour (rather than near-black or navy) does not appear in reviewed designs. The `#2B0A14` base gives warmth to the darkness — it reads as VHS plastic and magnetic oxide, not as developer tooling or crypto dashboard. 5. **Avoided overused patterns:** hand-drawn (61% in corpus — not used), editorial grid layout (50% — replaced with off-centre editorial spine), photography (90% — replaced with gradient mesh + scan-line overlay + SVG curves), botanical motifs (25% — not used).