# Design Language for layer-2.report ## Aesthetics and Tone layer-2.report is staged as **the field notebook of a strata-reader** — someone whose job is to press their ear against a sheet of frosted ice and report, in plain unvarnished language, what is moving underneath the *second layer down*. The domain string is read literally: there is a Layer 1 (the surface you see) and a **Layer 2** (the one this site is about), and the entire experience is the act of looking *through* the first to read the second. Where a typical "L2" site would lean crypto-dashboard slick, this one refuses the polish: the prose is **raw-authentic** — terse, first-person, occasionally uncertain ("I think the throughput dropped here. I'm not sure why."), the voice of a working observer filing a report nobody asked for, not a marketing department. The visual contradiction that powers everything: **glassmorphism rendered with a documentary's honesty.** The frosted panes are real glass — scratched, fingerprinted, slightly warped at the edges where the bevel catches light wrong — not the pristine Apple-keynote blur. Behind every pane sits a **second layer**: a live, faintly-throbbing field of data-viz (sparklines, candle ghosts, sediment-strata bar columns, ripple-rings expanding from event points) that the glass softens but never fully hides. You read the report *and* you read the strata it describes, simultaneously, because the glass makes both legible at half-strength. The mood: **clinical curiosity meets honest fatigue.** Playfair Display sets the editorial headlines like a serious newspaper that has decided to be honest about how little it knows. The palette is **complementary** — a cold sub-ice blue locked against a warm sodium-lamp amber — because every reading on this site is a contrast measurement: what's cold (the established Layer 1) versus what's warm and moving (the Layer 2 underneath). ## Layout Motifs and Structure The page is **asymmetric** in the load-bearing sense — not "the hero image is off-center" but a genuine two-track composition that never resolves to symmetry: - **The Surface Track (left ~62% on desktop, top on mobile):** The report itself. Playfair headlines, raw body prose set in a humanist sans, hand-numbered section markers (§01 through §07), the occasional struck-through line where the observer changed their mind (real `` tags, kept visible — raw-authentic demands you see the edits). This track scrolls normally. - **The Layer-2 Track (right ~38%, a sticky vertical band):** A floating column of **frosted glass slabs**, each one a window onto the data underneath. As the Surface Track scrolls past a section, the corresponding glass slab in the Layer-2 Track *frosts up* (blur 2px → 14px) and a fresh data-viz reading slides in behind it: section §03 about latency surfaces a ripple-ring chart; §05 about volume surfaces a sediment-strata bar stack. The two tracks are deliberately mismatched in rhythm — the glass slabs are taller than the prose blocks, so they drift out of sync, which is the point: **the report and the reality it describes never line up perfectly.** The whole composition sits on a **geometric-shapes substrate**: a faint, large-scale arrangement of overlapping circles, hard-edged triangles, and a single 1px hairline grid that is *intentionally* 7° off true — tilted, like a survey grid laid over uneven ground. Sections are divided not by full-width rules but by **single offset geometric glyphs** — a hollow circle bisected by a vertical line (the "boundary between layers" mark), repeated at three sizes. Footer is a single line: the observer's initials, a timestamp, and the words "layer two, still moving." No links out. No nav bar — instead a slim **left-margin depth gauge**: a vertical scale marked 0m at top, descending, with a draggable bead that scrubs the page; the bead's position is reported live as "−14.2m" etc., reinforcing that scrolling = descending through layers. ## Typography and Palette **Typefaces — Google Fonts only, three families:** - **Playfair Display** (`Playfair Display`, weights 400/500/700/900, plus italic) — the **playfair-elegant** voice. Every section headline, every pull-quote, the masthead "LAYER · 2 · REPORT" lockup. Set large (clamp 2.4rem → 5.5rem on headlines), tight leading (1.02), generous tracking on the masthead only (`0.14em`). Its high-contrast Didone strokes are the "serious editorial" register the raw prose plays against. Headlines are set in the **cold blue** (#1B3A4B); pull-quotes in **amber** (#C97B2A). - **Inter** (`Inter`, weights 400/500/600) — the working-prose body face. Humanist, neutral, gets out of the way. Body copy at 1.0625rem / 1.62, color near-black-blue (#162028). Carries the raw-authentic register: the struck-out lines, the parenthetical doubts, the §-numbers. - **IBM Plex Mono** (`IBM Plex Mono`, weights 400/500) — the **data register**. Every number on the data-viz layer, every axis label, the depth-gauge readout ("−14.2m"), timestamps, the chart legends. Tabular figures only. Color: a desaturated steel (#5C7480) on the data layer, amber when a value is "live/moving." **Palette — complementary (cold blue ↔ warm amber), with a near-monochrome base so the two accents do all the work:** - `#0E1A1F` — **abyss** — the deepest background, the "looking far down" color. Used as the page base behind everything. - `#162028` — **ink** — primary text on light panes; near-black with a blue cast. - `#1B3A4B` — **sub-ice** — the cold complementary anchor; Playfair headlines, the cold-side data-viz strokes, the depth-gauge scale. - `#3E6E82` — **glacier** — mid blue; secondary chart lines, hover states on the cold side. - `#C97B2A` — **sodium** — the warm complementary accent; pull-quotes, "live" data values, the ripple-ring centers, the draggable depth bead. - `#E8A24C` — **lamp** — lighter amber; glow halos behind active data points, the warm-side strata bars. - `#D8DEE0` — **frost-white** — the glass pane surface tint (used at low alpha for the frosted slabs). - `#F4F2EC` — **paper** — the Surface Track reading background; a warm off-white like real notebook stock, not pure white. Glass slabs are `rgba(216, 222, 224, 0.14)` over the data layer, `backdrop-filter: blur(var(--frost))`, with a 1px inner border in `rgba(255,255,255,0.32)` on top/left and `rgba(27,58,75,0.18)` on bottom/right (the "warped bevel" — light catches it unevenly). ## Imagery and Motifs **No photography.** The entire visual vocabulary is **data-viz + geometric-shapes**, drawn live in SVG/Canvas: - **Ripple-rings** — the signature motif (the `ripple` pattern made literal). Every "event" in the Layer-2 data emits 3–4 concentric rings that expand outward and fade, drawn in sodium amber with a 0.5px stroke, starting from a point on the chart. On §03 (latency) the whole panel *is* ripple-rings: each spike in latency drops a stone, rings spread, overlap, interfere. Cursor-presence over the Layer-2 Track also drops a soft ripple at the pointer. - **Sediment-strata bars** — vertical stacked-bar columns where each segment is a "layer" of volume, drawn with hairline separators so they read like geological core samples. Used on §05. The bars build bottom-up with a slight elastic settle. - **Candle-ghosts** — faint, half-alpha candlestick silhouettes (no labels, no axes shown unless hovered) drifting behind the glass on the masthead and §02. They are *atmosphere*, not data you're meant to trade on — deliberately illegible-precise, legible-vague. - **Sparkline filings** — thin single-stroke lines, one per §-section, that draw themselves left-to-right (path-draw-svg) when the section enters; they look like seismograph traces. - **The boundary glyph** — a hollow circle bisected by a vertical line, the recurring "Layer 1 / Layer 2 divider." Appears as section breaks, as the bullet for list items, as the loading indicator (the vertical line sweeps around like a clock hand), and oversized + faint as a watermark behind the masthead. - **Geometric substrate** — overlapping outline circles (3–5, varying sizes, 1px stroke at 6% alpha), two or three hard-edged triangles wedged into corners, and the 7°-tilted hairline grid. Static, almost subliminal, the "survey paper" the report is written on. - **Edit marks** — struck-through text rendered with an actual hand-wobbly SVG strikethrough line (not CSS `line-through`), plus margin carets "(↑ revised)". Raw-authentic texture. ## Prompts for Implementation Build layer-2.report as **a single HTML document, one CSS file, one ES module — no framework, no router, no build step beyond an optional esbuild pass**. One continuous vertical scroll, roughly 600–700vh, seven §-sections plus masthead and footer. The visitor lands, descends, reads, leaves. **No links out, no second page.** **Storytelling is the spine.** The seven sections form one continuous field report by an unnamed observer, in order: 1. **§00 / Masthead — "LAYER · 2 · REPORT."** Full viewport. The masthead lockup in tracked Playfair, white-blue on the abyss base. Behind it: oversized faint boundary-glyph watermark, drifting candle-ghosts, and the 7°-tilted grid. A single raw line of prose: *"What follows is everything I could read through the ice. I have not cleaned it up."* The depth gauge in the left margin reads 0m. As you start to scroll, the masthead glass slab frosts and the first sparkline begins drawing. 2. **§01 — "The surface holds."** Establishes Layer 1: stable, cold, boring. Data layer shows a near-flat sub-ice-blue line. Glass is *lightly* frosted here (blur 2px) — you can almost see straight through. Prose is calm, declarative. 3. **§02 — "Something below it isn't."** First warm intrusion. Candle-ghosts start tinting amber at the edges. The asymmetry of the two tracks becomes obvious as the glass slab runs taller than the prose. A struck-out line: ~~"this might be nothing"~~ → "(it is not nothing)". 4. **§03 — "Latency, and what makes ripples."** The ripple-ring panel. Each latency spike drops a stone; rings spread and interfere. Cursor over the panel drops its own ripples. Prose gets terser, more uncertain. The depth gauge is around −18m. 5. **§04 — "Reading the strata."** Transition section — the boundary glyph appears at full size as a divider. Short. The observer explains their method in three blunt sentences. 6. **§05 — "Volume, in layers."** The sediment-strata bar columns build bottom-up with elastic settle, hairline separators between each volume "layer." Mono numbers in steel, the topmost (live) layer in amber. A pull-quote in amber Playfair italic. 7. **§06 — "Where it's still moving."** Climax. All motifs converge behind one wide glass slab at maximum frost (blur 14px) — ripple-rings, strata bars, sparklines, candle-ghosts all faintly visible at once, overlapping. The prose admits the limits: the observer can't see deeper than this. Depth gauge near bottom of scale. 8. **§07 / Footer — "layer two, still moving."** One line: observer initials · ISO timestamp · the phrase. The frost on the final slab slowly *un*-blurs over 4s as if you're about to see clearly — then the page ends. No CTA, no email capture, no pricing, no testimonials, no stats grid, no contact form, no logo wall, no newsletter, no chatbot, no cookie banner. **Motion & interaction:** - **Scroll = descent.** A single scroll-progress value drives: depth-gauge bead position + readout, per-section glass `--frost` blur amount, data-viz reveals (IntersectionObserver per §-section, staggered children). - **Ripple is the house animation.** Reuse one ripple function everywhere: section-enter emits one ripple from the §-glyph; clicks emit a ripple; cursor-move over the Layer-2 Track emits a soft trailing ripple. Rings: scale 0→3, opacity 0.4→0, 1.1s, ease-out, 0.5px amber stroke. - **Glass behavior:** each slab `backdrop-filter: blur(var(--frost))` animated via the section's scroll progress; bevel highlight (the `::before` top/left bright border) shifts a few px as the slab enters, like light catching a real warped pane. - **Data-viz draws itself:** sparklines via path-draw-svg (`stroke-dasharray` reveal), strata bars via elastic height transitions bottom-anchored, ripple-rings via Canvas (cheap for many concurrent rings), candle-ghosts via low-alpha SVG rects that gently breathe (±2% scale, 6s). - **The asymmetric drift:** the sticky Layer-2 Track is intentionally given a slightly different scroll rate (a small parallax offset, ~0.92×) so its slabs and the prose blocks never lock together. - **Edit marks animate in:** struck-through lines get their hand-wobbly SVG strike *drawn* (path-draw) the first time they enter, then the margin caret fades in 200ms later. - **Depth gauge is grabbable:** drag the bead to scrub the whole page; the readout updates live; releasing leaves a faint ripple at the bead. - **Reduced motion:** ripples become single static rings, candle-ghosts hold still, blur snaps instead of animating, sparklines appear fully drawn. Keep it framework-free, keep the prose genuinely terse and self-doubting, keep the glass *imperfect*. Bias every decision toward "a working observer's honest report," never toward "product landing page." ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Glassmorphism as a *documentary* device, not a *polish* device.** The 71%-overused glassmorphism convention is almost always pristine, decorative, Apple-keynote frost. Here the glass is the literal narrative mechanism — you are *reading through layers* — and it is rendered deliberately imperfect (warped bevels, uneven highlights, fingerprint smudge texture). The frost amount is *information* (driven by scroll-as-descent), not styling. No other site in the cohort makes the blur value a data channel. 2. **A genuinely two-track asymmetric layout that never resolves.** Not "off-center hero" asymmetry — a permanent Surface Track / Layer-2 Track split with deliberately mismatched scroll rhythms, so the report and the data it describes drift out of sync by design. The asymmetry is thematic (report ≠ reality), not just compositional. 3. **Raw-authentic voice + Playfair-elegant headlines is a deliberate register clash.** raw-authentic tone sits at 3%, playfair-elegant typography at 2% — and pairing a self-doubting, struck-out, first-person field-notebook voice *under* serious Didone newspaper headlines is the signature contradiction here. Most Playfair sites are luxury/editorial confident; this one is honest and tired. 4. **"Layer 2" read literally as physical strata, not crypto.** The domain begs for a rollup-dashboard treatment; this design refuses it entirely — descent through ice, sediment cores, depth gauges in meters. The complementary cold-blue/warm-amber palette is justified diegetically (every reading is a cold-vs-moving contrast measurement), not chosen for vibes. 5. **One ripple function does all interaction work** — section entrances, clicks, cursor presence, depth-bead release — making `ripple` (14%, mid-pack) the unifying motion grammar rather than the usual parallax/cursor-follow/spring stack (96%/89%/86% — all present but subordinate here). Chosen seed: *aesthetic: glassmorphism, layout: asymmetric, typography: playfair-elegant, palette: complementary, patterns: ripple, imagery: data-viz, motifs: geometric-shapes, tone: raw-authentic* Avoided per frequency analysis: no photography (98%), no card-grid (88%), no centered layout (86%) as the primary structure, no warm-gradient default palette (97%/98%) — kept to a complementary two-accent scheme over a near-mono base; hand-drawn aesthetic (97%) avoided entirely. Parallax/cursor-follow/spring are used only in service of the ripple grammar, not as the headline interactions.