# Design Language for layer-2.report ## Aesthetics and Tone `layer-2.report` is a **research bulletin for blockchain scaling enthusiasts** — the imagined editorial room of a small, brilliant team that tracks Ethereum's second-tier infrastructure with the scholarly rigor of a mathematical institute and the restless energy of engineers who believe the technology is winning. The conceit: Layer 2 solutions are not just products; they are **architectural arguments** rendered in proof systems, and this site treats them as such. The aesthetic is **dark-academia meets optimistic-bright** — not the moody, candlelit study of conventional dark-academia, but a well-lit research station at dusk: deep walnut bookshelves behind glowing instrument panels. The backdrop is midnight-inky (almost black), but data elements pulse with high-saturation amber and electric chartreuse — the color of phosphorescent readout screens on a trading floor in 1987. This contrast is the visual premise: depth and weight of serious scholarship, but with the electric aliveness of live data streaming in. The tone avoids the self-congratulatory triumphalism common in crypto design (no "we're changing the world" copy). Instead, it reads like a good quarterly report from a team that has already convinced themselves the thesis is correct and is now doing the careful work of documenting it. The reader is addressed as a peer: someone who wants the numbers, the proof, the structural diagram — and can make their own conclusions. No hero photography. No gradients resembling sunsets or "the future." The visual personality is built from data surfaces: throughput curves, latency histograms, proof-generation timelines rendered as inline SVG. These ARE the decoration. ## Layout Motifs and Structure The structural metaphor is **a research station's instrument wall** — distinct stacked horizontal panels, each one a different instrument reading, each one self-contained but part of a coherent measurement ensemble. The layout is `stacked-sections`: full-width bands of varying heights that read from top to bottom like the chapters of a technical paper. **Stacked section anatomy:** - **Section 0 — Masthead panel (100vh, anchored).** A full-viewport opening section. Left half: the site title and current-cycle headline in large variable-weight type. Right half: a live-updating throughput visualization (animated SVG line curves showing combined L2 TPS). The two halves are separated by a single 1px vertical rule in amber, `#D4A017`, that runs full viewport height — a division between editorial and instrumental. - **Section 1 — Signal band (20vh).** A narrow full-width horizontal strip showing key scalar metrics — current aggregate TPS, total TVL, number of active rollups — as horizontally spaced oversized numbers. No labels above the number; labels run below in small-caps. Background: `#0D1117` near-black. Text: `#E8F5A3` yellow-green. This section scrolls with the page and its numbers count up via IntersectionObserver on first view. - **Section 2 — Chain cards (variable height).** Individual L2 protocol entries stacked vertically, full-width, each with an alternating left-right accent stripe (1% width of viewport) in the chain's canonical color. The cards use `tilt-3d` on hover: `perspective(800px) rotateX(4deg) rotateY(-4deg)` triggered by mouse position within the card, not a global effect. Each card contains: protocol name (large expressive display type), one-line thesis, throughput sparkline (inline SVG), proof mechanism badge. - **Section 3 — Flow diagram (fixed 80vh).** A full-width animated diagram showing how a transaction travels from L1 mempool through L2 sequencer to finality, rendered as a flowing curve path with animated dashes. This is not an infographic with icons; it is a pure line-path diagram, like a circuit schematic redrawn in flowing bezier curves. Background switches to `#1A1F2E` deep navy for this section only. - **Section 4 — Research notes (variable scroll).** A vertical stack of long-form research entries — each one a `
` with a left-rail annotation column (marginalia style) and a main body column. Typeset with generous leading, real footnote markers, and section glyphs. - **Section 5 — Data appendix (variable).** Full-width data tables and histogram strips — the raw numbers behind the editorial. These feel like the back-matter of a research paper. The grid: 12-column with 24px gutters, but almost nothing uses the full 12 columns. Content typically inhabits columns 2–11 (leaving 1-column breathing margins on both sides), except the masthead and signal band which are full-bleed. ## Typography and Palette **Type system — four roles, four Google Fonts, zero overlap:** - **[Fraunces](https://fonts.google.com/specimen/Fraunces)** — variable font (optical size, weight, "wonk" axis). Used for the masthead title, section titles, and all display-scale editorial text. At large sizes (clamp(3.5rem, 7vw, 8rem)) the `WONK` axis set to 1 gives letterforms a deliberate optical imperfection — serifs that have character, not just geometry. Set in soft-white `#F2EDE4` on dark backgrounds. The variable weight axis (100–900) is used expressively: headlines run at weight 800, subheadings at 300, creating extreme contrast within the same face. - **[Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** — weights 300–700. Used for all UI labels, metric names, chain badges, navigation, and small-caps identifiers. Space Grotesk's slightly quirky terminal strokes give it a technical readability that pure geometric sans-serifs lack. All metric labels run in Space Grotesk at 0.65rem, 0.08em letter-spacing, uppercase. - **[Instrument Serif](https://fonts.google.com/specimen/Instrument+Serif)** — regular and italic. Used exclusively for long-form research note body text. The italic variant, deployed for emphasis and annotation text, has a distinct calligraphic energy that contrasts beautifully against the mechanical Grotesk used for labels. Body text at 1.0625rem, line-height 1.72. - **[DM Mono](https://fonts.google.com/specimen/DM+Mono)** — light and regular. Used for all numeric data: TPS values, addresses, proof hashes, table figures. Monospaced for alignment; DM Mono's humanist proportions prevent it from reading as purely utilitarian. **Palette — duotone built on midnight and amber-green:** - `#0D1117` — Background Black (near-midnight, not pure black; the blue undertone prevents harshness) - `#1A1F2E` — Section Alternate (deep navy, used for flow-diagram and data-appendix backgrounds) - `#D4A017` — Amber Signal (the primary accent — instrument-panel amber for borders, rule lines, sparkline strokes, hover states) - `#E8F5A3` — Chartreuse Readout (electric yellow-green for scalar metric numbers; high-contrast against `#0D1117`) - `#F2EDE4` — Warm Ivory (body text color; slightly warm to prevent glare against near-black backgrounds) - `#2D3748` — Slate Divider (used for card borders, table rules, subtle separators) - `#8B9DC3` — Dusty Periwinkle (secondary text, annotation labels, footnote markers) - `#1C6EF7` — Electric Blue (used sparingly for inline links and a single protocol — Optimism/OP Stack entries receive this color as their canonical stripe) The duotone logic: the entire page is a two-color photographic print in Amber (`#D4A017`) and Chartreuse (`#E8F5A3`) on a near-black substrate. All decorative data visualizations use only these two foreground colors against the dark backgrounds. Color photography and icons are excluded by design. ## Imagery and Motifs The dominant visual vocabulary is **data-viz as decoration** — throughput charts, proof-time histograms, latency CDFs rendered as inline SVG elements that ARE the imagery of the page, not supplements to it. **Specific motif system:** **1. The throughput river (the cardinal motif — flowing-curves).** The masthead right-half and the Section 3 flow diagram are both built on the same visual primitive: a multi-path SVG of flowing bezier curves representing data flowing through the protocol stack. These are NOT icons of rivers or organic shapes; they are stylized network-flow diagrams where each bezier path represents a transaction batch moving through an L2 pipeline. The curves flow left-to-right, stagger in time (each path animated with a different `stroke-dashoffset` speed), and branch and merge like a river delta. This is the site's signature element — a machine-readable organic form. **2. Sparkline data strips.** Each chain card contains a 120×32px inline SVG sparkline of 30-day throughput. The sparkline is rendered as a filled-below area chart (`fill: rgba(212, 160, 23, 0.15)`, `stroke: #D4A017`), with a single dot marking the current value. No axis labels; the visual shape is the information. **3. Proof-mechanism badge glyphs.** Each L2 entry carries a single-character badge indicating its proof mechanism: **ZK** for zero-knowledge rollups, **OP** for optimistic rollups, **VA** for validium, **SC** for state channels. These are not icons — they are letterform-badges typeset in DM Mono bold inside a 28×28px square with a 1px `#D4A017` border and `background: rgba(212, 160, 23, 0.08)`. The badge system is the only color-labeled taxonomy on the page. **4. Tilt-3d card surfaces.** Chain cards use `tilt-3d` via CSS `transform: perspective(800px) rotateX(calc(var(--mx) * 4deg)) rotateY(calc(var(--my) * -4deg))` where `--mx` and `--my` are set by a compact mousemove handler. On tilt, a specular highlight appears in the card's upper-left corner: a 60×60px radial gradient in `rgba(232, 245, 163, 0.12)` that follows the "light source" implied by the tilt angle. **5. Section-transition rule lines.** Between stacked sections, a full-width 1px rule in `#2D3748` is always present. At the boundary of the flow-diagram section, this rule is replaced by a 4px rule in `#D4A017` — a deliberate strong caesura. ## Prompts for Implementation Build `layer-2.report` as a **single-scroll technical research station**. One HTML file, one CSS file, one small JS module for tilt + counter animations. No frameworks, no build step required for the design expression. **Macro narrative — the visitor journey:** 1. **Load (0 → 500ms).** Background fills `#0D1117` immediately. The masthead type (Fraunces, "Layer 2 Infrastructure Report") fades in from `opacity: 0` over 400ms. The vertical amber rule (`#D4A017`) draws from top to bottom over 600ms using a `clip-path: inset(0 0 100% 0)` → `inset(0 0 0% 0)` transition. The throughput river SVG paths begin their `stroke-dashoffset` animations only after the rule finishes drawing, so the chart appears to "fill in" behind the already-placed editorial structure. 2. **Masthead (viewport 1).** Left column: site name in Fraunces 800 weight, `font-size: clamp(2.8rem, 5.5vw, 6.5rem)`, `color: #F2EDE4`. Below: current cycle date in Space Grotesk uppercase, `#8B9DC3`. Below: a single-sentence editorial thesis in Fraunces 300 italic, `font-size: 1.2rem`, `color: #D4A017`. Right column: the throughput river visualization. No hero image, no background texture. 3. **Signal band.** On first scroll into view (IntersectionObserver), the three scalar metrics count up from 0 to their current values over 1.2 seconds using a linear easing counter. The numbers are set in DM Mono, `font-size: clamp(2rem, 4vw, 4.5rem)`. The counting animation is the only motion in this section. 4. **Chain cards.** Each card has `background: #1A1F2E`, `border: 1px solid #2D3748`, `border-radius: 4px`. The left accent stripe is `width: 3px`, `height: 100%`, positioned absolutely on the left edge, colored per-protocol. Cards have `transition: transform 0.1s ease-out, box-shadow 0.1s ease-out` for the tilt effect. On tilt, `box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5)`. The specular highlight is a `::before` pseudo-element. 5. **Flow diagram section.** Background `#1A1F2E`. The diagram is a full-width SVG (`viewBox="0 0 1200 300"`). Six bezier paths, each representing a step in the transaction lifecycle: mempool entry → sequencer pickup → batch compression → L1 calldata post → proof generation → finality. The paths flow left-to-right with vertical stagger. Each path is stroked in `#D4A017` at 1.5px weight; on scroll-trigger, each path animates its `stroke-dashoffset` from full-length to 0 in sequence, with 0.15s stagger between paths. Below the SVG: a six-item horizontal label row in Space Grotesk small-caps naming each step. This section is NOT interactive; the animation plays once on entry and stays at its final state. 6. **Research notes.** Two-column layout (marginalia left at 18% width, body right at 72%, 10% gutter). Marginalia column: footnote numbers in DM Mono, `#8B9DC3`, right-aligned. Annotation text in Space Grotesk 12px italic. Body: Instrument Serif at 1.0625rem. Pull-quotes break the two-column constraint: they span full content width, set in Fraunces 300 italic at 1.6rem, `color: #D4A017`, with a 2px left border in `#D4A017` and `padding-left: 1.5rem`. 7. **Data appendix.** Tables with `border-collapse: collapse`, `border: 1px solid #2D3748`. Header row: `background: #1A1F2E`, text in Space Grotesk uppercase small-caps `#8B9DC3`. Data rows alternate between `background: transparent` and `background: rgba(26, 31, 46, 0.5)`. Numeric cells: DM Mono, right-aligned. Below each table: a histogram strip (inline SVG, 32px tall, full table width) showing the distribution of the table's primary metric. Histogram bars in `#D4A017`. **Avoid at all costs:** - CTA buttons ("Get started", "Subscribe now") - Pricing tables or tier comparisons - Stock-photography hero images - Gradient blobs or "glassmorphism" card effects - Infinite scroll or feed patterns - Animated emoji or Lottie "celebration" elements ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: **dark-academia** - layout: **stacked-sections** - typography: **expressive-variable** - palette: **duotone** - patterns: **tilt-3d** - imagery: **data-viz** - motifs: **flowing-curves** - tone: **optimistic-bright** **Differentiators against the existing design corpus:** 1. **Dark-academia aesthetic applied to live infrastructure data, not humanities content.** Dark-academia in the corpus (3%) appears exclusively in philosophical, literary, or archival contexts. `layer-2.report` is the first site to apply this aesthetic to real-time quantitative blockchain data — the tension between the slow, weight-of-scholarship mood and the live-updating throughput numbers is the core visual argument of the site. The amber instrument-panel accent color bridges these two registers: it reads simultaneously as candlelit study and oscilloscope readout. 2. **The throughput river (flowing-curves at 1%) as the primary structural AND decorative element.** Flowing-curves appears in only 1% of the corpus and, in those cases, is a decorative flourish added to an otherwise conventional layout. Here, the bezier-curve flow diagram is not supplementary — it IS the masthead's right half and it IS the section-3 full-viewport feature. The curves are not decorative metaphors for organic growth; they are literally stylized network-topology diagrams. Functional and aesthetic at once. 3. **Optimistic-bright tone (2%) fused with near-black background.** The corpus shows optimistic-bright tone almost exclusively on light or white backgrounds with pastel or vivid palettes. `layer-2.report` inverts this: the bright tone is carried entirely by the electric chartreuse `#E8F5A3` and amber `#D4A017` on a near-black substrate. The effect is that optimism reads as a signal in the dark — precise, deliberate, earned — rather than as default cheerfulness. 4. **Variable-font expressiveness (Fraunces WONK axis) as editorial voice.** Expressive-variable typography in the corpus (5%) typically means fluid size changes on scroll. Here, the variable axis being exploited is the optical character axis (`WONK`), not weight or width. Setting `WONK: 1` on large display type gives headlines a subtle hand-drawn irregularity that reads as authorial personality — this is a site with a point of view, not a neutral data dashboard. 5. **Data-viz imagery without dashboard chrome.** The corpus shows data-viz imagery (4%) invariably accompanied by dashboard UI elements: card grids, gauge widgets, pie charts in containers. `layer-2.report` strips all container chrome away. The sparklines, histograms, and flow diagrams are inline SVG elements that sit directly in the content flow with no surrounding "widget" treatment. The data IS the page material, not a module embedded in it. 6. **Stacked-sections layout (2%) with deliberate section-personality differentiation.** The two existing stacked-section designs in the corpus treat all sections as equivalent panels with the same background color. `layer-2.report` assigns each section a distinct atmospheric identity: masthead is pure-black with amber rule; signal band is a high-contrast number display; chain cards are deep-navy with individual protocol accents; flow diagram is a cinema-wide dark surface; research notes revert to near-black with generous typographic whitespace; data appendix returns to deep-navy for visual closure. The stacking is a compositional argument, not just a vertical scroll.