# Design Language for rollup.report ## Aesthetics and Tone `rollup.report` is a **cinematic intelligence terminal** — the kind of display you'd find glowing on the bridge of a deep-space relay station where the crew has long since departed, and the data keeps arriving anyway. The aesthetic is **zen-contemplative sci-fi**: not the frenetic urgency of a war-room HUD, but the slow, deliberate readout of a system that has been running faithfully for years and expects to run for years more. Think: NOAA weather buoy telemetry rendered by a production designer who studied Kubrick and Tarkovsky equally. The mood is **chrome-still**. Every element exists in a state of quiet authority. Data does not flash or demand — it unfolds. The surface is cold, precise, metallic — a brushed-aluminum chassis under indirect light — but the interior warmth comes from the *zen* register: generous white space (or dark space), unhurried animation easing, and a belief that the most powerful information presentation is the one that asks the least of the viewer's nervous system. The site reads like a **field report from a future that has already decided data matters**. Each rollup — each aggregated signal — arrives like a tide: predictable, rhythmic, slightly inevitable. The tone is not "dashboard" (reactive, anxious, live-updating). It is "chronicle" (deliberate, archival, considered). Inspirations: the operational displays of *2001: A Space Odyssey*; Tarkovsky's long-hold camera work; Japanese aerospace instrument panels; the NASA mission elapsed time readout; Hans Zimmer's *Interstellar* score displayed as a waveform rather than heard. ## Layout Motifs and Structure The layout system is **HUD-overlay composition** on a full-viewport dark field — but the HUD does not cover. It *frames*. Every data element is an instrument bezel: a thin chrome border (0.6px, `#8899AA`), a label etched above the reading, a value centered in the bezel opening. **Macro composition:** - **Full-viewport canvas** (100vw × 100vh per "scene") with `overflow: hidden` per section. Scrolling triggers scene transitions, not reveals. - **Instrument cluster grid**: a 12-column × 8-row grid with 24px gutters. Instrument bezels occupy cells in non-uniform clusters — 3-wide, 2-tall beside a 1-wide, 4-tall — breaking monotony while maintaining the language of the instrument panel. - **Horizon line**: a single 0.8px horizontal rule at the 38.2% vertical position of each scene (golden ratio from top). Navigation, ambient labels, and micro-data live above; primary instruments below. This is the site's structural constant across all scenes. - **Corner registration marks**: each scene has four L-shaped registration brackets at its viewport corners — 20px × 20px chrome brackets, 0.8px stroke, 40% opacity. They reinforce the "calibrated frame" metaphor without adding visual weight. - **Depth layer**: the background layer holds a very-low-opacity data-viz field (radial constellation of 300-point scatter, `opacity: 0.04`) that is always present but never readable. It is texture, not content. **Micro-composition:** - Instrument bezels have an internal padding of 16px. Labels use `letter-spacing: 0.18em` small-caps, 9px, `#667788`. Values are centered, 48–72px, geometric-sans, `#D8E4EE`. - Data-viz elements (spark lines, radial gauges, waveform strips) sit within bezels as content, not decoration. They animate from left to right on scene entry with a 900ms ease-out. - Text passages — the "chronicle" copy — live in a 560px centered column that appears only on narrative scenes, set in a lighter reading weight against the dark field. ## Typography and Palette **Type System (Google Fonts, all verified):** - **Display numerics and primary readings — `Space Grotesk`** (variable, wght 300–700). Used at 64–96px for instrument readings, wght 300, `letter-spacing: -0.02em`. The geometric precision of Space Grotesk makes numerals read as fabricated measurements rather than typeset text — exactly right for a report terminal. On scene entry, individual digits count up from zero using a `counter` animation over 1200ms. - **Labels and interface chrome — `DM Mono`** (Regular 400, Medium 500). All instrument labels, scale markers, axis labels, and HUD annotations set at 8–11px, `letter-spacing: 0.16em`, uppercase. DM Mono's optical regularization means label columns align without optical tricks. - **Narrative / chronicle text — `Space Grotesk`** at wght 300, 17px, `line-height: 1.8`. The same family used at a radically different scale and weight collapses the distance between "data readout" and "prose" — they are the same voice at different registers. - **Accent / structural captions — `Barlow Condensed`** (300, Light; 400, Regular). Used at 11–13px for structural captions, section identifiers, and elapsed-time counters. The condensed geometry echoes spacecraft labeling conventions. **Color Palette:** - `#090E14` — Deep void. Primary background. Almost black with a faint blue cast. The chassis interior at night. - `#111C26` — Instrument background. Slightly lifted from void. Bezel interior color. - `#1E2F40` — Mid-ground surfaces. Secondary panels, inactive instrument fields. - `#8899AA` — Chrome UI. Bezel strokes, grid lines, registration marks, instrument borders. The metallic skin. - `#A8BDD0` — Active chrome. Hover state borders, highlighted labels. A step brighter on the same metallic axis. - `#D8E4EE` — Primary reading value. Instrument numerals, key data points. Near-white with blue-steel cast. - `#E8F2FF` — Peak illumination. The single brightest element per scene — the site's "north star" value. Reserved for one number per viewport. - `#2E7AB6` — Signal blue. Spark lines, waveform traces, active data-viz strokes. The color of information in motion. - `#1A4E78` — Deep signal. Filled areas under curves, radial gauge fill, subdued data regions. - `#4AABB5` — Cyan accent. Cross-hatch markers, data intersection points, milestone markers. Never used for background — always foreground punctuation. - `#0D3D5A` — Teal void. Used only in data-viz fills where transparency would read too softly. The color of deep water under instrumentation light. ## Imagery and Motifs **No photography.** The registry shows photography at 85% — rollup.report opts out completely. All imagery is **data-native**: every visual element is generated from, or evokes, actual data structures. **Primary motif — The Waveform Strip:** A 100% width × 48px waveform strip anchored to the bottom edge of each scene. The waveform is a smooth cubic-spline curve (SVG `` with 60 sample points), stroked at 1.2px in `#2E7AB6`, with the area below filled in a linear gradient from `#1A4E78` at full opacity to `#090E14` at zero. This strip is the site's visual heartbeat — it pulses at a 4s cycle, amplitude ±8px, using a sine ease. It is not decorative; it represents the actual data density of the section it sits in. **Secondary motif — Radial Gauge:** A partial arc (210° sweep, starting at 165°) drawn in SVG at 180px diameter. Track at 1px `#1E2F40`; progress arc at 2.4px `#2E7AB6` with a `stroke-dasharray` animation from 0 to value over 1400ms. A center readout shows the numeric value in `Space Grotesk` 300 at 32px. Used for percentage metrics, completion ratios, and trend indicators. **Tertiary motif — Scatter Constellation:** 300-point scatter plots rendered in SVG. Points are 2px circles, `#2E7AB6` at varying opacity (0.3–0.9) weighted by data density. A Delaunay-triangulated mesh (stroke 0.4px, `#1A4E78`) connects points with spatial proximity < 40px. The constellation reads as both a data visualization and a star chart — intentionally ambiguous. Used as the background texture layer at `opacity: 0.06` and as a full-bezel instrument on narrative scenes. **Micro-motif — Registration Target:** A 24px crosshair with concentric circles at 6px, 12px, and 20px radii, stroke 0.6px, `#8899AA` at 60% opacity. Appears at data points of maximum significance — the year's highest value, the report's critical threshold. Slow pulse animation (scale 0.9→1.1, 3s cycle). **HUD annotations:** Thin dashed lines (`stroke-dasharray: 4 6`) connecting instrument bezels to their data sources, appearing on hover. Leader lines from data points to `DM Mono` callout labels, 8px font, `letter-spacing: 0.14em`. These appear with a drawing animation: stroke-dashoffset from 100% to 0 over 600ms. ## Prompts for Implementation Build rollup.report as a **vertical scroll-snap narrative** — a sequence of full-viewport "scenes" that each tell one chapter of the data story. No pagination. No sidebar nav. The only navigation is the scroll, and the scroll is unhurried. **Scene architecture (7 scenes):** **Scene 0 — SIGNAL ACQUISITION:** Black field, `#090E14`. Registration brackets fade in over 800ms. A single line of `DM Mono` text at the horizon: `ROLLUP.REPORT — MISSION ELAPSED TIME: [live counter]`. The waveform strip at bottom begins flat, then resolves into signal over 2s. Nothing else. The scene communicates: *a system has been listening*. **Scene 1 — THE INSTRUMENT CLUSTER:** The full HUD grid materializes. Six instrument bezels assemble from their corners inward (each bezel's four sides draw simultaneously, completing in 600ms, staggered 120ms apart). Each bezel contains a different data-viz type: waveform, radial gauge, scatter constellation, spark line, numeric counter, bar column. Bezels are 3×2 on desktop, 1×6 on mobile. The horizon line is visible; above it, a `Barlow Condensed` 11px label: `ANNUAL SUMMARY CLUSTER`. **Scene 2 — THE CHRONICLE:** The instrument cluster fades to 15% opacity (stays as background ghost). A 560px centered text column fades in. `Space Grotesk` 300, 17px, `#D8E4EE`. The copy is the annual rollup narrative: what happened, what the data says, what it means. No bullet points. No headers within. Prose, deliberate, one thought per paragraph. The waveform strip reflects the narrative's emotional arc — highest amplitude at the climax paragraph, lowest at the close. **Scene 3 — DEEP SIGNAL:** Full-viewport scatter constellation at `opacity: 1`. The Delaunay mesh is visible. A single data point — the year's most significant — is marked with the registration target crosshair and a leader line to a `DM Mono` callout: the value, a 9-word gloss. The scene holds for a beat, then the crosshair pulses once. No other interaction. Just the data and its most important moment. **Scene 4 — TEMPORAL SERIES:** A horizontal time series spanning the full viewport width: 12 radial gauges in a row (one per month), each 88px diameter, arranged on the horizon line with their center points exactly on `y = 38.2%`. Gauges animate on scene entry, left-to-right, 80ms stagger. Below each gauge: the month label in `Barlow Condensed` 11px. Above the horizon: a connecting spark line through all gauge center points, showing the macro trend as a single continuous curve. **Scene 5 — THE THRESHOLD:** A single oversized numeral — the year's defining metric — fills 60% of the viewport width in `Space Grotesk` 300, `#E8F2FF`. It is the only element at `#E8F2FF` in the entire site. Registration targets appear at its corners. A radial gauge overlay at 40% opacity shows its context within a larger range. Below the numeral: a single line of `DM Mono`, 10px: the metric name in full, `letter-spacing: 0.24em`. **Scene 6 — SIGNAL RELEASE:** The waveform strip begins to flatten. Instrument bezels fade. The scatter constellation resolves back to the 0.04 background opacity. The final element: a `DM Mono` timestamp, bottom-right, `#667788`: `END OF REPORT`. Then the cursor blinks once, and stops. The site is at rest, having said what it needed to say. **Animation system:** - All transitions use `cubic-bezier(0.25, 0.46, 0.45, 0.94)` (ease-out-quart) for entries - All exits use `cubic-bezier(0.55, 0.06, 0.68, 0.19)` (ease-in-cubic) - Scene transitions trigger at `IntersectionObserver` threshold 0.4 (scene is 40% visible) - No `animation-delay` longer than 200ms per element within a scene (total scene assembly < 2s) - Waveform pulse: `animation: waveform-pulse 4s cubic-bezier(0.37, 0, 0.63, 1) infinite` - Numeric countup: CSS custom property `@counter-style` driving `clip-path: inset()` reveal, not JS **Technical notes:** - Scene container: `height: 100svh; scroll-snap-align: start; scroll-snap-stop: always` - Background scatter constellation: single `` element, `position: fixed`, z-index 0, drawn once at load and not re-rendered - All SVG data-viz is inline SVG (not ``) to allow CSS animation - HUD grid uses CSS Grid with named areas corresponding to instrument IDs - `prefers-reduced-motion`: all animations collapse to instant opacity transitions; waveform pulse stops; countup starts at final value - Chrome bezel borders use `box-shadow: inset 0 0 0 0.6px #8899AA` rather than `border` to avoid layout influence ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: cinematic, layout: hud-overlay, typography: geometric-sans, palette: chrome-metallic, patterns: morph, imagery: data-viz, motifs: sci-fi-hud, tone: zen-contemplative. **Differentiators from the existing registry:** 1. **Zen-contemplative HUD — a contradiction resolved.** The registry has HUD designs that are kinetic and anxious (typical `sci-fi-hud` at 5%). rollup.report is the *only* HUD design that marries Kubrickian stillness to instrument precision — each bezel is an object of quiet study, not a reactive dashboard. The waveform is the site's heartbeat, not its alarm system. 2. **Scroll-snap full-scene narrative architecture.** No other design in the registry uses `scroll-snap-stop: always` with full-viewport scene changes as the primary navigation model. This creates a *slideshow of data moments* rather than a continuous scroll, giving each scene the weight of a chapter page. 3. **Typography as instrument calibration.** The use of `Space Grotesk` 300 at 64–96px for numeric readouts — combined with `DM Mono` for labels — creates a two-register system where the same geometric DNA spans from 8px labels to 96px readings. No other registry design uses a single-family (plus its mono companion) to cover the full typographic range from caption to display. 4. **The waveform strip as emotional narrator.** The persistent bottom-edge waveform is unique in the registry: it is data-viz that reflects the *section's content intensity*, not a random animation. A narrative scene has a different amplitude profile than a metrics scene. The waveform is doing interpretive work, not decorative work. 5. **Avoided patterns from frequency analysis:** avoids glassmorphism (20% overused), frosted/translucent surfaces (registry-dominant), photography (85% of sites), full-bleed hero imagery, CTA blocks, pricing tables, and stat-grids. The entire site is contemplative archiving, not conversion.