# Design Language for lurch.dev

## Aesthetics and Tone

lurch.dev is a **living aurora specimen jar** — the visual language of a field scientist who captures atmospheric phenomena in hand-blown glass vessels, then displays them on a whitewashed shelf. The site exists at the intersection of scientific wonder and pastel holography: every surface carries the luminous bleed of auroral borealis light trapped inside a frosted container. The grain is not noise-as-decoration — it is the texture of the glass itself, the fine silica dust on a museum shelf, the soft imperfection of something preserved and observed.

The mood is **energetic-but-tender**: the aurora is in motion, always, but the jar holds it still long enough to study. Headings pulse gently with iridescent foil shimmer. Sections breathe in on scroll like a specimen newly sealed. The palette is pastel-holographic — not neon, not chrome, not the hard diamond gleam of vaporwave — but the soft prismatic cast of light through frosted glass at 3am in Tromsø: lavender-milk, mint-fog, peach-aurora, ice-silver, aurora-rose.

The tone is **energetic wonder**: rapid curiosity, not hustle. A field researcher's excitement at unexpected results — hands moving fast across a notebook, phrases underlined twice, margins full of sketches. The site does not perform confidence. It performs *discovery*.

Anti-patterns deliberately avoided: no dark backgrounds (the jar is lit from inside, so the field is light), no geometric brutalism, no tech-bro confidence posturing, no grid of feature cards, no pricing blocks.

## Layout Motifs and Structure

**The Specimen Shelf:** The page is not a feed and not a canvas. It is a **centered reading column (min(680px, 90vw))** set against a frosted-ground background — but the column itself has no hard edges. Content pools naturally within it, with generous vertical rhythm (2.4rem baseline). This directly addresses the centered: 87% prevalence by making centeredness *purposeful* rather than default: the column is a jar, and the jar has a specific shape.

**Bounce-Enter Stacking:** Every section block — text cluster, image capsule, divider — enters the viewport with a `bounce-enter` animation: elements drop slightly past their rest position, rebound gently, and settle. The overshoot is small (8px), the spring damping is high (0.72), and the duration varies per element type (text: 420ms, images: 560ms, headers: 340ms). This is not the cartoonish bouncing of UI libraries — it is the motion of a glass jar being placed carefully on a shelf, with just enough weight for the surface to push back.

**Horizontal Structure:** No sidebars. No split-screens. The hierarchy flows vertically through three visual weights:
1. **Specimen Headers** — section-opening lines, very large, set in loose tracking, with a holographic foil shimmer effect (CSS `background-clip: text` with animated iridescent gradient)
2. **Field Notes** — body text, warmly spaced, unhurried
3. **Capsule Modules** — small frosted-glass containers (blurred background, 1px pale border, subtle inner shadow) for code snippets, side observations, or highlighted facts

**Scroll Behavior:** No parallax. The background aurora pattern is CSS-animated (slow drift, 40s loop), completely separate from scroll. This prevents the dizziness of parallax while preserving liveliness. On scroll, each specimen block activates its `bounce-enter` independently via IntersectionObserver.

**No sticky navigation.** The page is a scroll-down reading experience. A single wordmark fixed at top-left, fading to 20% opacity when user scrolls past 120px. Nothing else is fixed.

## Typography and Palette

**Type System (Google Fonts only, verified):**

- **Display & Wordmark — `Nunito`** (variable, wght 200–900). Nunito's rounded terminals and humanist character spacing create the warm, curious personality. Wordmark at `wght 800`, 72px, loose tracking `0.06em`, rendered with the holographic gradient text treatment. Section headers at `wght 700`, `clamp(36px, 6vw, 56px)`, normal tracking. Nunito is the humanist core.

- **Body — `Lato`** (wght 300, 400). Lato's humanist geometry at light weight gives body text a delicate, field-note quality. Set at 18px, `line-height: 1.85`, color `#4a3f5c` — a deep purple-gray that reads clearly against the pale ground without being cold black.

- **Accents & Labels — `DM Sans`** (wght 400, 500). Used for capsule labels, timestamps, small UI cues. DM Sans adds gentle technical precision without leaving the humanist register.

**Palette (all hex, derived from pastel-holographic aurora spectrum):**

- `#f0eeff` — Lavender Milk (page ground / background base)
- `#e2f5f0` — Mint Fog (frosted-glass capsule backgrounds)
- `#fde8ef` — Aurora Rose (warm accent, hover states, link underlines)
- `#dff0fb` — Ice Sky (secondary capsule variant)
- `#f7f0fe` — Peach-Lilac (section divider background strips)
- `#c9b8e8` — Holographic Mauve (border/rule color, 40% opacity normally)
- `#4a3f5c` — Deep Amethyst (primary text)
- `#7fb3d3` — Aurora Teal (interactive accent, focused states)

**Holographic Shimmer Gradient (CSS, used on display text and decorative elements):**
```
linear-gradient(135deg, #c9b8e8 0%, #b8d4e8 20%, #b8e8d8 40%, #e8d4b8 60%, #e8b8c8 80%, #c9b8e8 100%)
```
Animated with `background-position` shift across a 300% background-size on a 6s loop. This produces iridescent foil shimmer on text at large display sizes.

## Imagery and Motifs

**Aurora-Lights Motif — CSS-only, no raster images:**
The aurora is implemented as 4–6 stacked `<div>` elements with `mix-blend-mode: screen`, each carrying a large radial gradient in a different aurora hue (mint, lavender, rose, sky). Each layer drifts independently via CSS keyframe animation (different durations: 24s, 31s, 18s, 42s, each with distinct translate-X and translate-Y arcs). The result is a soft, continuously morphing aurora wash behind all content — never distracting because opacity is capped at 0.18 per layer.

