# Design Language for layer-2.report ## Aesthetics and Tone layer-2.report is a **cyberpunk reliquary** — an opulent-grand telemetry chamber where rollup performance data is displayed as if it were the crown jewels of a 2087 megacorp. The site is presented not as a dashboard, but as a private vault tour: visitors descend through a deep parallax shaft, each strata revealing a different facet of the layer-2 ecosystem, treated with the reverence usually reserved for cathedral stained glass or a sovereign's regalia. The mood fuses two normally incompatible registers. On one axis: **cyberpunk** — wet asphalt blacks, signal-bleed magentas, the chromatic aberration of cracked HUDs, and the nervous flicker of failing CRTs in a back-alley clinic. On the other axis: **opulent-grand** — coffered ceilings rendered in voxel art, gilded data-frames, latin mottoes etched into circuit traces, the heaviness of a 19th-century bourse repurposed by an oligarch's AI. The collision is intentional. layer-2 rollups exist precisely at this fault line: bleeding-edge cryptographic engineering wearing the wardrobe of trustless wealth. **Inspiration touchstones:** - The throne room sequences in *Akira* (1988) and *Blade Runner 2049* (2049's "Wallace Headquarters" gold-light interior) - Refik Anadol's "data lemniscate" projection sculptures - The Codex Atlanticus, but rewritten by a quant trader in fluorescent paint pen - Beeple's everydays (the brutalist megastructure ones), restrained and monumentalized - A Versailles hall of mirrors retrofitted with ASIC miners **Tone modifiers:** ceremonial, slightly menacing, reverently nerdy. The site never shouts. It intones. Statements are rendered in handwritten script as if a courtier signed each block confirmation in fountain ink before transmitting it to the chain. The handwritten typography tier introduces a critical third element: a **human margin** scribbled across the cyberpunk machinery. Where the chrome and neon would otherwise feel sterile, looping ink notes — annotations, crossings-out, marginalia in cursive — humanize the vault. They imply a single keeper, an obsessive scribe-cryptographer who walks these halls at night, jotting observations onto the holograms. ## Layout Motifs and Structure **Primary layout: parallax-sections** descending through six distinct strata, each a full-viewport (100vh minimum) chamber. Total document height: roughly 700vh. Transition between strata is governed by depth (z-axis) rather than horizontal/vertical division — every section sits at a different `translateZ`, creating the sensation of falling through a vertical reliquary shaft. **The Six Strata (top to bottom):** 1. **The Antechamber (Stratum 0, 0–100vh):** Pitch black void (#05030A) with a single floating 3D crest — an octagonal sigil rotating slowly on the y-axis, rendered as concentric SVG rings with `filter: drop-shadow` neon halos in #FF2E88. Centered handwritten cursive: "layer-2.report — Thesaurus Rotuli." Subtitle in tech-mono: "the ledger of rollups, kept in trust." A single instruction in handwritten script descends with parallax: "scroll to enter the vault." 2. **The Index Hall (Stratum 1, 100–200vh):** Background shifts to oxidized indigo (#1A0F2E) with vertical light-shafts (CSS gradients at 70deg, opacity 0.18, animated). Six rollup names — Optimism, Arbitrum, Base, zkSync, Starknet, Linea — appear as floating 3D-rendered tablets at varying parallax depths (data-depth attributes from 0.1 to 0.8). Each tablet hovers at a slight rotation (rotateX(8deg) rotateY(-12deg)) with handwritten annotations crossing through them — "the elder," "the hare," "the merchant," "the proof-priest," etc. Hover-lift on each tablet: translateY(-12px) + scale(1.04) + glow-pulse over 280ms cubic-bezier(0.34, 1.56, 0.64, 1). 3. **The Throughput Cathedral (Stratum 2, 200–300vh):** Background deepens to absolute night (#0A0612). The signature stratum — a vaulted ceiling rendered as concentric CSS-only octagons receding into perspective (scale: 1.0, 0.78, 0.61, 0.48 …). Inside the vault, transactions-per-second figures are displayed not as numbers but as **golden ribbons** — long horizontal bars that flow across the screen, each ribbon's length proportional to TPS, its hue varying along the complementary axis (lemon-gilt #F5C518 vs. its complement, deep electric-violet #5118F5). Each ribbon carries a handwritten cursive caption swooping above it. The ceiling tessellates and tessellates, and it **never reveals where it stops** — the perspective grid recedes infinitely. 4. **The Treasury (Stratum 3, 300–400vh):** TVL data displayed as 3D-rendered ingots (CSS-cube technique, 6 faces per cube, perspective: 1400px). Each ingot sits in an alcove cut into a marbled wall (procedural CSS marble: layered conic-gradients with #1A0F2E, #2E1A0F, #6B5430). Ingots respond to hover-lift with a slow rotation (rotateY pause, then accelerate) revealing engraved chain-name on the back face. The narrative here is acquisition, hoarding, *thesaurus* — Latin for treasury, etched into the alcove lintels in display serif. 5. **The Oracle Loft (Stratum 4, 400–500vh):** A bridge stratum — gas-fee fluctuations rendered as a long, horizontal mountain range in the negative space, parallax-scrolling at 0.4x base speed. Behind it: an abstract-tech glyph wall, a procedurally generated field of geometric symbols (triangles, vesica piscis, linked octagons, circuit-trace squares) in 1px stroke #FF2E88 at low opacity. Handwritten captions act as "oracle whispers" — torn slips of paper drifting at parallax speeds 0.7x and 1.3x. Each whisper carries a single observation: "fees collapse on Sundays," "MEV peaks at the European open," "blob count rises with the moon." 6. **The Sealing Chamber (Stratum 5, 500–700vh):** The descent terminates in a dim, gold-leafed crypt. A massive 3D-rendered seal — an octagonal disc with concentric filigree, rendered via stacked SVGs at increasing `translateZ` — fills the viewport. Around it, the names of zk-proof systems (Plonk, Groth16, FRI, Halo2, Nova) orbit at varying parallax depths in handwritten serif. The very last thing visible: a single handwritten line in #F5C518 descending below the seal — "*the report closes; the chain endures.*" **Composition rule:** every section uses **z-depth choreography**. Six parallax layers per stratum: - Layer A (depth 0.0): static section background - Layer B (depth 0.15): atmospheric gradients - Layer C (depth 0.3): mid-ground 3D objects - Layer D (depth 0.55): foreground 3D objects - Layer E (depth 0.85): handwritten annotations (these move *faster* than the scroll, creating an ink-on-glass parallax) - Layer F (depth 1.0+): cursor-reactive overlay glyphs **Negative space rule:** every stratum reserves ~38% of its viewport as void. The opulent-grand register depends on **emptiness** — a vault feels more priceless when only one object floats inside it. ## Typography and Palette **Typography (3-tier hierarchy, all from Google Fonts):** - **Display / Ceremonial:** "Cinzel Decorative" (Google Fonts, weights 700 and 900) — the latin-inscribed-marble font that gives the site its imperial gravitas. Used at clamp(2.6rem, 7.2vw, 6.4rem) for stratum titles, letter-spacing: 0.14em, text-transform: uppercase. This font appears only on the chamber names ("Throughput Cathedral," "The Treasury," etc.) — no more than 8 instances across the whole document. Color: #F5C518 (lemon-gilt) on dark strata, #5118F5 only when inverted. - **Handwritten / Marginalia:** "Caveat" (Google Fonts, weights 400 and 700) — a relaxed, slightly hurried cursive that reads as fountain-pen marginalia. Used at clamp(1.05rem, 1.8vw, 1.5rem) for annotations, captions, and oracle whispers. Color: #E8DDC4 (cream-ink) on dark backgrounds, #FF2E88 (signal magenta) for emphasis. Critical detail: every Caveat block uses `transform: rotate(-1.2deg)` or `rotate(0.8deg)` — never perfectly horizontal. This is the **scribe** speaking through the machine. Caveat is also used for the body copy of oracle whispers and the closing line of each stratum. - **Tech-Mono / Telemetry:** "JetBrains Mono" (Google Fonts, weight 500) — for TPS values, addresses, hashes, and any literal datum. Used at clamp(0.78rem, 1.0vw, 0.96rem) with letter-spacing: 0.03em. Color #9C8AC4 (twilight-quartz) on dark backgrounds. The mono tier acts as the "machine voice" — flat, unemotional, factual — providing a deliberate contrast to the ceremonial Cinzel and the human Caveat. The triangular interplay (display ceremony + handwritten human margin + machine telemetry) is the typographic engine of the entire design. **Palette (complementary axis around violet/gold):** The palette is built on a true complementary pair — **deep electric-violet** (#5118F5) and its color-wheel opposite, **lemon-gilt** (#F5C518) — extended with a cyberpunk neon-magenta accent and a deep oxidized indigo substrate. | Role | Hex | Usage | |------|-----|-------| | Vault Black | #05030A | Body background, deepest strata | | Oxidized Indigo | #1A0F2E | Chamber backgrounds, alcove walls | | Cathedral Night | #0A0612 | Throughput stratum field | | Electric Violet | #5118F5 | Complementary anchor #1, accent halos | | Lemon Gilt | #F5C518 | Complementary anchor #2, ceremonial titles, gold ingots | | Signal Magenta | #FF2E88 | Cyberpunk emphasis, hover-lift glow | | Cream Ink | #E8DDC4 | Handwritten margin text | | Twilight Quartz | #9C8AC4 | Mono telemetry, secondary mono captions | The **complementary** tension between #5118F5 and #F5C518 is the visual heartbeat. They appear together only at moments of consequence — the rotating crest in the Antechamber, the seal in the Sealing Chamber, the handwritten ink crossing the throughput ribbons. Everywhere else, one dominates and the other recedes to <8% area. This restraint is what makes the violet/gold pairing read as opulent rather than carnival. ## Imagery and Motifs **No photography.** All imagery is either CSS/SVG procedural or 3D-render simulated through layered transforms. **Core Visual Motifs:** 1. **The Octagonal Sigil:** A recurring crest that appears at the start and end of the descent. Constructed from 8 concentric SVG octagons with stroke widths 1px, 2px, 3px, 1px, 2px (alternating to suggest chiselled depth). Each ring rotates at a slightly different speed (12s, 18s, 30s, 45s, 90s) creating a slow mandala drift. Inner core hosts a single rendered character — Λ² (Lambda squared, a layer-2 in-joke) — in Cinzel Decorative. The sigil is the site's heraldic device. 2. **3D-Rendered Ingots & Tablets:** Built using the stacked-element CSS technique — six divs per cube, each face transformed into position with rotate3d/translate3d. Faces use procedural marbling (layered conic-gradients with offsets at 12deg, 47deg, 132deg). Edges use 1px borders in #F5C518 at 35% opacity. On hover-lift, the ingot rises (translateY: -14px), tilts (rotateX: -6deg → -10deg), and the gold edges saturate to 80% opacity. This is the only photographic-feeling element on the page, and it is built entirely from divs. 3. **Latin Mottoes Etched in Circuit:** Around the perimeter of major sections, latin phrases are etched into a circuit-trace pattern. Example mottoes: "VERITAS IN BLOCKO," "PROBATIO ZERO," "ROTULUS AETERNUS," "MERKLE PROBAT OMNIA." Each is rendered as text with `text-shadow: 0 0 8px #5118F5` and surrounded by abstract-tech traces drawn in SVG (right-angled paths terminating in tiny squares, suggesting both blockchain Merkle trees and fictional megastructure floor-plans). The traces respond to cursor proximity by faintly illuminating in #FF2E88 at 220ms. 4. **Handwritten Marginalia Slips:** Throughout the descent, small pieces of paper drift at parallax speed. Each is a CSS rectangle with subtle `box-shadow: 2px 4px 0 rgba(255,46,136,0.12)` and a slight rotation (-2deg to +3deg). Caveat text fills them. Edges are deliberately torn — implemented with `clip-path` polygons of irregular vertices. These are the keeper's notes. 5. **Voxel Coffered Ceiling:** In the Throughput Cathedral, the ceiling is rendered as receding octagonal frames using nested transforms. Each frame is scaled and translated in z. The result is a CSS-only voxel coffer that recedes infinitely, creating the illusion of a vault that has no roof, only deeper repetitions. 6. **Glyph Constellations (Abstract-Tech Motif):** Backgrounds in the Oracle Loft feature a procedurally placed field of geometric symbols at varying scales (8px–28px), 1px stroke #5118F5 at 14% opacity. The glyph alphabet: triangle, inverted triangle, vesica piscis, linked octagon, hashed square, circle-with-bisector, double bar. They suggest both alchemical sigils and technical schematics — the abstract-tech motif rendered as occult engineering. 7. **CRT Bleed Flicker:** Sparingly applied. A `filter: brightness(1.04) contrast(1.02)` pulse runs once every 7–11 seconds (random) on the entire body, lasting 80ms. This is the only "glitch" in the system — the suggestion that even this opulent vault is a hologram run on aging hardware. It is the cyberpunk register's signature, deployed almost imperceptibly. 8. **Gold Leaf Decay:** In the Sealing Chamber, the gold (#F5C518) is overlaid with a procedural noise pattern via `mix-blend-mode: multiply` at 8% opacity, simulating gilt that has begun to flake. The decay is purely cosmetic; it tells the viewer that this vault is **old** even though its contents are minutes-fresh. ## Prompts for Implementation **Full-Screen Narrative Experience:** Build the site as a single uninterrupted descent through the six strata. Total document height ~700vh. The user's only interaction is scrolling — no navigation menu, no clickable links, no CTAs. The journey *is* the report. Implement with `position: sticky` strata that yield in sequence: each chamber holds the viewport for ~120vh of scroll while its parallax layers complete their choreography, then releases as the next stratum rises from below. **Parallax Engine:** Use a single `requestAnimationFrame` loop reading `window.scrollY`. For every layer with `data-depth`, set `transform: translate3d(0, var(--scrollY) * data-depth, 0) translateZ(layer-z)`. Layer A (background) uses depth 0 (static), Layer E (annotations) uses depth -0.15 (moves *up* faster than scroll, creating ink-on-glass effect). Use `will-change: transform` only on layers currently within ±200vh of the viewport — toggle dynamically to avoid GPU burnout. Ease the scrollY through a linear interpolation (lerp factor 0.12) so all parallax has a faintly elastic quality, as if the strata are floating in viscous oil. **3D Construction Without WebGL:** Every "rendered" element is built with `transform-style: preserve-3d`, `perspective: 1400px`, and stacked div faces. The octagonal sigil uses nested SVGs with individual `animation` rules (different rotation speeds per ring). The treasury ingots are 6-div cubes with per-face procedural marbling. The throughput ribbons are flat divs with `linear-gradient` along their length AND a perpendicular `radial-gradient` for highlight, producing a satin-fold appearance. Avoid any WebGL/Three.js — the entire site must run on CSS transforms + SVG only. **Handwritten Layer Choreography:** Caveat text blocks must always feel *added* by a human after the machine generated the chamber. Implement this by: - Setting initial opacity to 0 and `transform: rotate(-1.2deg) translateY(8px)`. - On scroll-into-view (IntersectionObserver, threshold 0.4), animate to opacity 1 with a *slight* delay relative to surrounding machine-text (300–600ms behind). - Use a path-draw effect for the underline beneath emphasized words — an SVG path with `stroke-dasharray` animating from 100% to 0% over 700ms, easing cubic-bezier(0.16, 1, 0.3, 1). - Never align Caveat to the grid. Always offset by 4–9px from any column edge it neighbors. **Hover-Lift Patterns:** Hover-lift is the only interaction. Apply it to: - Tablet name-cards in the Index Hall: translateY(-12px), scale(1.04), glow #FF2E88 at 0.6 opacity. - Treasury ingots: translateY(-14px), rotateX(-10deg), edge-saturation gold 35%→80%. - Oracle Loft whisper slips: translateY(-6px), rotate (rotation +1.2deg from current), shadow doubled. All hover-lifts run 280ms cubic-bezier(0.34, 1.56, 0.64, 1) — a gentle overshoot that feels weighted, expensive. Return-to-rest is 360ms ease-out. No hover-lift uses linear or pure ease. **Color Choreography:** The complementary pair (#5118F5 and #F5C518) must never both occupy >50% of any single viewport. Enforce by giving every stratum a *dominant* color and a *recessive* color. The tension creates the opulent register. The Antechamber: violet dominates, gold recedes (sigil core only). The Throughput Cathedral: gold dominates (ribbons), violet recedes (vault wall tint). The Treasury: gold dominates (ingots), violet only in alcove shadow. The Sealing Chamber: both at 50/50 — the climactic balance. **Storytelling Beats:** Each stratum delivers one sentence of narrative in handwritten Caveat, hidden in its corner. Read in order, the sentences form a poem: 1. (Antechamber) "you are descending into the rotuli." 2. (Index Hall) "six rollups, six chambers, six keepers." 3. (Throughput Cathedral) "they shovel transactions like coal into a sun." 4. (Treasury) "the gold here is real, even when the chain is folded." 5. (Oracle Loft) "every block has its weather; every weather has its scribe." 6. (Sealing Chamber) "the report closes. the chain endures. the keeper sleeps." This is the only "copy" beyond data. The user finds it by scrolling closely. **No CTAs, No Pricing, No Stat-Grids:** Layer-2.report is a contemplative read of the rollup ecosystem, not a product page. There must be: - No "Sign up" button. - No "Compare plans" table. - No tile-grid of features. - No KPI tickers in the header. - No social-share buttons. Data may appear (TPS values, TVL figures), but always *embedded inside the narrative architecture* — engraved on an ingot, written across a ribbon, etched into a marble alcove. Never inside a card. **JavaScript Restraint:** The entire site should run on: 1. The single rAF parallax loop. 2. One IntersectionObserver for handwritten reveals. 3. One mousemove listener for cursor-reactive overlay glyphs (Layer F, depth 1.0+). 4. One setInterval (7–11s random) for the CRT bleed flicker. Total JS: under 200 lines. The opulence comes from CSS, not from JS density. ## Uniqueness Notes **Differentiators:** 1. **Cyberpunk + Opulent-Grand collision:** Most cyberpunk designs in the corpus (only 8% use cyberpunk at all) lean into grime, clutter, anti-design, neon excess. This design takes cyberpunk's chromatic vocabulary and submerges it in the discipline of a sovereign treasury. The keeper of layer-2.report is not a hacker; the keeper is an oligarch's archivist with a fountain pen. This pairing — where opulent-grand (only 6% of designs) restrains cyberpunk — does not appear elsewhere in the 588 sites. Closest comparators (gabs.report's broadsheet authority, archetype.boo's dark academia) operate in adjacent but distinctly different registers. 2. **Handwritten as a *third voice* over machine and ceremony:** Most handwritten typographic designs (17%) use cursive as a primary or whimsical tier. Here, Caveat is a deliberately disruptive *third* layer over Cinzel Decorative (machine-grand) and JetBrains Mono (machine-flat). The handwritten layer is *the human* in a vault otherwise tended by automation. It is intentionally rotated, off-grid, and slightly belated. This three-voice typographic system (ceremony / handwriting / telemetry) is a uniqueness pillar. 3. **True complementary palette discipline:** Only 7% of designs use complementary palettes, and most of those use complementary in a casual sense. This design uses the strict color-wheel pair #5118F5 ↔ #F5C518 with a hard discipline: never both >50% in the same viewport, with a per-stratum dominance ratio. This makes the climactic 50/50 balance in the Sealing Chamber land with weight. 4. **Parallax-sections (8%) used as a vertical reliquary, not a horizontal showreel:** Most parallax-sections designs in the corpus are used for product narratives or marketing storytelling (problem → solution → CTA). Here, parallax serves a *contemplative descent metaphor* — the user falls through chambers as if they were strata of a vertical museum. Six chambers, no off-ramps. 5. **3D-render via CSS transforms only (no WebGL, no images):** While 3D-render appears in some designs, almost all rely on photography, pre-rendered 3D images, or WebGL. This site renders every "3D" object — sigils, ingots, tablets, voxel ceilings — using stacked divs with CSS `transform-style: preserve-3d`. The ingots are six-faced div-cubes with procedural marble. No raster images of any kind. 6. **Hover-lift (6%) as the *sole* interaction vocabulary:** No clicks, no expansions, no modals. The only thing the user does — beyond scrolling — is hover. And every hover triggers a *weighted lift*: a slow overshoot that suggests heavy gilded objects responding to attention. This single-interaction-vocabulary discipline reinforces the contemplative tone. 7. **Abstract-tech motifs as occult engineering:** The glyph alphabet (triangle, vesica piscis, linked octagon, hashed square) doubles as alchemical sigils. The latin mottoes ("VERITAS IN BLOCKO," "MERKLE PROBAT OMNIA") frame blockchain machinery as ceremonial machinery. This treats layer-2 not as a tech topic but as a contemporary mystery cult — a framing absent from the rest of the corpus. 8. **No CTAs, no pricing, no stat-grids:** Strict adherence to the contemplative-narrative bias. The site reports on layer-2 metrics without ever presenting them in conventional dashboard format — a deliberate refusal of the "cyberpunk data-viz dashboard" cliché. **Chosen seed:** aesthetic: cyberpunk, layout: parallax-sections, typography: handwritten, palette: complementary, patterns: hover-lift, imagery: 3d-render, motifs: abstract-tech, tone: opulent-grand. **Avoided patterns from frequency analysis:** - Avoided **gradient palette** (96% — overused) — the design uses solid color blocks with rare gradient highlights only on ribbons and sigil halos. - Avoided **mysterious-moody tone** (94% — overused) — the tone is opulent-grand, ceremonial-confident, not moody. - Avoided **mono typography** as primary (93% — overused) — JetBrains Mono is relegated to a tertiary telemetry role; primary display is Cinzel Decorative. - Avoided **counter-animate** (91% — overused) — no number tickers anywhere; data is engraved, not counted. - Avoided **centered layout** (92% — overused) — strata use asymmetric z-depth choreography with off-grid handwritten layers. - Avoided **corporate aesthetic** (92% — overused) — this site is the antithesis of corporate. - Avoided **photography imagery** (63% — overused) — zero raster images. - Avoided **warm palette** (90% — overused) — palette is cold-violet anchored, with gold as the *complementary* warm accent only. - Avoided **stat-grids and CTA-heavy layouts** per implementation prompt.