# Design Language for LLITTL.com ## Aesthetics and Tone LLITTL.com is a **Y2K-futurism séance terminal** — picture a 2001 ThinkPad found in an abandoned planetarium, its screen still glowing soft cyan, casting candlelight reflections onto the wall behind it. The double-L of the wordmark is the design's foundational glyph: two parallel candle wicks, two stacked depth-planes, two cursor blinks frozen 12 milliseconds apart. The mood is **authoritative and oracular** — not shouty, not cute. The site speaks in the voice of a small, certain instrument that has measured something the user has not yet measured, and is prepared to read out the result. Where most Y2K homages reach for chrome bubbles and Frutiger gloss, LLITTL goes the opposite direction: **dim Y2K**. The aesthetic borrows from Y2K's iconography — translucent stratified panels, swimming pixel grids, the ringed scanline of a CRT — but desaturates it into the blue-black hush of a votive room at 3 a.m. The interface behaves like an oracle's instrument panel: numbers tick downward instead of upward, light flickers the way candle-flame flickers (not the way LEDs flicker), and the only warm color allowed is a single recurring orange-amber teardrop — the candle flame itself, the only living thing on the screen. The "littl" in the name is taken literally: every measurement displayed on the site is a *small* measurement, a quiet measurement. Quantities arrive in fractions of a unit, in sub-decimals, in counts down to one. The entire experience is calibrated to the small end of the dial — no hero stat over 100, no headline larger than 6 words, no stack deeper than 7 transparent layers. *Less of everything, but the less is luminous.* ## Layout Motifs and Structure The structure is **layered-depth**, executed as a literal **z-axis stratigraphy of seven translucent vellum panels** suspended in front of a candlelit black void. There is no grid in the traditional sense; instead the page is composed of seven coplanar slabs, each at a different `translateZ` (from -640px to +120px), each holding one fragment of content, each drifting at its own parallax velocity in response to scroll, cursor X, and an internal "breath" timer (a 5.6s sinusoidal nudge of ±6px). The seven layers, from deepest to nearest: 1. **Layer 0 — The Wall** (-640px): pure `#040614`, a candle-warmed blue-black, holding only the slow-drifting flame highlight (a single radial gradient that wanders in a 64s Lissajous orbit). 2. **Layer 1 — Star-Vellum** (-440px): a sparse field of 0.5px ethereal-blue dots, ~120 of them, each twinkling on a 3–9s individual phase. 3. **Layer 2 — The Liturgical Ledger** (-280px): a translucent vellum sheet (`backdrop-filter: blur(2px)` over a 6% opaque slab of `#0B1430`) bearing the long-form prose in *Cormorant Garamond Italic* 17px. This is the only narrative layer. 4. **Layer 3 — The Counter Plinth** (-120px): a black slab where the central numeric counters live. Numbers here count *down*, never up. 5. **Layer 4 — The Glyph Plate** (0px, baseline): the LLITTL wordmark and section markers, set in *Major Mono Display* and *Audiowide*. 6. **Layer 5 — The Candle** (+60px): a single SVG candle, lit, drawn entirely in CSS conic-gradient + filter blur. The flame is the only source of warm color in the entire site. 7. **Layer 6 — Glass Reticle** (+120px): a thin cyan reticle/HUD frame in front of everything, with corner ticks, a frame label ("LL.001 / SMALL.READOUT"), and a tiny live-chronometer in the bottom-right. Sections are not separated by horizontal rules; they are separated by **depth transitions** — the camera (the layer stack) shifts its `perspective-origin` and the user feels they have moved *into* the device rather than *down* the page. There are five such depth-rooms in total, each occupying ~140vh: - **Room I — The Striking** (the candle is lit, all counters initialize) - **Room II — The Reading** (a small measurement is taken) - **Room III — The Diminishment** (counters tick down toward 1) - **Room IV — The Hush** (the flame steadies, the page nearly silent) - **Room V — The Snuffing** (the flame is pinched out; the screen returns to wall-blue) The sidebar — a 3% column on the right edge — is reserved for a **vertical tally bar**: a thin glowing line that fills downward (not upward) as the reader scrolls, marking the diminishing reservoir of the experience. By the end of Room V, the bar is empty. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Section banners** — *Audiowide* (400). The retro-display face: tubular, chrome-cast, unmistakably 2001 — used at clamp(2.4rem, 7vw, 6.4rem) for room titles such as "I — THE STRIKING" and "V — THE SNUFFING". Letter-spacing 0.06em. Color shifts from `#9DD3F0` (cool readout) at room start to `#F5C277` (warm flame) just before room transition, then resets. - **Numerical counters / Readouts** — *Major Mono Display* (400). Used exclusively for the down-counters. Sizes 4.8rem → 9.6rem. The mono character grid keeps tick-down animation honest — every digit lands on the same baseline, every glyph occupies the same rectangle. Counter color: `#7AB7DA` baseline, momentarily flashing `#FFE6BA` for one frame on each decrement. - **Body / Liturgical prose** — *Cormorant Garamond* (300, 400 italic). The honeyed serif used at 17px / 1.65 line-height for the long, slow narrative on the Liturgical Ledger layer. Italic is the default voice. Color: `#C8D6E8` at 78% opacity. - **Micro / HUD labels** — *Space Mono* (400). 11px, uppercase, letter-spacing 0.18em. Used for reticle labels, layer indices ("LYR 04"), and frame coordinates. Color: `#5C8FAE`. **Palette — Ethereal Blue, with one warm flame:** - `#040614` — Wall (deep candlelit blue-black; absolute background) - `#0B1430` — Vellum (translucent panel base, used at 6–14% opacity) - `#1E3866` — Reticle stroke / Counter plinth shadow - `#5C8FAE` — Micro-label cool - `#7AB7DA` — Counter primary (cyan readout) - `#9DD3F0` — Display cool (room titles, baseline) - `#C8D6E8` — Body text on vellum - `#E8F2FB` — Highlight cyan (for the rare emphasis) - `#F5C277` — **Flame amber** (the only warm color, used sparingly) - `#FFE6BA` — Flame core (a single frame flash on counter decrement) The palette is **97% ethereal-blue, 3% candle-amber by area**. The 3% amber is non-negotiable: it must remain rare, otherwise the "small" measurement and oracular hush are broken. ## Imagery and Motifs No photography. No 3D renders. No stock illustration. Every visual is hand-built from **CSS gradients, SVG, and filter stacks** — fitting for a Y2K-futurism interpretation that wants to look like it was rendered by the device showing it, not pasted on top. The five recurring visual motifs: 1. **The Single Candle** — a vertical SVG candle drawn in cool blue wax (`#1E3866` body with a `#5C8FAE` highlight stripe), topped by a flame composed of two layered conic gradients (outer halo `#F5C277`, core `#FFE6BA`) plus a `filter: blur(1.5px) saturate(1.2)`. The flame jitters via a 0.4s steps(7) keyframe with sub-pixel `transform: translate` perturbations — candle-flicker, not LED-flicker. The candle wax shortens by 1px every 6 seconds during Rooms II–IV; by Room V it is a stub. 2. **Neon-Glow Halo Rings** — the central counter sits inside three concentric cyan rings, each with `box-shadow: 0 0 32px #7AB7DA, 0 0 72px #1E3866` and a slow rotation. The rings are not decorative; they are gauges. Their stroke thickness encodes the counter's current value: as the number ticks down, the rings thin. 3. **Pixel Star-Vellum** — sparse 1×1 and 1×2 pixel stars on Layer 1, drawn with `box-shadow: 0 0 0 0.5px #9DD3F0, 0 0 4px #7AB7DA` for that specific Y2K "tiny lit point" feel. Each star has its own twinkle phase. ~120 stars total, never enough to feel like a sky — only enough to feel like the dust on a screen. 4. **Layered Vellum Sheets** — the translucent slabs that hold prose. Each has a subtle inner border (1px `rgba(157,211,240,0.08)` inset), a 2px `backdrop-filter: blur(2px)`, and a barely-visible CRT scanline overlay (`repeating-linear-gradient(180deg, transparent 0 2px, rgba(11,20,48,0.2) 2px 3px)`). They feel like vellum because they accept light from the candle on Layer 5 — a faint warm gradient in their lower-right corner. 5. **The Reticle and Crosshair** — a top-layer HUD frame on every room. Corner ticks (12px L-brackets), a centered crosshair that snaps to the active counter, and a 6-character frame label ("LL.001", "LL.014", etc.). The reticle pulses once per second on a 1px scale, in sync with the chronometer. Forbidden: chrome bubbles, lens flares, gradient meshes, photographic textures, hand-drawn anything, organic blobs, marble. The visual world here is **made of light and instrument**, not material. ## Prompts for Implementation Build this as a **single full-screen narrative** in one HTML, one CSS, one JS — no framework. Treat it as a 90-second séance, not a marketing page. **Z-axis perspective rig.** The body element receives `perspective: 1400px` and `transform-style: preserve-3d`. Each of the seven layers is an absolutely-positioned `
` with `transform: translateZ(...) translate(...)`. On scroll, only the camera's `perspective-origin` and a master `--depth` CSS variable change — individual layers do not move on Y, they appear to move because the camera does. This is what gives the immersive-into-the-device feel rather than the conventional parallax-down-the-page feel. **Counter-animate as the spine.** The central numeric readouts are the heartbeat. They count *down*: 144 → 89 → 55 → 34 → 21 → 13 → 8 → 5 → 3 → 2 → 1. (Yes, descending Fibonacci — a small ladder.) Each transition is a 480ms tween with a 1-frame `#FFE6BA` flash on the digit that changes. The decrement cadence is set by scroll position, not by time; the user pulls the number down by descending the page. Once a counter reaches 1, it stays at 1 until the next room's counter takes over. **Numbers never go back up.** This rule is non-negotiable; it is the discipline that makes the experience feel oracular instead of arcade-y. **Candle physics.** The flame's flicker is a 0.4s `steps(7)` animation cycling through 7 sub-pixel offsets and 7 hue perturbations between `#F5C277` and `#FFE6BA`. Crucially, every 11–17 seconds (random within range), the flame *gutters* — drops to 30% opacity for 220ms, recovers in 380ms. This rare gutter is the only "event" on the page that is not under user control, and it is what makes the room feel inhabited. **Room transitions via depth, not via slide.** When the user scrolls past a room boundary, the camera rushes inward (`--depth` jumps from 0 to 1) over 1.2s with `cubic-bezier(.7,0,.3,1)`, then resets to 0 for the new room. During the rush, the reticle frame label morphs character-by-character to the new label using a steps animation on a typewriter-style mask. No fade, no slide. **Cursor as the diviner's wand.** When idle, the cursor is hidden and replaced by a small (12px) cyan crosshair that floats with 0.18 lag. When the user holds the mouse still over a counter for 800ms, the counter "speaks" — a single line of *Cormorant Italic* prose fades in below it on Layer 2, written as if the device itself is annotating the reading. After 4s the line fades. Hold over a different counter to elicit a different annotation. The annotations form a small corpus of 11 lines; rereading them is part of the experience. **Strict animation budget — no parallax.** Scroll only adjusts `--depth` and `--scrollY`. There is no scroll-jacking, no scroll-snap, no parallax in the popular sense. The illusion of depth is camera-driven, not movement-driven. This is a deliberate counterpoint to the rest of the batch (parallax 80% used). **Soundlessness.** No audio. The site is designed to feel like a chapel — silent except for what the user brings. **Build instruction — DO NOT include:** - Hero CTA blocks ("Get Started", "Sign Up") - Pricing tables, comparison grids, stat-grids ("100K+ users") - Testimonial cards, logo walls, social-proof rows - Footer link forests - Cookie banners, modals, popovers - Hamburger menus, mega-menus - Anything that asks the user to *do more* — the entire piece asks the user to *receive less*. **Build instruction — DO include:** - One persistent reticle frame, one chronometer, one tally bar - Five depth-rooms (Striking → Reading → Diminishment → Hush → Snuffing) - Five down-counters, one per room, each ending at 1 - One candle, on Layer 5, for the entire experience - Eleven Cormorant-Italic annotations, summoned by hover-hold - Exactly one moment of total silence: in Room IV, for ~3s, all motion (flicker included) freezes. Then resumes. The end-state of the page (after Room V) is a black wall, no flame, the LLITTL wordmark in *Audiowide* at 0.4 opacity, and one final readout: `LL.001 / 1`. There is no "next page", no "back to top", no follow-up. The user has arrived at the small. ## Uniqueness Notes **Differentiators (eight specific choices that exist nowhere else in the batch):** 1. **Y2K-futurism rendered *dim* instead of glossy.** Y2K is overwhelmingly associated with chrome, bubbles, Frutiger gloss, and warm honeyed plastic (see GGOGGL.com, also y2k-futurism). LLITTL takes the same iconographic vocabulary — translucent stratified panels, CRT scanlines, pixel stars, tubular display type — and pulls saturation down to candlelight levels. This is the only Y2K-futurism site in the batch in the "votive" register rather than the "shopping mall" register. 2. **Counter-animate as a *descending* mechanism.** Almost every counter-animate pattern in web design counts *up* (stats, KPIs, "10,000+ customers"). LLITTL uses counter-animate exclusively to count *down*, ending at 1, never returning. This inverts the entire emotional arc of the pattern. 3. **The descending-Fibonacci ladder.** The five room counters run 144 → ... → 1 along the Fibonacci sequence in reverse. Small/quiet/finite is the design's literal subject; using a mathematically diminishing sequence makes that subject structural rather than thematic. 4. **Camera-driven depth, not scroll-driven parallax.** The illusion of motion comes from `perspective-origin` shifts and a single `--depth` CSS variable, not from translating layers along Y. With parallax used in 80% of the batch, this is a deliberate and visible departure. 5. **3% warm-color budget, enforced.** The candle flame's amber is the only warm color in the entire site, and it is constrained to ≤3% of pixel area at any given moment. Most ethereal-blue palettes drift into teal, lavender, or violet for variety. LLITTL refuses; the flame is the only chromatic event. 6. **Candle-flicker on a `steps(7)` keyframe with timed gutters.** Most candle-themed UI uses smooth opacity oscillation. LLITTL uses a 7-step jitter (correct phenomenology of real flame) and adds a 220ms full-gutter event every 11–17s. The flame *behaves* like an inhabitant, not a graphic. 7. **Authoritative tone delivered through *small* numbers.** The vast majority of "authoritative" sites lean on large statistics ("99.9% uptime", "$2B AUM"). LLITTL inverts: every readout is small (≤144, descending to 1), every prose annotation is one italic line. The authority comes from precision and restraint, not from scale. This pairing is rare. 8. **Layered-depth with seven coplanar vellum slabs and a literal candle on Layer 5.** Layered-depth is at 10% in the batch, and is usually realized as 2–3 cards stacked. LLITTL commits to seven distinct z-planes with a specific narrative role per layer (Wall, Star-Vellum, Liturgical Ledger, Counter Plinth, Glyph Plate, Candle, Reticle), and dedicates an entire layer to a single candle SVG. **Chosen seed (from assignment):** `aesthetic: y2k-futurism, layout: layered-depth, typography: retro-display, palette: ethereal-blue, patterns: counter-animate, imagery: neon-glow, motifs: candle-atmospheric, tone: authoritative` **Avoided patterns (per frequency analysis):** - **No photography** (90% saturated in batch) — every visual is CSS/SVG - **No conventional parallax** (80% saturated) — depth is camera-driven, not scroll-translated - **No full-bleed layout** (70% saturated) — content lives strictly on stratified vellum slabs with negative space around them - **No mono-only typography** (70% saturated) — mono is used *only* for counter readouts; the dominant voices are *Audiowide* (retro-display) and *Cormorant Italic* (honeyed serif), a pairing absent from the batch - **No gradient palette as decoration** (90% saturated) — gradients exist only inside the candle flame and the wall's radial highlight; they are diegetic, not stylistic - **No warm or muted base palette** (70% each) — the base is cold ethereal-blue, with warm color strictly rationed to the flame - **No hand-drawn imagery** (70% saturated) — all motifs are instrument-rendered (rings, reticles, scanlines, pixel stars)