**Grain Overlay — SVG featureTurbulence filter:**
A full-viewport `<svg>` with `position: fixed, pointer-events: none, z-index: 999` applies a fine film grain using:
```
<feTurbulence type="fractalNoise" baseFrequency="0.68" numOctaves="4" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>
<feBlend mode="overlay" in="SourceGraphic"/>
```
Grain opacity: 0.035. This is the frosted-glass texture — present but never dominant. The grain does not animate (no flicker).

**Specimen Jar Capsules:**
Frosted-glass card containers use: `background: rgba(255,255,255,0.55)`, `backdrop-filter: blur(12px) saturate(160%)`, `border: 1px solid rgba(201,184,232,0.35)`, `border-radius: 16px`, `box-shadow: 0 2px 24px rgba(127,179,211,0.12), inset 0 1px 0 rgba(255,255,255,0.7)`. These capsules hold code fragments, pull-quotes, and field observations. Each capsule bounce-enters independently.

**No Photography.** The registry shows photography at 90% — lurch.dev opts out entirely. All visual texture comes from CSS gradients, SVG grain, and aurora animation. The only "images" are inline SVGs for any icons or decorative marks.

**Aurora Dividers:**
Section breaks are not horizontal rules. They are thin (2px tall) full-width strips with a horizontal aurora gradient sweep — the same pastel holographic gradient from the display text, set at 15% opacity, serving as breathing room between sections.

## Prompts for Implementation

Build lurch.dev as **a single long-scroll field journal from someone who studies atmospheric light** — narrative, unhurried, curious. Not a portfolio. Not a product landing. A reading experience that rewards scrolling down.

**Layer Architecture (bottom to top):**
1. `position: fixed, z-index: 0` — Aurora drift layers (4–6 blended radial gradients, slow CSS animation)
2. `position: fixed, z-index: 999` — SVG grain overlay (pointer-events: none)
3. `position: relative, z-index: 1` — All page content

**Bounce-Enter Implementation:**
```js
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('is-visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.12 });
document.querySelectorAll('.specimen-block').forEach(el => observer.observe(el));
```
```css
.specimen-block {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0ms, transform 0ms;
}
.specimen-block.is-visible {
  animation: bounceEnter 480ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bounceEnter {
  from { opacity: 0; transform: translateY(28px); }
  60% { opacity: 1; transform: translateY(-8px); }
  80% { transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
```

**Holographic Text Shimmer (CSS):**
```css
.shimmer-text {
  background: linear-gradient(135deg, #c9b8e8 0%, #b8d4e8 20%, #b8e8d8 40%, #e8d4b8 60%, #e8b8c8 80%, #c9b8e8 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
```

**Page Structure (semantic HTML, single scroll):**
- `<header>` — Wordmark (shimmer-text Nunito 800), tagline (Lato 300)
- `<main>` — Series of `<section class="specimen-block">` elements
- Each section: optional specimen-jar `<div class="capsule">` for highlights
- No `<nav>` (no sticky nav), no `<footer>` beyond a minimal closing line
- Aurora dividers as `<div class="aurora-divider" aria-hidden="true">`

**AVOID in implementation:**
- Pricing tables, feature grids, CTA buttons with dark backgrounds
- Parallax scroll effects (aurora is fixed, not scroll-driven)
- Flash/pop transitions — all motion should feel physical (weight, spring)
- Dark mode (the jar is always lit from inside; the ground is always pale)
- Any stock photos or raster imagery

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic: holographic, layout: centered, typography: humanist, palette: pastel, patterns: bounce-enter, imagery: grain-overlay, motifs: aurora-lights, tone: energetic.

**Differentiators from the existing registry corpus:**

1. **Aurora as living specimen, not backdrop spectacle.** Other aurora-gradient designs (3% in registry) use aurora as a bold full-bleed splash. lurch.dev treats aurora as trapped-light in a specimen jar — subdued, layered, scientifically observed. The aurora never dominates; it drifts behind content at 18% opacity per layer, creating depth without visual competition.

2. **Bounce-enter as physical weight, not cartoon spring.** The `bounce-enter` pattern is at 1% in the corpus — nearly unused. The implementation here is not a UI library bounce: it uses `cubic-bezier(0.34, 1.56, 0.64, 1)` (the spring easing) with a small 8px overshoot, making each block feel like a glass jar being set on a shelf. The motion communicates *mass* and *care*, not playfulness.

3. **Grain-overlay as frosted glass texture, not film nostaligia.** The 3%-prevalence grain-overlay pattern is almost always used to evoke vintage photography or analog warmth. Here, grain serves as the microscopic texture of hand-blown glass — a scientific material rather than a nostalgic filter. Combined with `backdrop-filter: blur` capsules, the grain reads as surface quality of the display medium itself.

4. **Pastel-holographic without darkness.** All other holographic designs in the registry (4%) use dark backgrounds to make iridescent elements pop. lurch.dev inverts this entirely: the ground is pale lavender milk, and the holographic shimmer is light-on-light — visible only because it moves. This is the physics of holographic foil viewed in daylight, not backlit neon.

5. **No photography in a 90%-photography corpus.** All visual texture is CSS/SVG, making the site load instantly, render identically everywhere, and stay visually coherent without art-direction overhead.

**Patterns avoided due to high frequency:** centered layout treated as structural (not just CSS alignment — used purposefully as jar-shape), photography (90%), hand-drawn aesthetic (61%), editorial (51%), humanist typography differentiated through Nunito's rounded terminals rather than conventional grotesque humanist choices.
<!-- DESIGN STAMP
  timestamp: 2026-05-08T22:55:38
  domain: lurch.dev
  seed: seed
  aesthetic: lurch.dev is a **living aurora specimen jar** — the visual language of a field s...
  content_hash: 3d6e513020b8
-->