# Design Language for lupine.day ## Aesthetics and Tone `lupine.day` is **a transmission log from a synthetic dreamer operating inside the grid** — imagine a mercenary hacker-poet who has rewired their neural implant to output hallucinatory diary entries as scrolling HUD readouts. The visual atmosphere sits precisely at the intersection of two rarely combined registers: **cyberpunk's hard-edged industrial menace** and **dreamy-ethereal's gossamer unreality**. The result is neither one nor the other — it is something genuinely dissonant and arresting: **neon that bleeds at the edges**, type that pulses like bioluminescence, scanlines overlaid on translucent iridescent surfaces. The dominant mood is **lucid dreaming inside a machine**: colors are hyper-saturated and synthetic — dopamine electric — but the geometry is not crisp. Everything has a fractional blur, a chromatic-aberration halo, a soft glow that suggests the signal is almost-but-not-quite stable. The site feels like reading a dispatch from someone who is simultaneously wide awake and deeply asleep, transmitting from a city that exists only between midnight and 5 AM. Tonal anchors: - **Not grim dystopia** — the cyberpunk register here is not noir-grimy but electroluminescent and baroque - **Not pastel kawaii ethereal** — the dreaminess is chemical and synthetic, not soft-focus or innocent - **Sci-fi HUD as intimacy** — targeting reticles, signal-strength bars, coordinate readouts are used as *affection*, not surveillance - **Counter-animation as heartbeat** — elements counting down, up, oscillating between states communicate aliveness, not threat Primary emotional register: **dazzled wonder tinged with mild paranoia** — the way it feels to be the only person awake at 3 AM watching city neon dissolve in rain. --- ## Layout Motifs and Structure The layout metaphor is a **vertical mission log or field journal from a synthetic operative** — a single continuous scroll that reads top-to-bottom like a chronological record, each section a new log entry stamped with timestamp glyphs, signal strength indicators, and coordinate tags. **Timeline-vertical architecture:** The page is structured as a **single full-bleed vertical timeline** where each chapter is a **log entry node**. Every node connects to the next via a neon-traced vertical spine — a 1px–3px glow line running the full height of the page along the left margin. Each node branches rightward from this spine via a short horizontal connector (12px dash, glowing), then expands into its content panel. **Spatial logic:** - Left spine: `32px` from left edge on desktop, `16px` on mobile — a continuous `#b400ff`→`#00ffcc` CSS gradient line with a `box-shadow: 0 0 8px` glow - Node connectors: short horizontal dashes, `12px` wide, branching right from spine, each colored per-entry in a cycling neon accent - Node panels: full-width content blocks, left-padded `80px` on desktop to clear the spine, with glassmorphism-style backgrounds — `background: rgba(10, 0, 26, 0.65); backdrop-filter: blur(12px)` — framed by a `1px` border in the entry's neon accent color - Node timestamps: top-left of each panel, monospace, `10px`, tracking `0.2em`, glowing — format: `// 2247.03.14 · 03:47:22 LOCAL` - Node HUD decoration: top-right of each panel, a miniature HUD cluster: signal bars (3–5 animated SVG bars), coordinate pair `[LAT:−33.87 LON:151.21]`, and a one-word status tag (`ACTIVE`, `PROCESSING`, `DREAMING`, `UPLINK`) **Scroll behavior:** - Intersection Observer triggers per-node entrance: timeline spine "draws itself" downward as the user scrolls — the gradient line grows from the top, each segment appearing as its node enters viewport - Node panels slide in from the right (`translateX(40px) → 0`, `opacity 0 → 1`, `400ms ease-out`) - Counter elements begin counting when their node enters viewport **No navigation bar.** The top of the page is a fullscreen hero — a 100vh opening "boot sequence" panel where a HUD reticle animates inward, coordinates lock, and the site name assembles character by character. Below that, the timeline begins. **Section count:** 5–7 log entries total. Not paginated — one unbroken scroll. --- ## Typography and Palette **Typefaces (Google Fonts only)** **Primary display / wordmark / log headers:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — variable, weights 300–700. Space Grotesk is the canonical grotesque-neo choice for this aesthetic: it has the mechanical bluntness of a sans-serif engineered for interfaces while retaining subtle irregularities that feel handmade at the microscale. Used at `clamp(2.4rem, 6vw, 5.5rem)` for chapter titles, all-caps with `letter-spacing: 0.06em`, and at `700` weight for the wordmark. **Body / log-entry prose:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — same family, weight `300`, size `clamp(0.95rem, 1.4vw, 1.05rem)`, `line-height: 1.75`. The single-family discipline enforces coherence; thin-weight grotesque against dark backgrounds with neon accents reads as both readable and stylistically committed. **Monospace / HUD labels / timestamps / coordinates:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — weight `400` and `700`. Used for all machine-language elements: timestamps, coordinates, status tags, counter values, signal readouts. `font-size: 0.7rem–0.85rem`, `letter-spacing: 0.15em`, glowing with `text-shadow`. **Color Palette — Dopamine Neon** Background system (layered): - `#06000f` — near-black deep void (page base, `` background) - `#0d0020` — deepest purple-black (hero and heavy panel backgrounds) - `#12002e` — medium deep-violet (glassmorphism panel fill before blur) Neon accent spectrum (dopamine — saturated, electric, synthetic): - `#ff00cc` — electric magenta (primary CTA accent, spine top) - `#b400ff` — ultraviolet violet (secondary, spine gradient mid) - `#00ffcc` — acid cyan-teal (tertiary accent, spine gradient bottom, HUD highlights) - `#ffe600` — electric yellow (counter numerals, timestamp glyphs) - `#00ff88` — phosphor green (status ACTIVE tag, signal bars) - `#ff4d4d` — alarm red-orange (status ALERT, error states, critical counter) Text: - `#e8d4ff` — pale lavender-white (primary body text — warmer than pure white, less harsh against deep violet) - `#9966cc` — mid-violet (secondary/dimmed text, timestamps at rest) - `#4d2d6e` — deep muted purple (inactive/disabled states) Glassmorphism panels: - Fill: `rgba(18, 0, 46, 0.65)` - Border: `1px solid rgba(180, 0, 255, 0.35)` - Backdrop blur: `12px` - On hover: border brightens to `rgba(255, 0, 204, 0.7)`, `box-shadow: 0 0 24px rgba(255, 0, 204, 0.2)` --- ## Imagery and Motifs **Zero photography.** Every visual element is SVG or CSS-generated. The frequency analysis shows photography at 92% of the corpus — lupine.day opts out entirely, matching the machine-transmission aesthetic. ### Vector Art System All imagery is **flat vector illustration with a neon-ink palette** — SVG files embedded inline for `currentColor` theming and glow-filter application. Style reference: early Moebius / Syd Mead technical illustration aesthetic translated to flat vector — hard geometry, precise curves, but luminous and unearthly in color. **Illustration set (5 SVG pieces, one per major log entry):** 1. **Lupine flower as circuit diagram** — a botanical lupine rendered entirely in neon trace-lines on black, each petal a PCB-trace outline, the stamen a tiny capacitor symbol, the leaves routing paths with via-hole dots. Colors: `#00ffcc` traces on `#06000f`. 2. **City skyline as HUD overlay** — a minimal vector cityscape (7–9 building silhouettes) overlaid with HUD annotation lines, targeting reticles on three buildings, and a dashed signal-path arc connecting two towers. Colors: `#b400ff` silhouettes, `#ff00cc` HUD annotations. 3. **Eye / aperture reticle** — a human eye in vector, iris rendered as a mechanical aperture/iris-diaphragm, pupil a targeting crosshair. The iris blades animate slowly: `rotation: 0deg → 8deg → 0deg` over `6s infinite ease-in-out`. Colors: `#ff00cc` iris blades, `#00ffcc` pupil crosshair. 4. **Data cascade / rain column** — a vertical column of falling Space Mono glyphs (mix of roman characters, katakana, binary), each glyph a tiny SVG `` element, opacity and y-position animated to simulate matrix-rain but in the neon palette. Colors: `#00ff88`→transparent vertical gradient per column. 5. **Lupine constellation map** — a star chart style vector where the stars are connected into the outline of a lupine flower, each star labeled with a fake stellar designation in Space Mono (`α LUP`, `β LUP`, `δ LUP`). Background: subtle radial gradient `#0d0020`→`#06000f`. Stars: `#ffe600` (bright) and `#9966cc` (dim). ### HUD Motif Language HUD elements appear throughout as decorative overlays, never functional navigation: - **Targeting reticle:** four corner-brackets (`⌐` `¬` `L` `⌐` mirrored) that animate inward on scroll (`transform: scale(1.4) → scale(1)`, `opacity 0 → 1`, `600ms`). SVG, `#00ffcc`, `24px × 24px` each corner. - **Signal bars:** 4 vertical rects of increasing height, each independently animated (height oscillates ±20% out-of-phase, `1.8s infinite sine`). Color: `#00ff88` for bars 1–3, `#9966cc` for bar 4 when "weak signal". - **Scan line overlay:** full-bleed `::after` pseudo-element on the hero, `background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,255,204,0.03) 2px, rgba(0,255,204,0.03) 4px)`, `pointer-events: none`. - **Corner-bracket frame:** each log-entry panel has decorative SVG corner-brackets at all four corners, 16px × 16px, colored per panel's accent. - **Pulse ring:** a subtle concentric-ring pulse (three rings, `scale(1)→scale(1.6)`, `opacity 0.6→0`, staggered 400ms) behind the hero wordmark, `stroke: #ff00cc`, `fill: none`. ### Counter-Animate Pattern Counters are the site's primary interactive gesture — they signal **aliveness and precision**: - **Boot counter (hero):** on page load, three counters count simultaneously: `NEURAL LINK: 000 → 100%` (3s, `easeOutExpo`), `SIGNAL LOCK: 0.000 → 1.000` (4s, easing stepped), `UPLINK: —— → ESTABLISHED` (character-by-character reveal, 2s) - **Timeline node counters:** each log entry panel shows a small counter in its top-right HUD cluster — a number that counts from some offset to a target value when the node enters viewport (e.g., `03:47:22 → 03:47:31` as a running clock, or `PACKETS: 0 → 2,847`) - **Idle pulse counter:** the spine glow cycles through intensity levels at `0.4Hz` — a slow heartbeat that the user perceives subliminally as the page being alive - **Hover counters:** hovering a panel triggers a quick countdown `100 → 0%` in the corner HUD badge, suggesting a connection handshake is completing --- ## Prompts for Implementation Build `lupine.day` as **a single-scroll vertical timeline transmission log with fullscreen boot hero, glassmorphism log-entry panels, and pervasive HUD counter-animations**. One `index.html`, one `style.css`, one `main.js`. No framework, no bundler, no npm. Vanilla JS + SVG + CSS custom properties throughout. Target: under 120KB total excluding Google Fonts. **Hero section (100vh, full-bleed):** The hero fills the viewport entirely. Background: `#0d0020` with the scanline overlay pseudo-element. Center-stage: the targeting reticle animates inward over 1.2s on load, then the site name `LUPINE.DAY` assembles letter-by-letter using a typewriter reveal (each character fades in sequentially, `Space Grotesk 700`, `clamp(3rem, 8vw, 6.5rem)`, `#e8d4ff`, with a brief `text-shadow: 0 0 20px #ff00cc` flash on each character as it appears). Below the wordmark: a tagline line in `Space Mono 400`, `0.85rem`, `#9966cc`, that reads `// TRANSMISSION LOG · NEURAL UPLINK ACTIVE` — revealed 200ms after wordmark completes. The boot counters (`NEURAL LINK`, `SIGNAL LOCK`, `UPLINK`) appear bottom-left in a small monospace cluster, counting upward simultaneously with the wordmark reveal. The pulse rings expand outward from behind the wordmark, three rings, staggered. The HUD illustration (eye/aperture) occupies the upper-right quadrant at ~25vw width, the iris blades rotating slowly. **Timeline spine:** Below the hero, a `1px` left-edge spine begins. Implement via a `::before` pseudo-element on the timeline container, `height: 0` initially, animating to full height as the user scrolls — use `IntersectionObserver` on the bottom of the page to trigger, or `scroll` event + `scrollRatio × totalHeight` to set height dynamically. Spine CSS: `background: linear-gradient(to bottom, #ff00cc, #b400ff 40%, #00ffcc)`, `box-shadow: 0 0 6px #b400ff`. **Log entry panels (5–7 entries):** Each panel is a `
` with class `log-entry`. Left-padding `80px` on desktop. Background: glassmorphism (`rgba(18, 0, 46, 0.65)`, `backdrop-filter: blur(12px)`, `border: 1px solid rgba(180, 0, 255, 0.35)`, `border-radius: 4px`). Corner bracket SVG elements (inline SVG, absolutely positioned at each corner). Timestamp top-left in `Space Mono`, HUD cluster top-right (signal bars + coordinates + status badge). Entry content: `Space Grotesk 300` body text + one inline SVG illustration per entry. **Entry order (thematic log narrative):** 1. **BOOT / ORIENTATION** — the site's purpose or the persona's mission statement. Illustration: circuit-lupine. Counter: neural link percentage. 2. **SIGNAL ACQUISITION** — a medium-length meditation on what the site documents or tracks. Illustration: city HUD skyline. Counter: signal packets. 3. **MEMORY CASCADE** — past entries / archive. Illustration: data rain column. Counter: archive item count. 4. **OBJECT OF STUDY** — the lupine itself as symbol and obsession. Illustration: constellation map. Counter: days-since-first-observation running clock. 5. **TRANSMISSION END / OPEN CHANNEL** — contact or next-step content framed as "opening a channel." Illustration: aperture eye. Counter: countdown to "next transmission." **Animation choreography:** - All node panels use `IntersectionObserver` with `threshold: 0.15` — when a panel enters, it fires `translateX(40px)→0` + `opacity 0→1` over `400ms ease-out` - The spine "draws" by expanding height as the user scrolls: `requestAnimationFrame` loop reading `window.scrollY / (document.body.scrollHeight - window.innerHeight)` and setting `--spine-progress` CSS variable, which drives `height: calc(var(--spine-progress) * 100%)` - Counter elements use a shared `animateCounter(el, from, to, duration, easing)` utility — `easeOutExpo` default, stepped easing for the `0.000 → 1.000` signal lock - Idle heartbeat: CSS `@keyframes spineGlow` on the spine's `box-shadow` cycling through `0 0 4px #b400ff` → `0 0 14px #ff00cc` → `0 0 4px #b400ff` over `2.5s infinite` **CSS architecture:** Use CSS custom properties (`--neon-magenta: #ff00cc; --neon-violet: #b400ff; --neon-cyan: #00ffcc; --neon-yellow: #ffe600; --neon-green: #00ff88; --void-base: #06000f; --void-mid: #0d0020; --void-panel: rgba(18,0,46,0.65)`) declared on `:root`. All glow effects via `text-shadow` and `box-shadow` — no images for glow. **Bias toward narrative, not conversion.** No CTAs. No pricing. No testimonials. No statistics grids. The only "action" the user is invited to take is to read, to scroll, to hover. The site is a transmission — its job is to be received, not to sell. --- ## Uniqueness Notes **Chosen seed:** aesthetic: cyberpunk, layout: timeline-vertical, typography: grotesque-neo, palette: dopamine-neon, patterns: counter-animate, imagery: vector-art, motifs: sci-fi-hud, tone: dreamy-ethereal **Differentiators (3+ from corpus frequency analysis):** 1. **Timeline-vertical layout at 2% corpus frequency — used as a literal narrative spine.** The corpus is dominated by asymmetric (41%), single-column (21%), and dashboard (21%) layouts. Timeline-vertical is almost entirely unrepresented. lupine.day commits to it architecturally: the vertical spine is a visual element (a glowing CSS line), not just a metaphor. Every panel branches from it. The page cannot be mistaken for any other layout paradigm in the corpus. 2. **Cyberpunk × dreamy-ethereal tonal collision — neither is allowed to win.** Cyberpunk appears at 14% in the corpus, but in every other instance it is rendered as grim, high-contrast, and industrial. dreamy-ethereal appears at 6% in the corpus, always as soft, pastel, and romantic. lupine.day is the first and only design to fuse the two registers deliberately: neon that bleeds at the edges, glassmorphism with deep-void backgrounds, synthetic dreaminess. This specific tonal hybrid does not exist elsewhere in the corpus. 3. **Counter-animate as the primary interactive gesture.** Counter-animate is at 5% in the corpus, but no design uses it as the *dominant* interactive language. On lupine.day, counters are everywhere: boot sequence, panel HUD clusters, hover handshakes, idle spine pulse. The site communicates aliveness and machine-precision entirely through counting — there are no carousels, no lightboxes, no modals. Just numbers in motion. 4. **Vector-art at 2% corpus frequency, used as an inline SVG illustration system thematically tied to the domain name.** The lupine botanical form is the conceptual thread: it appears as a circuit diagram, as a constellation map, as the metaphor connecting every log entry. This is not decorative illustration — it is the site's symbolic argument. No other design in the corpus uses its domain name's referent object as the central visual motif running through all imagery. 5. **Sci-fi HUD motifs as intimacy language, not surveillance language.** HUD overlays appear in 6% of the corpus, always as technical or aggressive decoration. lupine.day reframes them as tenderness: the targeting reticle locks onto the wordmark with affection, the signal-strength bars measure emotional attunement, the coordinates locate a feeling rather than a place. This conceptual reframing — HUD as love language — is absent from the rest of the corpus. 6. **Cool-grays and deep-violet palette at near-0% corpus frequency.** The corpus is 90% warm-toned. lupine.day's base palette is the coldest in the entire corpus — deep void-violet and near-black purple — against which the neon accents appear with maximum perceptual contrast. The dopamine-neon brights read as electric precisely because they are set against a cold, absorptive dark background, not a warm or neutral one.