# Design Language for layer2.report ## Aesthetics and Tone layer2.report is **a coral reef rendered as a data terminal** — the conceit is that the second layer of a blockchain is, quite literally, a *second layer of the ocean*: the warm, shallow, sun-soaked shelf above the cold abyssal trench of Layer 1, where the water teems with life because that's where the activity actually is. The site stages a maximalist, whimsical-creative collision: a honeycomb of hexagonal cells, every cell a tidepool of mainnet data, the whole thing washed in **earth-tones the color of a low-tide reef flat** — wet ochre sand, sun-bleached driftwood, kelp-brown, the rust of an old anchor chain, the bone-cream of cuttlebone. And swimming *through* the lattice, in and out of the data cells like they own the place, a school of **tropical fish** — clownfish, tangs, parrotfish, wrasse — rendered as hand-drawn SVG sprites that follow the cursor, nibble at the numbers, and dart away when you click. The tone is **whimsical-creative** (7% in the frequency analysis — uncommon enough to claim) but never silly: the fish are the *narrators*, not the joke. A blue tang named **TVL** explains Total Value Locked by getting visibly fatter as the number grows. A pufferfish called **GAS** inflates when fees spike. A cleaner wrasse picks transaction-stuck "parasites" off the gills of a slow chain. The data is real-feeling, granular, and respected; the delivery is a reef documentary narrated by the reef itself. Think *Blue Planet* if David Attenborough were explaining optimistic rollups, drawn by someone who loves Eric Carle's tissue-paper collages and reads Etherscan for fun. This is **maximalist** (only 6% in the corpus): every hexagonal cell is FULL — gradient meshes, micro-charts, fish, kelp fronds, sand-texture, hand-lettered labels, tiny barnacle bullet points. There is no negative space; there is only *more reef*. But the maximalism is **organized by the honeycomb**, so it never tips into chaos — it's a maximalism of *abundance*, like a healthy reef, not a maximalism of *noise*. ## Layout Motifs and Structure The entire site is a **hexagonal-honeycomb** lattice (3% in the frequency analysis — genuinely rare). Not "hexagonal accents on a normal grid" — the *page itself* is a honeycomb. Every content unit is a pointy-top hexagon (`clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`), and hexagons tessellate edge-to-edge in offset rows, the way real honeycomb does. CSS does this with a flex/grid hybrid: rows of hexes, every other row shifted by half a hex-width and pulled up by ~25% of hex-height so the points interlock. **The reef has six tiers, scrolled vertically, each tier a band of honeycomb:** 1. **The Shelf (intro band).** One enormous hero-hexagon, ~70vw across, holding the wordmark `layer2.report` hand-lettered along its top edge, with smaller hexagons orbiting it like cleaner fish around a grouper. The big hex contains a slow gradient-mesh of shallow-water light (caustics). Fish enter from the left margin. 2. **The Census (the L2 roster).** A dense honeycomb where each hexagon is **one rollup / one L2 chain** — a tidepool. Inside each: a hand-drawn coral-colony icon unique to that chain (a brain coral, a staghorn, an anemone, a sea fan), a sparkline of activity drawn as a kelp frond swaying, and three barnacle-bullet stats. ~20-30 hexes, honeycomb-packed. Hover lifts the hex (see Patterns) and a fish swims into it. 3. **The Current (how rollups work).** A horizontal river of hexagons reading left-to-right — a single chain of cells showing the lifecycle of a transaction: *submitted → sequenced → batched → posted to L1 → finalized*. Each hex is a "station" the transaction-fish swims through. The fish visibly changes (gains a "confirmed" badge, a little checkmark scale) at each station. 4. **The Trench (the L1 below).** A deliberately *darker, colder* band — the earth-tones shift to deep umber and anchor-rust, the hexagons are larger and sparser, the light from above filters down in caustic shafts. This is "the settlement layer." A few deep-sea fish (lanternfish, a single anglerfish whose lure is a glowing block-hash) move slowly. This band is the contrast that makes the warm bands feel warm. 5. **The Reef Crest (comparisons, data-viz dense).** The most maximalist band: a wide honeycomb where adjacent hexagons share edges to form **composite charts** — six hexes together make a radar chart, a horizontal strip of hexes makes a stacked-area chart, a spiral of hexes makes a sunburst. The data-viz lives *inside the honeycomb geometry*, not on top of it. Fish school densely here; this is the productive reef. 6. **The Tidemark (closing band).** The honeycomb thins as the "tide goes out" — hexagons drain of color from the bottom up, the fish retreat to the margins, and the final hexagon holds a single hand-lettered line and a small drawing of the reef at rest. No CTA, no signup, no pricing — the tide simply ebbs and the documentary ends. **Spatial rules:** - Hexagons NEVER have square corners anywhere on the page. Even buttons, image frames, the cursor-tooltip, and inline tags are hexagonal. - The honeycomb is the only grid. There is no fallback 12-column system underneath it. - Fish travel along **bézier paths that thread between hexagons** (through the diamond-shaped negative slivers where six hexes meet) — they're "swimming through the gaps in the reef." - On mobile, the honeycomb narrows to a single column of stacked hexagons (a vertical "stack of cells"), and the fish swim in a narrow lane down the right margin. ## Typography and Palette **Fonts — Google Fonts only. The seed is `rounded-sans` (4% — uncommon); the whole type system is soft-cornered to echo the rounded honeycomb cells and the bulbous fish.** - **Display, wordmark & hex-titles — *Fredoka* (variable, weight 300–700, plus the wide width axis).** Fredoka is the workhorse: rounded terminals, friendly, slightly inflated counters that look like little bubbles. Used at 300–700 for all hexagon titles, the `layer2.report` wordmark (set wide, weight 600, gently arced along the top hex edge via SVG `textPath`), tier headers, and big numbers. At its widest width axis it gets that "puffer-fish-just-ate" plumpness — used for stat values that animate (TVL, gas, throughput). - **Body & data labels — *Quicksand* (weight 400–600).** Quicksand pairs with Fredoka as the calmer rounded-sans for paragraph text, barnacle-bullet stats, fish-name captions, and axis labels on the data-viz. Its rounded geometry keeps the body text in the same family of forms as the headings without competing. - **Hand-lettered accents — *Caveat* (weight 400–700).** Used sparingly for the "narrator" voice — the fish's spoken lines, hand-drawn annotations pointing at chart features ("← this dip is the upgrade fork"), the closing line, and the little signature-style labels on the coral-colony icons. Caveat is the marker-pen scrawl on the aquarium glass. - **Numeric tabular data — *Fredoka* with `font-variant-numeric: tabular-nums`** for any column of figures so the digits line up in the hexagon cells. No separate monospace — keeping mono OUT is deliberate (94% of the corpus uses mono; this reef has none). **Palette — `earth-tones` (only 3% in the frequency analysis). A low-tide reef-flat palette: warm, sandy, rusty, bone — NOT the typical crypto neon-on-black, and NOT the typical ocean-blue either. The "ocean" here is read through warm earth.** - `#E8D5B0` — **Shelf Sand**. The dominant background — warm, wet, low-tide ochre sand. ~35% of pixel area. - `#C9A876` — **Driftwood**. Mid-tone for hexagon fills, sun-bleached wood and dry coral rubble. - `#8B6F47` — **Kelp Brown**. Darker hex fills, kelp fronds, the "depth" cells in the Census band. - `#A8472E` — **Anchor Rust**. The accent — corroded iron, the dark warm red that draws the eye to key numbers and the anglerfish lure. ~8% of pixel area. - `#D98C5F` — **Clownfish Clay**. The warm orange of the clownfish sprites and hover-lift highlights — earth-toned orange, terracotta, not safety-cone neon. - `#6B8E6B` — **Sea-Fan Sage**. The one cool note: muted sage-green for kelp, anemones, "alive/healthy chain" indicators. Desaturated so it reads as earth, not emerald. - `#3A2A1C` — **Trench Umber**. Near-black warm brown for the L1 "Trench" band background and all body text. ~12% of pixel area. - `#F4E9D4` — **Cuttlebone Cream**. The lightest tint — caustic light highlights, the bone-white of cuttlefish, text on the dark Trench band. - `#7BA0A8` — **Tidepool Teal** (used in <5% of area). A muted, dusty teal — the *only* place "water blue" appears, kept earthy and grey-shifted, reserved for the thin caustic-light shafts and a couple of cool fish. **Color behavior:** the honeycomb cells are filled with subtle gradient-meshes between two adjacent earth-tones (Sand→Driftwood, Driftwood→Kelp) so no cell is flat — this is part of the maximalism. The Trench band is the only place that inverts: dark Umber fields with Cream text and Rust accents. As you scroll into the Trench, the page background transitions Sand→Umber over ~50vh; scrolling back out, it warms back up. ## Imagery and Motifs **Everything is hand-drawn SVG. No photography (98% of the corpus uses photography — this reef has zero). No 3D renders. No stock illustration.** Every visual is a flat, slightly-textured, paper-cut-collage-feeling SVG, in the earth-tone palette, with a soft hand-wobble on the strokes (achieved with `filter: feTurbulence` displacement on a few path classes — sparingly). **The Tropical Fish (5% in the frequency analysis — `tropical-fish` motif claimed):** a cast of ~9 recurring fish sprites, each ~80-140px, each a named "narrator" tied to a metric or concept. They are simple flat shapes with one expressive eye, drawn in the warm palette (clownfish in Clownfish Clay + Cuttlebone Cream stripes, a yellow tang shifted toward ochre, a parrotfish in driftwood-and-rust mottling, a cleaner wrasse in sage-and-cream). They: - swim along bézier paths through the gaps in the honeycomb (`offsetPath`), - have a gentle tail-wag (a small `skewY` keyframe on the tail group), - follow the cursor at a lazy lag when it's near them (cursor-follow), then peel away, - "react" — the puffer GAS inflates on a fee-spike, the tang TVL fattens with locked value, fish scatter outward on click (a brief radial flee), and re-converge after. **The Hexagon-as-Tidepool:** every content hexagon is treated as a literal pool of water at low tide. It has: a thin "wet-rim" highlight on the inner top-left edge, a gradient-mesh "water" fill, occasional tiny SVG flotsam (a shell, a sea-grape, a bubble) settled in the bottom point, and — on the Census hexes — a unique **coral-colony icon** as the centerpiece: brain coral (concentric maze lines), staghorn (branching antlers), table coral (a flat disc on a stalk), sea fan (a lacy fan), anemone (a ring of waving tentacles). Each L2 chain gets its own coral species; the icon style is consistent so they read as a taxonomy. **Data-viz as reef structure (`data-viz` imagery — 8% in the corpus):** charts are not rectangles. Kelp-frond sparklines (a swaying vertical line whose curve *is* the time-series). Honeycomb-tiled radar charts (six hexes, each fill-height = one axis value). Barnacle bullet points (clusters of tiny rough circles, count = magnitude). Sand-ripple bar charts (horizontal ridges in the sand, length = value). Sunburst built from a spiral of progressively-rotated hexagons. Every chart obeys the earth-tone palette and the hexagonal/organic geometry — no default chart-library look anywhere. **Texture & decoration:** a faint paper-grain overlay on the whole page (low-opacity `feTurbulence`), so it feels like a printed reef chart. Hand-lettered annotation arrows (Caveat) pointing at chart features. Kelp fronds growing up from the bottom of bands, swaying on a slow sine. Caustic-light shafts (soft diagonal Cuttlebone-Cream gradients with low opacity) raking across each band, moving very slowly — the sun on the water. ## Prompts for Implementation Build layer2.report as **one HTML document, one CSS file, one JS module** — no SPA, no router, no framework. The page is a single vertical scroll through six honeycomb bands. Total scroll length ~620vh desktop, ~760vh mobile (the honeycomb-to-single-column reflow needs the room). **Core build notes:** - **The honeycomb is CSS.** Build hex rows as flex containers; clip each cell with the pointy-top `polygon()` clip-path; offset alternate rows with a half-width `margin-left` and a negative `margin-top` (~−25% of hex height) so points interlock. Hex width drives everything via a `--hex-w` custom property; bands set their own `--hex-w` (Trench band: bigger hexes, sparser). On `max-width: 760px`, switch `--honeycomb-mode` to `column` — hexes stack vertically, full-width, no offset. - **Fish system in JS.** Define ~9 fish as objects: `{name, sprite (inline SVG ), homeBand, path (an SVG threading the honeycomb gaps), speed, reactsTo}`. Animate position with the Web Animations API along `offsetPath`. Tail-wag is a separate infinite keyframe on the tail ``. Cursor proximity: if `dist(cursor, fish) < 180px`, ease the fish toward a point trailing the cursor by ~120px for ~1.2s, then resume its path. On `click` anywhere, all fish do a 400ms radial "flee" (translate outward from click point), then re-home with a spring ease. Keep it to ~9 fish max — a believable little school, not an aquarium-overload. - **Hover-lift (`hover-lift` — 13%, on the lower-used side; the seed's pattern).** On hovering any hexagon: `transform: translateY(-10px) scale(1.03)` with a soft drop-shadow blooming underneath (`0 18px 40px rgba(58,42,28,0.28)`), the wet-rim highlight brightening, and one nearby fish peeling off its path to swim *into* the lifted hex and circle once. Spring/elastic easing on the lift; ~280ms. Lifted hexes also nudge their honeycomb neighbors a few px outward (a tiny "ripple in the reef"), done by a CSS sibling rule, not JS. - **Storytelling, band by band:** 1. **The Shelf** — on load, the giant hero-hexagon fades up its caustic gradient-mesh; `layer2.report` hand-letters itself along the top hex edge via SVG `textPath` with a stroke-draw (path-draw-svg) reveal in Fredoka-wide; orbiting mini-hexes pop in with stagger; the first three fish swim in from the left margin. 2. **The Census** — hexagons of L2 chains tile in with a honeycomb stagger (cells appear in a spreading hex-ring order from the band center). Each shows its coral-colony icon (draw-on), a swaying kelp-frond sparkline, three barnacle-bullet stats. Hover = hover-lift + a fish visit. Numbers count up (counter-animate) once when the band scrolls into view. 3. **The Current** — the left-to-right hex chain. As the user scrolls, a single "transaction-fish" swims station to station; at each hex it gains a visible scale-badge (a tiny checkmark scale) and the hex it leaves dims slightly. The annotation arrows (Caveat) point at each station with a hand-lettered label. This is the explainer; let it be slow and legible. 4. **The Trench** — background transitions Sand→Trench Umber over ~50vh as you enter; hexes get bigger, sparser, colder (umber + rust). Caustic shafts from above are the only light. The anglerfish drifts in, its lure a slowly-pulsing block-hash glyph. One Caveat line explains "this is where it all finally settles." Then background warms back to Sand as you scroll out. 5. **The Reef Crest** — the maximalist payoff. Composite charts built from grouped hexes assemble on scroll: six hexes rise to different fill-heights to form a radar chart; a strip of hexes stacks into an area chart; a hex-spiral unfurls into a sunburst. Fish school densely here. Everything animates in on scroll-trigger with stagger; let it feel *abundant* — many small things moving, all in earth-tones, all hexagonal. 6. **The Tidemark** — "the tide goes out": hexagons drain color from the bottom point upward (a gradient-stop animation), fish retreat to the margins one by one, the honeycomb thins, and the last hexagon holds a single Caveat line and a tiny drawing of the reef at low-tide rest. No CTA. No pricing block. No stat grid as a "section." No email capture. No testimonial row. The documentary just ends on the ebb. - **Motion budget:** kelp sways (slow sine, ~6s), caustic shafts drift (~14s), fish wander continuously, tail-wags loop, and scroll drives band transitions + chart assembly + the transaction-fish's journey. Hover-lift on hexes. Click scatters fish. Respect `prefers-reduced-motion` by freezing fish on their paths mid-frame, stilling the kelp and caustics, and making band transitions instant — but keep the honeycomb and the static reef art fully intact. - **AVOID:** CTA-heavy layouts, pricing tables, "stat grid" sections (data lives *inside* honeycomb cells, never in a 4-up KPI strip), testimonial carousels, contact forms, signup bars, hero-with-button patterns. This is a narrative reef walk, not a SaaS landing page. ## Uniqueness Notes Differentiators from the other designs in the registry, each a deliberate move against the frequency analysis: 1. **Earth-toned ocean.** The corpus's nautical/ocean designs default to blues, teals, and frosted glass. layer2.report renders "Layer 2 = the shallow warm layer of the sea" entirely through **earth-tones** (3% in the palette frequency) — wet sand ochre, driftwood, anchor rust, kelp brown, cuttlebone cream — with literally one dusty teal allowed in under 5% of the area. A reef seen at low tide, on a printed chart, not underwater. 2. **The page IS a honeycomb.** Not hexagonal accents — the entire layout is an interlocking pointy-top hex lattice (`hexagonal-honeycomb`, 3% in the layout frequency), with no square corners anywhere, no fallback 12-column grid beneath it, and fish that swim through the diamond-shaped gaps where six hexes meet. Charts are built *out of grouped hexagons* rather than drawn on rectangles. 3. **Fish as narrators, not decoration.** `tropical-fish` is 5% in the motif frequency and where it appears it's usually ambient background sprites. Here the ~9 fish are *named, metric-bound characters* — the puffer GAS that inflates on fee spikes, the tang TVL that fattens with locked value, the cleaner wrasse that picks "stuck transactions" off a slow chain — they carry the explanation. The data is delivered by the reef, in the reef's voice. 4. **Maximalism organized by geometry.** `maximalist` (6%) usually reads as chaos; here every cell is overstuffed (gradient-meshes, micro-charts, fish, kelp, flotsam, hand-lettering) but the honeycomb lattice *contains* it, so it's a maximalism of *abundance* (a healthy reef) rather than noise. The dark "Trench" band exists purely as the cold-umber contrast that makes the warm bands feel sun-soaked. 5. **No mono, no photography, no CTA.** Against a corpus that is 94% monospace-typography, 98% photography, and heavily CTA/pricing/stat-grid-driven: this site uses only rounded-sans (Fredoka / Quicksand / Caveat), only hand-drawn earth-tone SVG, and ends on an ebbing tide instead of a conversion ask. **Chosen seed/style:** `aesthetic: maximalist, layout: hexagonal-honeycomb, typography: rounded-sans, palette: earth-tones, patterns: hover-lift, imagery: data-viz, motifs: tropical-fish, tone: whimsical-creative` **Avoided patterns from the frequency analysis:** photography (98%), mono typography (94%), parallax-as-default and cursor-follow-as-default treated as background noise (96% / 89% — cursor-follow is reused here but *only* as fish behavior, not a generic hover gimmick), card-grid (88%, replaced entirely by the honeycomb), centered (86%), warm+gradient generic palette (98% / 97% — gradients survive only as in-cell earth-tone meshes), hand-drawn-as-aesthetic-default (97% — hand-drawn execution is used, but the *aesthetic* is maximalist, not the generic "hand-drawn" bucket), and the entire CTA / pricing-block / stat-grid landing-page vocabulary.