# Design Language for rollup.report ## Aesthetics and Tone rollup.report is **a nightly observatory bulletin for the rolled-up state of things** — the website imagined as the printed sheet a meridian observatory tacks up at dusk: a single broadsheet of vellum where the day's measurements have been *rolled up* into one legible page. The double meaning is the whole brand. A "rollup" is the act of folding many small things (transactions, rows, readings, days) into one summary; "report" is the periodical that publishes the fold. So the site is neither a dashboard nor a marketing page — it is the **imagined homepage of a one-person observatory that publishes a digest every night**, and treats summarisation itself as a craft worthy of beautiful typesetting. The mood is **quiet, instrumental, nocturnal, exact** — the calm of a room lit only by an oscilloscope and a single anglepoise lamp. Not "fintech dark mode"; not "crypto neon." Think the inside cover of a 1960s *Nautical Almanac*, the phosphor afterglow of a cathode-ray trace, the ruled columns of an actuary's ledger, and the faint blue of architectural diazo prints — all on the same page. Everything reads as **printed once, by a careful machine, on a slightly translucent stock that lets the rule-grid of the page beneath show through.** The tone never shouts; it states. Numbers are set with the seriousness of an ephemeris. White space is the dark of the sky. This is a site you *consult*, the way you consult a tide table — the satisfaction is in the legibility of a thing well-folded, not in conversion. ## Layout Motifs and Structure The page is **a single tall broadsheet you scroll down like unrolling a scroll** — explicitly a vertical document, not a feed of cards. The governing armature is a **two-track ledger**: a narrow left **rule margin** (a fixed ~88px gutter ruled with faint hairlines and tick marks, like an engineering pad) running the full height, and a wide right **body track** where the report sets. The body track itself obeys a **6-column ruled grid at 1280px canvas width, 1.0 zoom**, but columns are visible as pale vertical hairlines that never fully disappear — the reader always sees the staff lines under the music. Four structural motifs, used sparingly: 1. **The fold line.** Between major sections runs a single horizontal hairline interrupted by a small `⌐ ¬` fold-bracket glyph at the left margin and a printed running figure ("§ 02 — fees, rolled up") — as if the broadsheet were creased there. Sections do not "card off"; they are separated by *creases*. 2. **The trace lane.** One full-bleed-within-the-body-track horizontal band per section reserved for a single **oscilloscope-style line graph** drawn edge to edge — a phosphor-cyan polyline on the dark field, with a faint persistence-ghost of the previous frame trailing behind it. This is the only "image" on the page and it is always live SVG. 3. **The summary block.** Where most sites would put a stat-grid, rollup.report puts a **single rolled figure in oversized type** with, directly beneath it in small ruled rows, the *expansion* — the few rows that were folded to make it — set like an almanac's "particulars." The big number is the rollup; the small rows are the receipt. 4. **The marginal annotation.** The left rule margin carries running notes — timestamps, units, a tiny moon-phase glyph for the date, the observer's initials — set rotated 90° or stacked, the way a draughtsman annotates the edge of a sheet. Scrolling reveals the report **section by section with a faint downward "unroll"**: each section's hairlines draw in left-to-right, then its body text settles. No parallax circus — the only depth is the **translucent vellum layer over the rule-grid**, which shifts a few pixels slower than the text, so the page feels like ink floating just above ruled paper. ## Typography and Palette **Type system — Google Fonts only, three faces, each with one job:** - **Spectral** (variable, weights 300–600, with its true italic) — all running prose, section intros, the observer's notes, the almanac "particulars" rows. A Google serif with a slightly mechanical, almost typewritten warmth and a superb italic; it makes a data digest read like a considered letter. Set at 18–20px, generous leading (1.7), measure capped at ~62 characters. - **Bayon** — the masthead "rollup.report" and the section running-figures only. A single-weight display sans with a compressed, stencilled, almost signage quality; at masthead size (clamp 64px–140px) with tight tracking (−0.015em) it reads like a label stamped on an instrument case. Used nowhere in body text. - **Spline Sans Mono** — every number, every axis label, every timestamp, every unit, the marginal annotations, the graph readouts. The whole *quantitative* layer of the page is monospace, tabular-figures on, so columns of figures align like a ledger and the "rolled" hero numbers have the authority of a meter reading. Type rule: **prose is the serif, instruments are the mono, and the masthead is the only display.** No fourth font, no icon font, no emoji. **Palette — a phosphor-on-vellum night, five values:** - `#0B0F12` — **meridian black.** The page field. Not pure black — a deep blue-graphite, the colour of a darkened observatory dome. - `#E8E2D0` — **vellum.** The translucent paper layer and all primary text; a warm aged-paper off-white, used at 92–96% opacity so the rule-grid bleeds faintly through. - `#5BE1C4` — **phosphor cyan.** The oscilloscope trace, live values, the active fold-bracket, link underlines. The single "lit" colour — used like the glow of a CRT, never as a fill, only as a thin luminous line with a soft 6–10px bloom. - `#7C8A93` — **diazo grey.** All hairlines, the rule-grid, tick marks, inactive axis labels, the column staff lines. The colour of faded blueprint ink — quiet, structural, everywhere. - `#C4683A` — **annotation rust.** Used *once or twice per section*: the running-figure number, an errata mark, the "as of" timestamp. A muted oxidised orange, the colour of a draughtsman's red pencil gone amber — it is the page's only warm accent and it earns its appearances. ## Imagery and Motifs **No photographs, no raster images, no icon fonts, no emoji, no stock illustration.** Every mark is drawn at runtime from SVG and CSS so the page reads as one printing-and-plotting operation: - **The oscilloscope trace** — one per section, a phosphor-cyan polyline with a 1.5px stroke, a soft Gaussian bloom, and a *persistence ghost*: a duplicate of the path at lower opacity that lags one animation frame, so the line seems to be drawn by a slow beam. Optional graticule of diazo-grey dotted lines behind it, 8×6 cells, exactly like a scope screen. - **The fold-bracket** — a small `⌐ ¬` (or hand-built SVG corner-bracket) at every crease and at the start of every section figure. The recurring signature mark of the page; phosphor-cyan when its section is in view, diazo-grey otherwise. - **The rule-grid** — faint horizontal AND vertical hairlines (diazo grey, ~6% opacity) covering the entire field, with slightly heavier ticks every 5th line and a numbered ruler down the very edge of the left margin. The page literally is ruled paper. - **The moon-phase glyph** — a tiny SVG disc, partly shaded, sitting beside the report's date in the left margin, accurate to the report date. The almanac wink. - **Tabular "particulars" rows** — under each rolled figure, 3–6 thin ruled rows (monospace, right-aligned figures, dotted leader lines connecting label to value) that *expand* the rollup. Pure typography, no chrome. - **The crosshair cursor** — within trace lanes only, the cursor becomes a thin diazo-grey crosshair with a live monospace readout of the x/y under it, like a scope marker. Outside the lanes, default cursor. - **Errata marks** — occasional small caret `‸` or marginal `※` in annotation rust where the report "corrects" itself — a deliberate, charming admission that summaries are revisions. ## Prompts for Implementation Build rollup.report as **one HTML file, one CSS file, one ES module** — no framework, no router, no build step, no service worker, no external fetch. **Target under 95KB uncompressed.** No raster images, no icon fonts, no Lottie, no web-component libraries — SVG and CSS only. Honour `prefers-reduced-motion`: freeze the oscilloscope traces to their final drawn path, disable the unroll, disable the persistence-ghost; the rule-grid and the layered vellum stay (they aren't motion). **This is a broadsheet you unroll, not a funnel you fall through.** There is **no hero call-to-action, no "get started," no pricing block, no testimonial wall, no stat-grid of equal cards, no signup band.** The masthead is a printed nameplate with a date and an "observed by" line, not a navbar with buttons. If something must be "tappable," it is a hairline-underlined word in the running prose or a marginal annotation — never a pill button. Tell the story in **ordered sections that feel like the segments of a nightly digest**: (1) *the masthead* — name, date, moon glyph, the single sentence stating what was rolled up tonight; (2) *the headline rollup* — one oversized monospace figure with its "particulars" expansion beneath; (3–5) *three more folded readings*, each: a crease with its running-figure, a short serif paragraph in plain language, one oscilloscope trace lane, one rolled figure + particulars; (6) *the colophon* — set like the bottom of an almanac page: methodology in italic Spectral, units, the errata note, a line about *why folding many small true things into one legible thing is worth doing carefully.* **Animation, used like punctuation, not confetti:** - On load: the rule-grid fades up first (300ms), then the masthead's hairlines draw left-to-right, then the nameplate settles. - Per section on scroll-in: the crease hairline draws across, the fold-bracket lights to phosphor-cyan, the body text rises 8px into place with a soft stagger, then the oscilloscope trace *draws itself* left-to-right over ~1.2s with the persistence-ghost trailing, then the rolled figure counts up its digits in monospace (tabular, so no reflow) while the particulars rows reveal one ruled line at a time with their dotted leaders extending. - Idle: the in-view trace has a barely-perceptible 2–3px vertical "noise breath" on its last few points, so the scope looks *live*, not frozen. Stops the moment another section takes focus. - Hover within a trace lane: crosshair cursor + live monospace x/y readout pinned to the lane edge; the nearest data point swells to a 4px phosphor dot with a faint ring. - The vellum layer + masthead nameplate translate ~6px slower than the body on scroll — the *only* parallax, and it's measured in single pixels. Everything must still read as one calm, exact, printed-and-plotted document at 1280px / 1.0 zoom: ink floating a hair above ruled paper, one cyan beam tracing the night. ## Uniqueness Notes Distinct departures from the other designs in this registry and from generic SaaS / analytics / crypto-rollup sites: 1. **"Rollup" is read as *folding*, not as L2 blockchains.** Every site about rollups goes neon-purple-gradient-crypto. This one ignores that entirely and treats "rollup" as the typographic act of summarisation — a rolled scroll, a folded broadsheet, a hero number with its "particulars" receipt printed beneath it. The brand is *the fold*, with a literal crease-and-fold-bracket motif at every section break. 2. **The page is a piece of translucent ruled paper, structurally.** A persistent diazo-grey rule-grid (horizontal *and* vertical hairlines, numbered edge ruler, heavier 5th-line ticks) sits under everything, and the content layer is a warm vellum at 92–96% opacity so the staff lines bleed through. Not a background texture — the literal substrate, never hidden. 3. **One light, and it's a CRT beam.** A single accent colour (#5BE1C4 phosphor cyan) appears *only* as a thin luminous oscilloscope line with a soft bloom and a one-frame persistence-ghost — never as a fill, button, or gradient. Each section has exactly one such "trace lane." The "moody dark + neon" trap is sidestepped by making the neon behave like phosphor, not paint. 4. **Stat-grids are replaced by "rolled figure + particulars."** Where comparable sites stack equal cards of numbers, here a single oversized monospace figure is the rollup and a few dotted-leader ledger rows beneath it are the expansion — the receipt for the summary. Quantitative content is *entirely* monospace (Spline Sans Mono, tabular figures); prose is *entirely* serif (Spectral); display is *only* the masthead (Bayon). A strict three-job type system. 5. **Almanac, not dashboard.** Moon-phase glyph beside the date, marginal annotations rotated in the rule gutter, an errata mark in amber pencil, a colophon set like the foot of a nautical almanac page — the reference frame is the *Nautical Almanac* and the draughtsman's pad, not Stripe or Dune. Chosen seed / style: **generative** — the oscilloscope traces, persistence-ghosts, idle "noise breath," and the per-section seeded layout deltas are runtime-generated SVG/CSS, not assets; the page is plotted, not placed. Avoided patterns from the frequency analysis: **glassmorphism** (83%) — none, the only translucency is flat vellum-over-grid, no blur panels; **hand-drawn** (94%) — nothing sketchy, every line is a precise machine-plotted hairline; **card-grid** (91%) — replaced by a vertical creased broadsheet with a two-track ledger armature; **photography / gradient-mesh imagery** (98% / 17%) — zero raster, zero mesh gradients; **cursor-follow / magnetic / tilt-3d / spring** UI tricks — replaced by a scope crosshair-with-readout that exists only inside trace lanes and a 6px vellum parallax; **warm-gradient palette** (94%/98%) — a near-monochrome diazo-night palette with a single cyan beam and one rust accent. Preferred underused directions instead: **timeline-vertical**, **diagonal/creased sectioning**, **midnight-blue / ocean-deep**, **tech-mono typography pushed all the way to a full quantitative layer**, **sci-fi instrumental tone** at instrument-panel calm rather than HUD spectacle.