# Design Language for layer2.report ## Aesthetics and Tone **layer2.report** is conceived as **"The Aurora Bureau"** -- a fictitious nocturnal observatory that publishes whimsical dispatches about hidden infrastructures, the second-tier substrates of reality. The name is read as *"a report from the second layer"* -- the layer that runs underneath the obvious surface, where rollups of meaning, batched truths, and off-chain rumors quietly settle. The site presents itself as the polished, pearl-bound monthly bulletin of this imaginary bureau: equal parts **luxury-premium auction-house catalog** and **whimsical-creative astronomical zine**. The dominant atmosphere is a **midnight aurora** drifting behind a sheet of brushed pearl. Picture a Cartier vitrine left open in an empty atrium at 3 a.m.: smoked glass, soft beams of refracted color, hush. Now imagine that beneath the velvet tray, instead of jewelry, sits a tiny diorama of municipal pipes, signal towers, and folded paper boats -- and a curatorial card reads, in elegant capitals, "EXHIBIT 04: A RUMOR ABOUT BRIDGES." That tonal collision -- expensive hush meets storyteller's mischief -- is the entire mood. The site never raises its voice. It dims the room and speaks in long, italic asides. **Tonal pillars:** - **Luxury-premium** materiality: pearlescent sheen, cold platinum, soot black, vellum thickness, ample silence. Nothing is squeezed. Every element is given a wide marble plinth of negative space. - **Whimsical-creative** narrative: the dispatches are absurd small fictions ("A Field Note on the Migration of Reflections," "On the Ethics of Eavesdropping a Cloud"). Headlines are written like exhibit labels in a museum that doesn't quite exist. - **Mysterious calm**: aurora light moves so slowly it is almost imagined. The reader should feel they are the only person who has noticed the bureau is open tonight. ## Layout Motifs and Structure **Primary layout: diagonal-sections** rotated against a pearl spine. The page is composed of **seven diagonal "strata"** -- each one a full-bleed band tilted at exactly **-7 degrees** from horizontal, stacked like layered cake seen from the side. The diagonal is intentional: it mimics a *seismograph trace* and a *velvet ribbon* simultaneously, and it makes every section feel like it is gently *drifting downward off-screen* -- the eye descends along the slope rather than crossing flat shelves. **The Pearl Spine:** A single unbroken vertical line, **1px wide, color #E8E2D5**, runs down the exact center of the viewport from top to bottom across all strata. It is the only horizontal-relative element -- it stays straight while the diagonals slide past it. Tiny circular pearl markers (6px filled circles) sit on the spine where each stratum begins, like buttons on a couture coat. This spine is the bureau's "axis of record." **Stratum sequence (top to bottom):** 1. **Stratum I — The Masthead Aurora.** 100vh. The domain `layer2.report` is set in massive display caps, sliced cleanly in half by the diagonal seam between two duotone fields (deep midnight above, bruised plum below). An aurora ribbon drifts across the seam. 2. **Stratum II — The Standing Notice.** 60vh. A single italic editor's letter, set ragged-right, no more than 90 words. The diagonal here is reversed (+7°) so it visually answers Stratum I. 3. **Stratum III — Tonight's Dispatches.** 120vh. Three "exhibit cards" arranged on the diagonal as if pinned to a sloping velvet board, each with a numbered label (No. 04, No. 05, No. 06) and a single oversized abstract-shape glyph as its hero. 4. **Stratum IV — The Long Read.** 100vh. A narrow column of body prose (max 38ch) floats centered on the spine, while the background diagonal is filled with a soft blurred aurora gradient that intensifies as the reader scrolls into focus. 5. **Stratum V — The Index of Layers.** 80vh. A diagonal list of fictional "sub-layers" (Layer 2.1: Cached Lullabies; Layer 2.2: Postal Whispers; Layer 2.3: Reflective Paperwork...) each rendered as a single line of display type, staggered along the slope. 6. **Stratum VI — Footnotes from the Bureau.** 70vh. Tiny mono-set marginalia, set diagonally across the page like handwritten margin notes in an antique ledger. 7. **Stratum VII — The Colophon.** 50vh. Pearl-on-black engraved colophon: issue number, fictional masthead, date in Roman numerals, and a single circular aurora seal. **Composition rules:** - The diagonal seam between two adjacent strata is **always rendered as a hard, crisp duotone edge** -- never feathered. The crispness is the luxury signal. - Within each stratum, content is **anchored to one of three vertical lanes** (left ⅓, center spine, right ⅔). No element sits in two lanes. - Type is **never set on the diagonal itself** (no rotated text). Text always remains horizontal -- only the *backgrounds* and *dividers* tilt. This is the pact with the reader: the world is tilting, but the words remain steady. - A persistent **fixed top-left masthead glyph** (a small filled pearl circle inside an outlined oval, ~24px) anchors the reader. A persistent **fixed bottom-right "issue marker"** displays the current stratum number in tiny mono caps (e.g., `STRATUM IV / VII`). ## Typography and Palette **Typography (all from Google Fonts, display-bold direction):** - **Display / Domain / Stratum Titles:** **"Bricolage Grotesque"** (Google Fonts, variable, weight 800, optical size maxed). A contemporary display grotesque with playful contrast and slightly humanist proportions -- exactly the mix of *premium* and *whimsical* the site needs. Used at clamp(3rem, 11vw, 9.5rem). Tracking: -0.04em. Always uppercase for stratum titles, mixed case for the masthead. Color: Pearl Bone (#E8E2D5) on dark, Soot Black (#0A0A14) on light. - **Sub-display / Exhibit Labels:** **"Fraunces"** (Google Fonts, weight 600, opsz 144, SOFT 100). A soft-edged contemporary serif with optical-size flair. Used at clamp(1.4rem, 2.6vw, 2.1rem) for "Exhibit No. 04 / Tonight's Dispatch / Field Notes" labels, always in small caps with letter-spacing 0.18em. Color: Aurora Plum (#7A4E8C). - **Body / Long-form prose:** **"Fraunces"** at weight 400, opsz 14, SOFT 100, italic for the editor's letter and roman for the long read. Set at 1.05rem with line-height 1.65. Max measure 38ch. Ragged-right. Color: Pearl Bone (#E8E2D5) at 88% opacity. - **Marginalia / Mono accents:** **"JetBrains Mono"** (Google Fonts, weight 400). Used only for issue numbers, footnote markers, the bottom-right stratum indicator, and the colophon. Tiny: 0.72rem. Letter-spacing 0.08em. Uppercase. Color: Aurora Teal (#3FB8B0) at 70% opacity. **Palette (duotone-led, with aurora accents):** The base contract is a **strict duotone**: every stratum is either *Midnight-on-Pearl* or *Pearl-on-Midnight*. The aurora colors are **accents only**, never base fields, and they appear exclusively as gradients, glows, or single-line strokes. Core duotone: - **Soot Black:** `#0A0A14` -- the midnight base. Almost black, with a faint blue undertone so it never reads as flat ink. - **Pearl Bone:** `#E8E2D5` -- the warm-cool pearl, slightly yellower than paper, slightly cooler than cream. The "vellum" of the bureau. Aurora accents (used for ribbons, glows, blurred fields, single strokes): - **Aurora Plum:** `#7A4E8C` -- the violet shoulder of an aurora, used for the dominant gradient stop. - **Aurora Teal:** `#3FB8B0` -- the cyan-green core of the aurora; used for the brightest glow point and for mono accents. - **Aurora Magenta:** `#E25BA3` -- the rare warm flare; used sparingly, mostly as a single-pixel highlight on the pearl spine markers. Atmospheric tones (for blur layers and shadows only): - **Bruised Plum:** `#1F1230` -- secondary midnight for the lower duotone field, gives depth between strata. - **Platinum Mist:** `#C9C4B8` -- a desaturated pearl, used only inside blur-focus halos. All color usage obeys: **base = duotone, motion = aurora**. ## Imagery and Motifs The bureau is illustrated entirely with **abstract-shapes** rendered as inline SVG. There are no photographs and no representational illustrations whatsoever. The visual lexicon is sculptural and nocturnal. **Core visual motifs:** 1. **The Aurora Ribbon.** A broad, soft-edged SVG band, ~40vw wide and ~12vh tall, filled with a multi-stop gradient (Aurora Plum → Aurora Teal → Aurora Magenta at low alpha) and heavily blurred (`filter: blur(60px)`). It drifts horizontally across each stratum at an extremely slow rate (one full traversal every ~120 seconds). It is the only "moving weather" on the page. It crosses *behind* the pearl spine and *in front of* the diagonal seam, so it visually stitches the strata together. 2. **Exhibit Glyphs (the abstract-shapes set).** A family of seven hand-drawn SVG shapes that serve as hero icons for each exhibit/dispatch. They are not metaphorical -- they are designed to be unidentifiable. Each is built from 2–4 overlapping primitives (an oblong, a clipped arc, a sliced ellipse) rendered as flat duotone fills with a single 1px Aurora-Teal hairline. Examples: - "The Folded Wave" — two interlocking parabolas with one negative-space slice. - "The Off-Center Pearl" — a circle nested inside an offset oval, filled with the opposite duotone. - "The Slow Kite" — a quadrilateral whose corners have been gently displaced by Bezier handles. These glyphs are huge (clamp(180px, 22vw, 360px)) and sit *centered in their lane* on each exhibit card. 3. **The Pearl Spine and Buttons.** Already described in layout. The pearl buttons (6px circles) get a subtle radial highlight from the upper-left quadrant -- 1px of Aurora Magenta at 30% alpha -- to suggest a tiny refraction. This is the only place pure decorative shine appears. 4. **Diagonal Seam Hairlines.** Where two duotone fields meet at the -7° seam, a single 1px line of pure Pearl Bone is drawn along the seam, with a 6px Aurora-Teal blur trailing on the lower side. This produces the impression of a velvet ribbon catching aurora light along its underside. 5. **Numbered Roman Markers.** Each stratum is silently marked with a giant Roman numeral (I — VII) in a 50% transparent Pearl Bone, sized at clamp(14rem, 30vw, 28rem), positioned in the right-third lane and clipped by the diagonal seam so half is in midnight and half is in pearl. It functions as an architectural watermark. 6. **The Bureau Seal.** A circular SVG composition for the colophon: a perfect circle of Pearl Bone stroke (1.5px), inside which an off-center smaller circle is filled with the aurora gradient and blurred slightly. Around the outer ring, "AURORA BUREAU · LAYER II · MMXXVI" in JetBrains Mono caps follows the path. It is the only element that uses textPath. 7. **Footnote Asterisks.** A tiny custom asterisk glyph (six radiating teardrops around a pearl center) marks every footnote and every diagonal divider's midpoint. It is a quiet, repeated whimsy. There are no buttons, no rounded rectangles, no cards-with-shadows, and no stock UI components. ## Prompts for Implementation **The site is a single, scroll-driven nocturnal broadside. Build it as one HTML page with the seven strata and treat scrolling itself as the central narrative device.** **Diagonal sections (CSS):** Each stratum is a `
` with `clip-path: polygon(...)` cut at -7° (alternating direction for some strata to create the seismograph rhythm). The duotone background of each section is set with a CSS `linear-gradient(-83deg, #0A0A14 50%, #E8E2D5 50%)` -- a two-stop hard gradient gives a perfectly crisp diagonal without needing SVG. Adjacent sections share their seam color so the diagonal reads as a continuous folded ribbon. **Pearl spine:** A single fixed `
` with `position: fixed; left: 50%; top: 0; bottom: 0; width: 1px; background: #E8E2D5; opacity: 0.55;` overlays the entire page above z-index everything except the masthead and the issue marker. **Aurora ribbon (the signature motion):** Implement as a single SVG with three radial-gradient ellipses (Plum, Teal, Magenta) inside one ``, with `filter: url(#auroraBlur)` where the filter is ``. Animate the group's `translateX` from `-30vw` to `130vw` over 120s linear infinite. Add a subtle vertical sine via a second 18s ease-in-out animation on translateY of ±20px so it breathes. Use `mix-blend-mode: screen` on dark strata, `multiply` on pearl strata -- the same ribbon should look completely different on each duotone field. **blur-focus storytelling:** As the reader scrolls into Stratum IV (The Long Read), apply an IntersectionObserver that animates `backdrop-filter: blur(24px) → blur(0px)` on the aurora layer behind the prose, and simultaneously eases the prose's color from 30% Pearl Bone to 100% Pearl Bone over the first 600px of intersection. The effect: the aurora was a fog, the words emerge through it. Reverse on exit. Apply the same blur-focus principle to exhibit glyphs in Stratum III: each glyph starts at `filter: blur(18px)` and resolves to `blur(0px)` only when its card is centered in the viewport. The glyph never resolves until the reader is actually looking at it. **Stratum-snap descent:** Use `scroll-snap-type: y proximity` (not mandatory -- mandatory feels punishing for a luxurious experience). Each stratum gets `scroll-snap-align: start`. The reader can drift between strata without being forced to a hard click. **The diagonal seam hairline glow:** Implement the seam as an absolutely-positioned 1px-tall element rotated -7° at the boundary, with a `box-shadow: 0 6px 12px -2px rgba(63, 184, 176, 0.4)` that gives the trailing aurora blur on the lower side. **Roman numeral watermarks:** Render with a custom SVG `` matching the diagonal seam so each numeral is half-soot, half-pearl exactly along the -7° angle. This is a *static* effect -- do not animate the numerals. **The exhibit card interaction:** Hovering an exhibit glyph causes (a) the glyph to gently rotate by 3° and scale to 1.04, (b) the surrounding aurora ribbon to pulse one extra Magenta stop within 800ms, (c) a single italic Fraunces caption to fade in 200ms below the glyph. Cursor is a small custom Pearl Bone circle (8px) with an Aurora-Teal trailing dot offset by 4px -- think *aurora chasing the cursor*. **Storytelling, not selling:** The site has no pricing, no signup, no CTAs, no stat-grids, no feature cards, no logos-of-customers, no FAQ accordions. It is a *bulletin*. The only interactive elements are: the seven exhibit glyphs (each opens a modal-as-vellum-page with a 200-word fictional dispatch), and a single footer link "Subscribe to the Bureau (by post)" that opens a `mailto:` with a pre-written whimsical request. That is the entire conversion surface. **Type loading:** Inline-link Bricolage Grotesque (variable), Fraunces (variable, with opsz and SOFT axes), and JetBrains Mono from Google Fonts. Use `font-display: swap` and serve a system-serif fallback so the editor's letter never reflows mid-aurora. **Reduced motion:** If `prefers-reduced-motion: reduce`, freeze the aurora ribbon at its midpoint and disable all blur-focus transitions -- show everything in its resolved state. The duotone diagonals and the pearl spine remain unchanged. The site must remain beautiful in stillness; motion is decoration, not skeleton. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **Strict duotone discipline + aurora-only accent rule.** Only 6% of designs use a duotone palette and 0% use aurora-lights as a motif. layer2.report combines both with a hard rule: every base field is one of two colors (Soot Black or Pearl Bone), and aurora hues *never* fill a region -- they only appear as blurred gradients, single hairlines, or 1px highlights. This produces a visual signature that no other site in the portfolio can have. 2. **Diagonal sections that tilt the world but not the words.** While 15% of designs use diagonal-sections, this design isolates the diagonal *strictly to backgrounds, seams, and watermarks* -- text remains horizontal. The reader feels the tilt as atmosphere, not as legibility cost. The -7° angle is held ruthlessly across all seven strata. 3. **Luxury-premium without gold-black-luxury.** Only 1% of designs are luxury-premium and 7% use the gold-black-luxury palette. This site is luxury-premium with **no gold whatsoever** -- pearl and aurora replace the genre's reflexive gilt. The luxury signal is carried by silence, crispness of seams, and pearl-spine precision. 4. **Whimsical-creative tone fused with luxury materiality.** Whimsy (7%) usually arrives via candy palettes or playful illustration; here it arrives only through *language* and *labels* (e.g., "Exhibit No. 04: A Rumor About Bridges"). The visual register stays austere while the writing winks. This tonal split is the central trick of the entire identity. 5. **Abstract-shapes as the entire imagery system.** No photography (vs. 63% portfolio average), no line illustration, no 3D. Only seven hand-built SVG glyphs, each intentionally unrecognizable, each functioning as a signed exhibit object. The site is essentially a gallery of seven abstract-shape sculptures hung on diagonal velvet. 6. **blur-focus as narrative gate.** While 9% of designs use blur-focus, this design uses it as the actual reading mechanism: prose and glyphs *literally do not resolve* until the reader is centered on them. The aurora is a veil; the act of focusing parts it. Reading becomes ceremonial. 7. **Display-bold via Bricolage Grotesque variable.** Only 2% of designs use display-bold typography. Bricolage Grotesque is rare in this portfolio and its slightly humanist quirks pair with Fraunces's optical-size axis to yield a typographic personality (premium-but-mischievous) that other display-bold sites (which tend toward Bebas/anvil-flat) cannot reach. **Avoided patterns from frequency analysis:** This design deliberately avoids the dominant aesthetics (corporate 92%, hand-drawn 23%), the dominant palette traits (warm 90%, gradient 96% in the *flat-fill* sense -- here gradients exist only as blurred aurora, never as section fills), the dominant tone (mysterious-moody 94% — replaced by mysterious-*calm*-whimsical), the dominant typography (mono 93% — used only as marginalia, never as display), the dominant layout (centered 92% — replaced by diagonal lanes against a single spine), and the dominant motion vocabulary (counter-animate 91%, parallax 68% — replaced by a single ribbon and intersection-driven blur-focus). **Chosen seed (from assignment):** aesthetic: luxury-premium · layout: diagonal-sections · typography: display-bold · palette: duotone · patterns: blur-focus · imagery: abstract-shapes · motifs: aurora-lights · tone: whimsical-creative.