# Design Language for luminant.dev ## Aesthetics and Tone luminant.dev is the field journal of a quiet observatory devoted to a single subject: **light as engineering material** — the photon as both signal and ornament. The site reads like the interior of a 1930s planetarium that has been rewired by a modern instrumentation lab. Brass armatures and chamfered geometry from the Art Deco era hold panes of optical glass; behind those panes drift slow ribbons of aurora, the way oscilloscope traces drift across phosphor. Nothing about it is hurried, nothing is salesy. It is **authoritative** in the manner of a research monograph that knows it is right and feels no need to shout — measured serif-less prose, exact numbers, ruled margins, captions set like museum placards. The emotional register is *cold brilliance warmed by craft*: deep navy that reads almost black until light grazes it, then reveals a metallic undertone — pewter, gunmetal, the green-gold sheen of a telescope mirror coating. Aurora light is never a rainbow smear; it is two or three disciplined hues (a teal-cyan, a faint magenta edge, a sodium-amber rim) that breathe in and out of the navy like the real thing seen from a dark sky site. The whole experience should feel like reading by the glow of an instrument panel in a darkened room — every element legible, every accent earning its luminescence. This is decidedly **not** corporate-gradient-SaaS, not mysterious-moody fog, not neon cyberpunk. It is the *opposite* of those: precise, archival, dimly lit but never murky, ornamental but never frivolous. ## Layout Motifs and Structure **Primary layout: timeline-vertical, threaded as a single luminous spine.** The page is one continuous vertical descent — a *light-line*: a 2px vertical rule running down the left third of the viewport (desktop) or centered (mobile), rendered as a faint navy hairline that becomes a bright filament wherever the reader currently is. Along this spine sit **station nodes** — small chamfered-octagon markers (an Art Deco facet shape) that mark each major chapter. As the reader scrolls, the segment of spine between the last passed node and the next-upcoming node *charges* with aurora gradient, like current entering a wire; nodes pulse softly once as the spine reaches them. This is the literal backbone of the site's structure and its primary navigation affordance. Each chapter is a **full-viewport plate** (min-height: 100vh) arranged as an asymmetric two-track composition: - **Left track (≈32vw):** the spine, the station node, a vertically-set chapter index ("01 — ", "02 — ") in mono, and a short museum-placard caption rotated 0deg (never sideways — legibility first), set small in pewter. - **Right track (≈58vw, offset with generous gutter):** the chapter content — a large geometric-sans headline, a single column of measured prose (max 62ch), and at most one diagram or motif element. Horizontal ruled hairlines (navy at 14% opacity) bracket the top and bottom of each plate's content block, like the frame lines on an engineering drawing. Negative space is the dominant material — at least 40% of every plate is empty navy, so the eye rests and the aurora has room to breathe. The opening plate is the exception: a full-bleed dark sky in which the title resolves out of drifting aurora before the spine "ignites" downward from the title into the rest of the document. The closing plate releases the spine into a soft dispersing glow — a quiet exhale, not a call to action. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Chapter Headlines:** "Sora" (weight 600/700) — a geometric sans with crisp circular bowls and a slightly architectural feel that echoes Deco lettering without costuming. Used at clamp(2.4rem, 5.5vw, 5rem). Letter-spacing: -0.015em at large sizes; 0.18em and uppercase for short eyebrow labels. Sora's even, drawn-with-a-compass quality is the typographic anchor of the "light as engineering" idea. - **Secondary Headings / Pull Quotes:** "Marcellus" (weight 400) — a refined classical capitalis with the elongated, elegant proportions you see carved on Deco theater facades. Used sparingly, uppercase, at clamp(1.4rem, 2.4vw, 2.2rem), letter-spacing 0.12em, in the metallic gold accent. It provides the "brass armature" counterpoint to Sora's optical-glass coolness. - **Body / Prose:** "Inter" (weight 400, 500 for emphasis) — quiet, high-legibility, optimized for screen. Size clamp(1.05rem, 1.15vw, 1.2rem), line-height 1.7, color soft pewter-white on navy. Body never goes pure white — always the slightly cooled #DCE3EE — to keep the "instrument panel" mood. - **Captions / Indices / Diagram Labels:** "Space Mono" (weight 400) — monospaced, faintly typewriter-mechanical, for chapter numbers, placard captions, axis labels, and figure callouts. Used at 0.78rem, letter-spacing 0.04em, color pewter (#8A93A6), often uppercase. **Palette:** - `#070B16` — **Deep Observatory Navy** (primary background; reads near-black, the dark-sky base) - `#0E1530` — **Instrument Navy** (raised panels, plate content blocks, slightly lifted from base) - `#1B2647` — **Armature Slate** (hairlines at full strength, borders, the resting state of the spine) - `#C9B27A` — **Telescope Brass** (Art Deco metallic accent — rules, octagon node strokes, Marcellus capitals) - `#7FE7D6` — **Aurora Teal** (primary aurora hue; the "charged" spine, link underlines, active node glow) - `#C58BD6` — **Aurora Magenta-Edge** (secondary aurora hue; appears only at gradient edges, never solid) - `#E8C27A` — **Sodium Amber Rim** (tertiary aurora hue; warm rim light at the bottom of aurora ribbons) - `#DCE3EE` — **Pewter White** (primary body text — cooled, never pure white) - `#8A93A6` — **Pewter Grey** (captions, mono labels, secondary text) The aurora is always built as a multi-stop gradient `Aurora Teal → Aurora Magenta-Edge → Sodium Amber Rim` at low opacity (8–24%) blended over navy, with the brass used only as hard, thin metallic lines. Gold and aurora never overlap — brass is structure, aurora is the light passing through it. ## Imagery and Motifs **Core visual motifs (all CSS/SVG/canvas — zero stock photography):** 1. **The Light-Line Spine:** described above — a vertical filament that charges with aurora as you read. Implemented as an SVG `` for the resting rule plus a clipped gradient `` whose height is driven by scroll position; nodes are chamfered-octagon `` elements with a 1.5px brass stroke and no fill. 2. **Chamfered Octagon (the Deco facet):** the site's signature shape. It is the node marker, the bullet for lists, the frame of the lone diagram per plate, and the favicon. Always stroke-only in brass, sometimes with a second concentric octagon offset 4px for a "double-frame" engraved feel. 3. **Aurora Ribbons:** 2–3 soft, slow-drifting bands of the aurora gradient, ~30vh tall, that occupy the empty navy regions of selected plates. Rendered as blurred (`filter: blur(40px)`) gradient `
`s or a low-frame-rate canvas, drifting horizontally at ~6–10s per cycle, opacity 0.10–0.20. They must feel *meteorological* — slow, irregular, never looping obviously. 4. **Photon Trace Diagrams:** one per plate at most — minimal SVG line drawings in the spirit of an optics-bench schematic: a beam path bending through a chamfered prism, an interference fringe pattern, a ray diagram. Drawn in 1px brass, with key points labeled in Space Mono, and the "beam" itself a thin aurora-teal stroke that path-draws on scroll-into-view. 5. **Sodium-Glow Underlines:** links and active terms get an underline that is a 2px aurora-teal line with a soft amber bloom beneath it — `text-decoration` replaced with a `::after` bar plus `box-shadow`. 6. **Ruled Margins & Placard Captions:** faint navy hairlines along plate edges and small mono captions framed by a thin brass left-border, exactly like a museum object label. ## Prompts for Implementation **Full-screen narrative, read like a monograph by instrument-light:** The site opens on **Deep Observatory Navy**, empty. Over ~2.5s, three faint aurora ribbons drift in and the title "LUMINANT" resolves out of them — set in Sora 700, uppercase, letter-spacing 0.06em, in Pewter White, with each letter's box-shadow briefly catching aurora teal as the ribbons pass behind it (a subtle parallax: ribbons at 0.4x, title at 1x). A Space Mono subtitle fades in below ("a field journal on light as engineering material"). Then a single brass octagon node pulses once at the base of the title, and the **light-line spine ignites downward** — an aurora-teal gradient travels from the title down the left rule over ~1.2s, inviting the scroll. Use `scroll-snap-type: y proximity` (not mandatory — the descent should feel guided, not jerky). **Scroll behavior — the charging spine:** Track scroll progress; the aurora-charged segment of the spine fills from the last-passed node toward the next. When the spine crosses a node, that node does one `pulse-attention` animation (scale 1 → 1.35 → 1, brass stroke brightens, a soft teal `box-shadow` blooms and decays over 600ms). Plate content blocks `fade-reveal` + a small `slide-reveal` (translateY 24px → 0) with `stagger` on their child lines (headline, prose, diagram each delayed ~120ms). Honor `prefers-reduced-motion` by making the spine fill instantly and skipping the drift/pulse. **Aurora ribbons:** implement as 3 absolutely-positioned blurred gradient divs per active plate, animated with long-period CSS keyframes (translateX and slight skew, 7s / 9s / 11s, `ease-in-out`, `alternate`) and opacity oscillating 0.10–0.20. Never let two ribbons sync — offset their delays by primes. On low-power, drop to 1 static ribbon. **Photon trace diagrams:** SVG, `stroke-dasharray` path-draw triggered by `IntersectionObserver` — brass armature lines appear first (fast), then the aurora-teal beam path draws over ~1.4s with `ease-out`, then Space Mono labels fade in one by one. Each diagram sits inside a stroke-only chamfered-octagon frame. **Typographic detail:** chapter eyebrows in Marcellus uppercase brass, set above each Sora headline with a 1px brass rule between them. Pull quotes break the prose column with a chamfered-octagon bullet at the left margin. Drop the body to Pewter White only — never #fff. Mono captions hang in the left track aligned to the spine. **The close:** the final plate lets the spine's aurora charge reach the bottom node, then *disperse* — the gradient blooms outward and dissolves into a wide, dim teal-amber glow that slowly fades to pure navy. A last Space Mono line ("— observation continues —"). No buttons, no email capture, no pricing, no stat-grid, no CTA banner. The reader simply arrives at the end of the journal and the light goes quiet. **AVOID:** CTA-heavy sections, pricing tiers, three-up stat grids, testimonial carousels, hero-with-signup-form patterns, any pure-white surfaces, rainbow gradients, fast looping animations, stock photography, glassmorphic frosted cards. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **The charging light-line spine as both layout backbone and scroll indicator.** Most timeline-vertical layouts in the portfolio drop dated dots beside text; here the spine is a literal *conductor* that fills with aurora current as you read, and the chapter nodes physically pulse when the charge reaches them — structure, navigation, and the site's central metaphor (light as signal) are the same object. 2. **Art Deco metallic structure × meteorological aurora light, kept strictly separated.** Brass (chamfered octagons, hairline rules, Marcellus capitals) is *only* structure; aurora gradient is *only* light passing through that structure. They are never blended into one another. No other design pairs disciplined Deco geometry with a genuinely atmospheric, slow, irregular aurora rather than a flat gradient sheen. 3. **Zero photography; all visuals are optics-bench schematics.** Photon-trace SVG diagrams (prisms, interference fringes, ray paths) drawn in 1px brass with mono labels stand in for imagery — a "grain-overlay / instrument-panel" texture mood achieved entirely with CSS/SVG/canvas, not images. 4. **Monograph tone, not marketing tone.** Museum-placard mono captions, ruled engineering margins, exact numbers, a closing line ("— observation continues —") instead of a CTA. The page is built to be *read*, not converted from. **Chosen seed / style:** aesthetic: art-deco, layout: timeline-vertical, typography: geometric-sans, palette: navy-metallic, patterns: pulse-attention, imagery: grain-overlay, motifs: aurora-lights, tone: authoritative. **Avoided patterns from frequency analysis:** steers clear of the saturated `corporate` aesthetic (93%), `centered` layout (93%), `mysterious-moody` tone (94%), `mono`-as-display typography over-reliance, `gradient`/`warm` palette defaults (96% / 91%), and `counter-animate`/`parallax`-driven hero clichés. Instead it leans on the rare end of the distribution: `pulse-attention` patterns (0%), `navy-metallic` palette (0%), `aurora-lights` motifs (1%), `grain-overlay` imagery (3%), `geometric-sans` typography (6%), `art-deco` aesthetic (8%), `timeline-vertical` layout (11%), and an `authoritative` tone (23%).