# Design Language for layer-2.id ## Aesthetics and Tone layer-2.id is staged as **a coastal naturalist's tide-pool field journal that has been laminated onto the glossy aqua-glass of a 2007 operating-system desktop** — a Frutiger-Aero lagoon, but one annotated in the patient, lightly-witty hand of a Baskerville-set marginalia writer. The conceit reads on three registers, all true at once: 1. **"Layer-2" as a second stratum of a coastal ecosystem.** Below the bedrock (Layer-1) there is the splash zone, the eelgrass shelf, the mangrove shallows — each a *layer two*, a thin lit world suspended above the dark substrate. The site is a sideways traverse through these strata: you scroll *across* the coast, not down it, the way you would walk a shoreline at low tide reading what each pool holds. 2. **"Layer-2" as the scaling layer.** `.id` is Indonesia — an archipelago, ten thousand islands, the natural home of a *layer that sits on top and moves fast*. The data-viz panels render this literally: throughput as tide-volume, finality as the moment a wave's foam settles, batch-rollup as a school of fish folding into one silhouette and back. The blockchain reading is present but it is *naturalized* — never a dashboard, always a lagoon. 3. **"Layer-2.id" as a layered identity.** Each card has a front (what the surface shows: a glossy bubble, a fern frond, a sky gradient) and a back (the cross-section: the chart, the root system, the species list). Identity here is two-faced in the gentlest possible way — the lacquered Aero shell, and the careful Baskerville annotation underneath. The mood is **whimsical-creative**: buoyant, a little playful, never twee. The Frutiger-Aero canon — wet bubbles, lens-flared aqua skies, lush over-saturated greens, glass buttons, the optimism of Windows Vista and the iPod nano and the Wii Channel menu — is treated with affection but disciplined by the Baskerville voice, which keeps the captions dry and exact ("*Note: the foam on the third pool resolves in 1.4 seconds; this is, by coastal standards, instantaneous.*"). Think: a David Attenborough script narrated over a screensaver from 2008. Glossy and verdant on the surface; quietly literate underneath. Nothing brutal, nothing dark, nothing cynical — but nothing saccharine either. A confident, sun-warmed, slightly amused calm. ## Layout Motifs and Structure The structural conceit is **horizontal-scroll** — a single continuous shoreline traversed left-to-right — executed as **nine "tide panels"**, each one full-viewport-height and roughly 118vw wide, abutting edge to edge so the coast is unbroken. The page is one `
` with `overflow-x` driving a CSS scroll-snap track; vertical scroll-wheel and trackpad gestures are translated to horizontal travel. Total track width ≈ 1060vw. **The nine panels (the traverse):** 1. **The Bedrock Bar** (intro) — Layer-1, the dark wet substrate. A near-monochrome deep-teal panel, the only "still" panel. The domain `layer-2.id` rises out of it in large Baskerville, set against a faint horizon line. A single glass bubble floats up and out of frame to the right, leading the eye onward. 2. **The Splash Zone** — first lit layer. Aqua sky gradient, lens flare, three big glossy bubbles each a flippable card. 3. **The Eelgrass Shelf** — verticals of leaf-organic blades drifting in a parallax current; cards are blade-shaped (clip-path leaf silhouettes), flipping to reveal eelgrass-meadow data-viz. 4. **The Tide-Pool Cabinet** — a wall of small square Aero "desktop icon" cards, each a pool; click flips to a species census chart. 5. **The Foam Line** (the finality panel) — animated foam (SVG path-draw of receding water) settling; a stopwatch card flips to a latency histogram styled as tide-volume bars. 6. **The Mangrove Shallows** — root-system motifs below a glass waterline; cards are leaf-frond fronts / root-network backs. 7. **The Rollup School** — a shoal of fish-glyphs that periodically folds into a single fish-shaped silhouette (the "batch") then disperses; the card here flips to a throughput chart drawn as the shoal's density over time. 8. **The Archipelago Index** — a wide map-like panel, ten thousand islands as a scatter of glossy droplets; hovering a droplet lifts a Baskerville caption; the card flips to a "what is a layer-2" plain-language note. 9. **The Calm After** (outro) — the coast quiets to a single horizon, sun low, one last bubble drifting up. A short Baskerville colophon. The track ends; there is nothing past the horizon. **Spatial grammar within a panel:** each panel has (a) a **sky band** (top ~38vh: gradient + flare + bubbles), (b) a **waterline** (a glossy reflective strip with a 1px bright meniscus), (c) a **substrate band** (bottom ~32vh: the leaf/root/foam motif), and (d) **one to three flip-cards** floating at the waterline, half above / half below, so the reflection bisects them. Cards are never in a grid that fills the screen — they float, three at most, with generous water around them. A thin Baskerville **shore-rule** (a hairline with tick marks like a ruler laid along the sand) runs along the bottom of every panel, labelling the traverse in "metres of shoreline" — a quiet, witty progress indicator. No vertical card-grid. No bento. No hero-with-CTA. No pricing tier, no stat-grid block, no testimonial row. The composition is **immersive-scroll horizontal** first, everything else subordinate. ## Typography and Palette **Type stack — Google Fonts only, three families, assigned with field-journal discipline.** - **Libre Baskerville** (the voice of the site — "baskerville-refined"). Carries the domain title, every panel heading, every margin-note caption, the colophon. This is a *refined* Baskerville: high stroke contrast, generous x-height, the bracketed serifs and the teardrop terminals that make it read as 18th-century-but-clean. Set the H1 (`layer-2.id`) at clamp(52px, 7.6vw, 132px), weight 400, **letter-spacing −0.01em**, with the hyphen and the `.id` rendered in Baskerville *italic* at 0.78em so the domain reads as a phrase, not a string. Panel headings at clamp(30px, 4.2vw, 56px) regular. Captions and margin-notes at 16–18px italic, max-width 30ch, set ragged-right like a naturalist's pencil annotation, with a hanging first-line indent. **No bold Baskerville anywhere** — emphasis is carried by italic only, the way a field journal does it. - **Mulish** (the "frutiger-clean" support — humanist, low-contrast, slightly rounded, the spiritual descendant of Frutiger / Myriad that the whole Aero aesthetic was built on). Carries glass-button labels, the shore-rule tick numbers, axis labels on every chart, UI affordances ("flip", "← coast →"). Weights 400 and 600. This is the typeface that makes the surface feel like a 2007 desktop; it never appears in a sentence longer than five words. - **Spectral** (used once, for the colophon body in the final panel — a transitional serif with a touch more warmth than Baskerville, set at 19px/1.7, to give the closing paragraph a softer, dusk-lit tone than the crisp captions). Optional but recommended; if a third family is too much, the colophon may fall back to Libre Baskerville at a larger size. **Palette — "coastal-blend": layered coastal water + Aero gloss + a single warm sun accent. Eight values.** - `#0B3B45` — **abyssal teal**, the Layer-1 bedrock; deepest background, panel 1. - `#1C6E7D` — **shelf teal**, mid-depth water, substrate bands. - `#3FA9B8` — **lagoon cyan**, the working water tone, most panel mid-grounds. - `#8FD8E0` — **shallow aqua**, the lit splash zone, gradient tops. - `#E8F7F4` — **foam white**, foam, meniscus highlights, card faces (very slightly cool). - `#A7D9A0` — **eelgrass green**, leaf and frond fills (leaf-organic motif). - `#5BAE5F` — **mangrove green**, deeper foliage, root systems. - `#F6B445` — **low-sun amber**, the *only* warm hue: lens flares, the setting-sun disc in panel 9, active-state glows on glass buttons, the meniscus tick on the shore-rule. Used sparingly — perhaps 4% of pixel area — so it always reads as light, never as a brand block. Glass cards are `#E8F7F4` at ~64% opacity over a `backdrop-filter: blur(14px) saturate(1.25)`, with a 1px inner top highlight in `#E8F7F4` and a 1px inner bottom shadow in `#0B3B45` at 18% — the canonical Aero bevel. Sky gradients run `#8FD8E0 → #3FA9B8 → #1C6E7D` top to bottom, with a radial `#F6B445` flare bloom in the upper third of odd-numbered panels. Charts (data-viz) use only `#3FA9B8`, `#5BAE5F`, `#F6B445` on a `#E8F7F4` card-back ground — three series, never more. ## Imagery and Motifs **Four motif families, layered front-to-back in every panel.** **1. Frutiger-Aero gloss (the surface skin — load-bearing).** Wet glass bubbles (radial-gradient spheres, 24–180px, with a small bright specular cap at ~30°/30° and a faint refracted ring at the bottom, drifting upward on slow sine paths). Lens flares (a bright `#F6B445` core, a hexagonal aperture ghost, a long thin streak — pure CSS box-shadows + a clip-path hexagon, placed in skies). Glass buttons (pill-shaped, 44px tall, `#E8F7F4`/64% with the Aero bevel, a Mulish label, a soft `#F6B445` glow on hover that "blooms" over 300ms). Water droplets clinging to the inside of the "screen" — small static beaded shapes at panel corners, as if the viewport itself is a wet pane. This family is glossy, optimistic, slightly plastic — and it is *only the front*. **2. Leaf-organic foliage (the depth — load-bearing).** Eelgrass blades (long tapering clip-path ribbons, 6–14px wide, 40–90vh tall, with a 1px central vein, drifting ±4° on a shared current with staggered phase). Mangrove fronds (compound leaves: a stem with 8–14 paired leaflets, used as card faces in panel 6). Root networks (organic branching SVG paths below the waterline, drawn with `path-draw-svg` as you enter the panel, in `#5BAE5F`). Floating frond-bits and a single drifting seedpod that crosses 2–3 panels. The foliage is lush and a touch over-saturated — Aero's "more green than real life" — but rendered with botanical accuracy in the leaf shapes, honoring the field-journal frame. **3. Coastal data-viz (the back of the cards — the "second layer" revealed).** Every flip-card's reverse is a small, beautiful chart drawn from the panel's metaphor: tide-volume bar histograms (latency/finality), shoal-density area curves (throughput), species-census stacked bars (a tide-pool's contents = a block's transactions), island-scatter plots (the archipelago = the network). Charts are hand-feeling: Mulish axis labels, `#3FA9B8`/`#5BAE5F`/`#F6B445` series, a 1px `#0B3B45`/30% baseline, and a Baskerville-italic caption beneath every chart explaining it in one dry sentence. `counter-animate` runs the key number up when the card lands face-back. Never a "stat-grid" — one chart per card, captioned. **4. Coastal field-journal marks (the connective tissue).** The shore-rule (a hairline with tick marks, every "10 m" labelled in Mulish, the current position marked with a `#F6B445` meniscus triangle — this is the progress indicator). Margin-notes (Baskerville-italic captions in the water margins, with a thin leader line to the thing they annotate, like a botanist's pencil arrow). A small pressed-leaf stamp in the corner of panel 9 (an SVG fern silhouette, `#5BAE5F`/40%, rotated 8°, as if a real frond were laid on the page). Tide-time stamps ("low water +0:14") in tiny Mulish at panel corners. ## Prompts for Implementation Build layer-2.id as **one HTML document, one CSS file, one ES module, plus a handful of inline SVGs** — no framework, no router, no SPA, no build step beyond a single esbuild/Vite pass. The page is **one horizontal scroll track**, nine panels, traversed left to right. The visitor lands at the dark Bedrock Bar, walks the coast sideways through eight lit layers, and arrives at the calm dusk colophon. There is no second page. The site does not link out (except, in the colophon, a single quiet line crediting the conceit). **Storytelling is the organizing principle, not navigation.** The nine panels are *one narrated low-tide walk*. The Baskerville voice carries it: a short heading per panel and 2–4 margin-notes that read like a naturalist thinking aloud and occasionally being wry. The "blockchain" content (what a layer-2 is, throughput, finality, rollups, the archipelago of chains) is delivered entirely *through the coastal metaphor and the card-backs* — never as a feature list, never as a pitch. If a visitor never flips a single card, they should still have read a complete, lovely little essay about a shoreline. If they flip every card, they've also learned, almost by accident, what a layer-2 network is. **Horizontal scroll mechanics.** Translate `wheel`/trackpad delta to `scrollLeft` on `
` (with `scroll-snap-type: x mandatory` on the track and `scroll-snap-align: start` on each panel). Provide visible `← coast →` glass buttons (bottom-centre, Mulish-labelled) and full keyboard support (`←`/`→`/`Home`/`End`/`PageUp`/`PageDown`). The shore-rule at the bottom is both decoration and scrubber — clicking a tick jumps to that "metre". On touch, native horizontal swipe just works. Respect `prefers-reduced-motion`: keep the snap, kill the bubble-drift and flare-bloom, make card-flips an instant cross-fade. **Card-flip is the signature interaction.** Every flippable card is a `.card` with `transform-style: preserve-3d`; front and back are absolutely-positioned faces; flip on click/Enter via `rotateY(180deg)` over 620ms with a `cubic-bezier(0.34, 1.3, 0.5, 1)` slight-overshoot ease (an Aero-ish bouncy snap). The front is always a glossy surface (bubble / blade / pool-icon / frond / island-droplet); the back is always a captioned data-viz chart. While flipping, briefly raise the card's z and add a `#F6B445` glow, then settle. Cards that sit on the waterline must be bisected by the reflective strip on *both* faces, so the reflection survives the flip. At most three flip-cards per panel. **Parallax & current.** Within each panel, four depth layers move at different rates as the track scrolls past: sky+flare (slowest), bubbles, waterline+cards (1:1, the "real" plane), foliage/substrate (slightly faster, foreground). Eelgrass and fronds also have an idle "current" sway (shared sine, staggered phase) independent of scroll. Bubbles drift upward on slow sine paths and respawn at the bottom. The single seedpod and the single stray bubble cross panel boundaries — they're children of the track, not of a panel. **Frutiger-Aero rendering notes.** Lean into the era: `backdrop-filter: blur() saturate()` on every glass surface; the canonical 1px-light-top / 1px-dark-bottom inner bevel on cards and buttons; radial-gradient spheres with a single bright specular cap for bubbles; a hex-aperture lens flare in odd-panel skies; greens pushed ~15% past natural saturation; a faint full-screen vignette + a *very* subtle 2% grain so the gloss doesn't read as flat. But keep the *type* refined — Baskerville never gets a drop-shadow, never gets a bevel; it stays crisp and dark (`#0B3B45`) on the foam-white card faces and `#E8F7F4` on the deep-water panels. The tension between glossy-plastic chrome and clean-letterpress type *is* the design. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature-card grids, "above the fold" anything (there is no fold; there is a coast), hamburger menus, signup forms, vertical scroll-jacking, dark-mode toggles, cookie-banner theatrics. No stock photography. No emoji. No fake "trusted by" logo strip. The page is a field journal of a shoreline, not a SaaS landing page. ## Uniqueness Notes Five differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Frutiger-Aero × Libre Baskerville crossover — refined transitional serif as the *voice* of a glossy 2007-OS aquarium.** Frequency analysis: frutiger-aero is at 4% (uncommon) and baskerville-refined typography is at 2% (rare). Their intersection — a wet-plastic Aero surface narrated by a crisp 18th-century field-journal hand — is **zero before this design**. The Aero canon is almost always paired with rounded humanist sans (Mulish here does that job, but only for UI chrome); putting *Baskerville* in the narrator's chair is the signature of layer-2.id and would be plagiarism if copied. The deliberate friction (glossy bevels everywhere / not one bevel on the type) is the load-bearing idea. 2. **The domain as a *coastal stratum*, not a tech term.** "Layer-2" is read as the second lit layer of a tide-pool ecosystem (and `.id` = Indonesia's ten-thousand-island archipelago), so the entire blockchain meaning is delivered *naturalized* — throughput as tide-volume, finality as settling foam, rollup as a shoal folding into one fish, the network as an archipelago of droplets. No dashboard, no HUD, no metrics block: the data-viz lives only on the *backs of flip-cards*, each captioned in one dry Baskerville sentence. A reader who never flips a card still gets a complete coastal essay. 3. **Horizontal "low-tide walk" with a shore-rule scrubber.** Nine full-height panels traversed left-to-right as a continuous shoreline, with a hairline ruler-along-the-sand at the bottom that doubles as the progress indicator and a clickable scrubber ("metres of shoreline" instead of section dots). horizontal-scroll is at 6% (uncommon) — and the *naturalist's-ruler-as-navigation* treatment is unique to this site. 4. **Card-flip as front=gloss / back=data-viz, every single time.** card-flip is at 14% but is almost always used as a generic "more info" reveal; here it's a strict, repeated grammar — the front is always a Frutiger-Aero glossy object (bubble, eelgrass blade, pool-icon, mangrove frond, island-droplet), the back is always a small captioned coastal chart, with a `#F6B445` Aero-bounce glow on the flip. The two faces literally embody "layer 2": surface skin, then the cross-section beneath. 5. **"coastal-blend" palette as *layered water depth* + one warm sun.** Five teals/aquas from abyssal `#0B3B45` to shallow `#8FD8E0` to foam `#E8F7F4`, two greens (`#A7D9A0`, `#5BAE5F`) for leaf-organic foliage, and exactly one warm hue — low-sun amber `#F6B445` — held to ~4% of pixel area for flares, the setting-sun disc, and active-state glows. coastal-blend is at 2% (rare); reading the palette as *vertical strata of one body of water* (each panel mid-ground is a different depth) rather than a flat scheme is the differentiator. Avoided patterns from the frequency analysis: no `card-grid`/`centered`/`full-bleed` dominant layout (using `horizontal-scroll` + `immersive-scroll` instead); no `photography` imagery (using `data-viz` + `leaf-organic` + Aero gloss); no `warm`/`gradient` warm-dominant palette (using `coastal-blend`, warm hue strictly rationed); no `hand-drawn`/`glassmorphism` as the *aesthetic* label (the glass here is specifically Frutiger-Aero, not generic frosted-saas glassmorphism); no `mono` typography (Baskerville + Mulish). Chosen seed: **aesthetic: frutiger-aero, layout: horizontal-scroll, typography: baskerville-refined, palette: coastal-blend, patterns: card-flip, imagery: data-viz, motifs: leaf-organic, tone: whimsical-creative**.