# Design Language for luminary.dev ## Aesthetics and Tone luminary.dev is a chronicle of people who became light — the engineers, teachers, and quiet pioneers whose ideas illuminated the ones who came after. The visual identity revives **Frutiger Aero**: that brief, optimistic moment of early-2000s digital design when interfaces dreamed of sunlight through glass, dew on leaves, and the clean promise that technology could be *bright*. But here it is stripped of clutter and rendered with restraint — a **minimal** tone, generous emptiness, no chrome bezels screaming for attention. Think of a single drop of water suspended over a frosted-glass slab, catching an electric-cyan rim of light. Think of an aero gradient sky — that signature lower-third bloom of bottle-green into sky-blue — but used sparingly, as a horizon rather than a wallpaper. The mood is **futuristic-cutting-edge** crossed with a faint, almost wistful warmth: the feeling of finding a perfectly preserved 2007 OS desktop and realizing how *hopeful* it was. Surfaces are glossy but quiet. Light behaves like it's underwater — soft caustics, gentle refraction, lens bloom kept to a whisper. Every luminary in the timeline is a "light source" — and the page slowly fills with their accumulated glow as you descend. Reference points: the original Windows Aero "bliss" optimism, Apple Aqua's water-droplet buttons reimagined with neon edges, macro photography of leaves with backlit veins, the bottle-green-to-cyan gradient of a Frutiger Aero wallpaper, and the calm of a botanical greenhouse at dawn. ## Layout Motifs and Structure **Primary layout: timeline-vertical** — a single luminous spine running down the center-left of the viewport, from which every figure branches. The page is one continuous descent through time. A glowing vertical line (the "lumen-rail") anchors the left third of the screen — 2px wide, neon-cyan core with a soft cyan-white bloom, faintly animated as a slow traveling pulse of light moving downward, like current through a fiber. Each luminary is a **node** on this rail: a small glossy water-droplet bead (the Aqua "gel" treatment, but with a neon-electric rim-light instead of blue). When a node scrolls into view, its bead swells slightly, emits a brief caustic shimmer, and a content panel slides out to the right. Content panels are **frosted-glass slabs** (the Aero glass: blurred translucency, a thin bright top edge, rounded 14px corners) — but never stacked into a grid. They alternate slightly in horizontal offset and width to keep the descent organic, like leaves growing at staggered nodes along a stem. Generous vertical spacing between nodes (min 60vh) — the timeline *breathes*, and the emptiness between figures matters as much as the figures. No traditional navbar. A small frosted "lens" in the top-right shows the current era as you scroll (e.g. "1843" → "1936" → "2011"), and clicking it expands a slim era-jump rail. The footer is the end of the rail: the light reaches the bottom of the page and blooms outward into a soft horizon gradient — the Frutiger Aero sky — with a single line of text resting on it. Spatial logic: vertical = time, horizontal offset = breathing rhythm, brightness = accumulated influence. The page literally gets brighter and more glow-saturated near the bottom, where the modern luminaries are. ## Typography and Palette **Typography** - **Section / Era Headings:** "Space Grotesk" (Google Fonts, 500 weight) — clean, slightly technical, with that early-2000s software-UI confidence. Used for era markers and luminary names. Letter-spacing: +0.02em. Era numerals rendered large (clamp(2rem, 5vw, 4rem)) and semi-translucent, sitting *behind* the glass panels like watermarks. - **Body / Biography Text:** "IBM Plex Mono" (Google Fonts, 400 weight) — a humane, readable monospace that nods to **tech-mono** without going full terminal. Line-height: 1.8. Used for all descriptive prose. The monospace rhythm makes each entry feel like a logged record — a changelog of human brilliance. - **Accent / Quotes & Labels:** "JetBrains Mono" (Google Fonts, 400 italic and 700) — for pull-quotes from each luminary and for tiny UI labels (era jump, node tooltips). Slightly tighter, more mechanical than Plex Mono, providing subtle contrast. - **Hero Title:** "Space Grotesk" 700, oversized (clamp(3rem, 9vw, 7rem)), with a soft cyan glow bleed and a thin glossy highlight sweeping across the letterforms once on load. **Palette** (neon-electric on a clean Frutiger-Aero base) - `#f4f9fb` — **Vapor White**: the primary background near the top; soft, faintly cool, like frosted glass in daylight. - `#e0f2f4` — **Glass Mist**: panel fill tint and section transitions; a barely-there aqua haze. - `#0af5d4` — **Lumen Cyan**: the signature neon — the rail core, node rim-lights, active glows. Electric, almost too bright, used like a laser line. - `#1be37b` — **Bottle Bloom Green**: the lower-third Frutiger gradient color; the "nature" half of the aero sky; secondary glow on leaf motifs. - `#0b2c2e` — **Deep Conifer**: the darkest tone; used for body text, the bottom-of-page horizon, and the inside of glass shadows. Never pure black — always a deep underwater green. - `#7df0ff` — **Sky Refraction**: pale electric blue for the top of gradients, caustic highlights, and hover states. - `#b8ffe9` — **Dewlight**: the faintest mint, for the bright top-edge of every glass panel and the inner glow of water droplets. Gradient signature: a vertical wash from `#7df0ff` at top → `#f4f9fb` mid → `#1be37b` at the very bottom edge — the canonical Frutiger Aero "sky into grass" bloom, but reserved for the page footer and the hero horizon line only. ## Imagery and Motifs **Core visual motifs** (all SVG / CSS — **vector-art** only, no photography): 1. **Backlit Leaf Veins** (`leaf-organic`): hand-drawn vector leaves with visible vein networks, used as decorative anchors beside major era breaks. The veins glow faintly Lumen Cyan, animating with a `path-draw-svg` reveal — light traveling outward from the stem to the leaf tip — as if the leaf is a circuit board grown from chlorophyll. This is the central metaphor: nature and signal as the same thing. A few leaves drift slowly down the right margin as ambient parallax. 2. **Aqua Water Droplets**: the timeline nodes themselves — pure CSS/SVG glossy beads with a radial highlight (top-left), a soft refractive shadow, and a neon rim. On hover, a droplet "ripples" outward (a thin expanding circle, `ripple` pattern) and the rim brightens. 3. **Frosted Glass Slabs**: the Aero panels — `backdrop-filter: blur(16px)`, 8–12% white fill, 1px Dewlight top border, subtle inner glow. The defining surface of the entire site. 4. **Animated Light Borders** (`border-animate`): every glass panel has a thin conic-gradient border that, when the panel enters the viewport, runs a single loop of light around its perimeter — Lumen Cyan traveling clockwise — then settles to a faint static glow. The active/focused panel keeps a slow continuous border loop. 5. **Caustics & Bokeh Bloom**: very soft, low-opacity SVG turbulence filter creating slow-moving underwater light caustics on the background, plus a handful of large blurred Sky Refraction circles drifting at different parallax depths — the gentle bokeh of a Frutiger Aero render. 6. **Era Watermark Numerals**: huge translucent year numbers (Space Grotesk) sitting behind the glass, partially refracted by the panel's blur — giving real depth between the number layer and the text layer. 7. **The Lumen Rail**: the vertical timeline line — a 2px gradient line with a `linear-gradient` traveling-pulse animation, brightest at the most recent figures. No icons from icon libraries. No stock photos. No 3D renders. Everything is drawn vector geometry or CSS-generated light. ## Prompts for Implementation **Narrative arc** — the page tells the story of light accumulating: 1. **Dawn (Hero).** Vapor White background, almost empty. The hero title "LUMINARY" fades in (Space Grotesk 700), a glossy highlight sweeps across it once, and a soft cyan glow blooms behind it. Below, in IBM Plex Mono: a single quiet line — "a record of the people who became light for the rest of us." At the bottom of the hero, the Frutiger Aero horizon gradient sits like a thin sunrise. A single water-droplet node and the top of the Lumen Rail appear, and the rail's pulse begins to travel downward — inviting the scroll. No buttons, no "Get Started." Just the rail. 2. **The Descent.** As the user scrolls, each luminary node animates in: the droplet bead swells (`spring` ease), emits a ripple, the frosted-glass panel slides out to the right with a `slide-reveal`, its light-border runs one loop (`border-animate`), the era watermark numeral fades in behind it, and the biography text reveals line by line in Plex Mono (`fade-reveal`, staggered). A backlit leaf with `path-draw-svg` veins appears beside every era change. Parallax: leaves and bokeh circles drift at varying depths; the Lumen Rail pulse stays synced to scroll velocity. 3. **Growing Brightness.** With each section, increase the ambient glow: more caustic movement, the rail core brighter, the background tint shifting subtly from Vapor White toward Glass Mist, more Dewlight inner-glows. By the modern era, panels are noticeably more luminous and the Bottle Bloom Green starts seeping into the gradients at the page edges. 4. **The Horizon (Footer).** The Lumen Rail reaches the bottom and *blooms* — the line spreads horizontally into the full Frutiger Aero sky gradient (`#7df0ff` → `#f4f9fb` → `#1be37b`). A single line of Plex Mono text rests on the horizon: "the light keeps going." A few last leaves settle. End. **Technical guidance:** - Use `IntersectionObserver` to trigger node animations, border loops, and leaf vein draws. - Glass: `backdrop-filter: blur(16px) saturate(140%)`, semi-transparent white fill, `border-top: 1px solid var(--dewlight)`, `box-shadow` with both an outer soft cyan glow and a subtle inset highlight. - Light borders: a `::before` pseudo-element with a `conic-gradient` mask running around the panel, animated via `@property --angle` rotation; one loop on entry, continuous on `.active`. - Caustics: an SVG `` with `feTurbulence` + `feDisplacementMap`, animated `baseFrequency`, applied at very low opacity over a faint gradient layer. - Water droplets: `radial-gradient` highlight + `filter: drop-shadow`; ripple is an absolutely-positioned expanding `border-radius:50%` element keyframed on hover. - Respect `prefers-reduced-motion`: keep the static glow, drop the traveling pulses and drifting leaves. - AVOID: CTA buttons, pricing tables, stat counters, feature grids, testimonial carousels, "Sign up" anything. This is a narrative chronicle, not a product page. - Bias toward full-viewport, scroll-driven storytelling; the timeline *is* the interface. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Frutiger Aero revival done with restraint.** This is the first design in the batch to use the early-2000s glossy-aero aesthetic (frutiger-aero is at 0% frequency) — and it deliberately strips the era's clutter, pairing the signature water-droplet/frosted-glass/bottle-green-sky language with minimal-tone emptiness and a monospace voice. Glossy *and* quiet — a combination nobody else attempts. 2. **The timeline as a literal light-accumulator.** The page doesn't just list figures chronologically — it physically brightens as you descend, the Lumen Rail glowing stronger near recent luminaries, the background tint and edge-gradients shifting. Brightness encodes accumulated influence. No other timeline-vertical design treats luminosity as a scroll-bound state variable. 3. **Leaf-veins-as-circuitry metaphor.** Vector leaves whose veins draw themselves with neon path animations — fusing the leaf-organic motif with the tech/circuit reading so they're the *same image*. Combined with vector-art-only imagery (0% frequency) and animated conic-gradient light borders (border-animate, underused at 9%). 4. **Underwater light physics as the unifying behavior.** Caustics, refraction through frosted glass, droplet highlights, lens bloom — light in this design behaves like it's submerged, which ties the whole aero palette together and is unlike the flat or hard-edged treatments elsewhere. **Chosen seed/style:** aesthetic: frutiger-aero, layout: timeline-vertical, typography: tech-mono, palette: neon-electric, patterns: border-animate, imagery: vector-art, motifs: leaf-organic, tone: minimal **Avoided patterns from frequency analysis:** skipped the saturated defaults — corporate (93%), centered (93%), counter-animate (92%), mysterious-moody (94%), mono-only/photography-heavy imagery, gradient+warm palettes. Leaned into the underused: frutiger-aero, vector-art, leaf-organic, neon-electric, tech-mono, border-animate, timeline-vertical.