` styled as a brushed-metal instrument face — a subtle `1px inset border` in terracotta-amber, a light inner shadow simulating panel depth, and a small embossed label in the upper-left corner (e.g. `[ SCOPE 01 ]`, `[ CARBON TRACE ]`) set in monospaced uppercase at 10px. This label is the section's chapter marker. Spacing rhythm: `80px` vertical gap between panels; `40px` internal panel padding. Section transitions are not animated by scroll — the panels simply sit, serene and instrumental. The only motion is inside the Lottie zones (see Imagery). The column never widens for "hero" treatments. Even the opening wordmark section is the same `680px` column width. Hierarchy is achieved through typographic scale, not layout breakout. Footer: a single typeset line — `footprint.market · carbon literacy for the curious` — in terracotta at 12px, 80px below the last panel. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Wordmark:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weights 300–700. Used for section headings, the site wordmark, and all large numerics. Its slightly quirky geometric construction reads as retro-technical without being novelty; the quirky `a` and `g` glyphs add personality that distinguishes it from sterile sans-serifs. - **Body / Tutorial copy:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 400 regular and 500 medium. Clean, legible, neutral enough to disappear into long-form explanation. Used at `17px / 1.7` line-height. - **Panel labels / Data tags / Monospaced readouts:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400 only. All-caps at 10–12px for instrument labels. Used for numeric data readouts and the embossed section markers. Its wide monospaced rhythm reinforces the console-instrument metaphor. **Palette:** - `#1C1208` — Deep charcoal-brown. Page background. Not pure black — the warm undertone keeps it from feeling cold. - `#C8603A` — Terracotta primary. Section borders, active accents, the wordmark dot in "footprint". - `#E8A86B` — Warm amber. Secondary accent. Numeric readouts, panel highlights, hover states. - `#F5EDD8` — Warm off-white / linen. Body text on dark backgrounds. Softer than pure white, avoids eye strain. - `#2E1F0F` — Dark walnut. Panel face background (slightly lighter than page background, creating panel depth). - `#4A7C59` — Muted sage green. Used exclusively for positive carbon indicators and Lottie animation accents. Referencing oscilloscope trace green. - `#6B4C35` — Burnished brown. Borders, dividers, subtle texture lines between data columns. ## Imagery and Motifs **Lottie animations (primary motion layer):** Two Lottie animation zones, each occupying the full column width at a fixed `240px` height. 1. **Carbon Footprint Trace (hero zone, below wordmark).** A single animated line — an oscilloscope waveform — traces from left to right across the panel. The line begins in sage green (`#4A7C59`), gradually warming to amber (`#E8A86B`) as it crosses the midpoint, signaling increasing carbon intensity. The background shows faint concentric circle "target" rings in `#6B4C35` at 15% opacity. The waveform loops seamlessly: 3-second loop, easing `easeInOutSine`. No text in this animation — pure data signal. 2. **Footprint Reveal (mid-page, after the "How It Works" section).** A Lottie of a bare human footprint outline, drawn stroke-by-stroke over 2.4 seconds, then filled in from toe to heel with a gradient from terracotta to amber. The footprint is centered, clean, geometric — not cartoonish. After fill completes, small satellite dots (representing marketplace transactions) orbit the footprint perimeter at different radii, each dot fading in with a staggered 0.15s delay. Loop: fill animation plays once; orbit loop repeats indefinitely. **Retro-pattern texture layer:** A repeating SVG tile (`64×64px`) used as a `background-image` on panel faces. The tile is a minimal **crosshatch grid** — horizontal and vertical lines at `#6B4C35` 8% opacity, spaced 16px apart, with a single small diamond at each intersection point. This is the "graph paper of the instrument panel" — a nod to engineering drawing paper and 1970s technical manuals. Applied at `background-size: 64px 64px`, it gives panels a subtle tactile texture without competing with content. **Instrument dial motifs (SVG, inline):** Three small SVG "readout dials" placed as decorative data elements within the tutorial section panels. Each dial is a `80×80px` SVG: a circular bezel in `#6B4C35`, a swept arc indicator in terracotta/amber (static, not animated), and a three-digit numeric readout below in Space Mono. They illustrate carbon metrics (e.g., "042 kg / order", "017 t / yr") and reinforce the instrument-panel metaphor without requiring live data. **No photography.** No stock images, no illustrations, no icons from any library. Only SVG, Lottie JSON, and typographic composition. ## Prompts for Implementation Build footprint.market as **one single-column instrument tape**, scrolled top-to-bottom. The page is pedagogical: it teaches what a carbon footprint in a marketplace transaction means, and it does so through the metaphor of reading instrument panels. Implement eight sequential `

` sections, each a self-contained panel, all sharing the same column width and panel-face styling. **Story arc (strict single-column scroll):** 1. **Panel 00 — Wordmark + Signal.** The word "footprint" in Space Grotesk 700 at `clamp(42px, 7vw, 84px)`, terracotta `.` after the `t`, then `.market` in amber weight 300. Beneath it: two lines of DM Sans body copy introducing the site's purpose. Then the full-width Lottie Carbon Footprint Trace animation. No navigation, no hamburger menu, no sticky header. 2. **Panel 01 — What is a carbon footprint?** Section label `[ SCOPE 01 ]` in Space Mono 10px. A 280-word tutorial explanation. One inline instrument dial SVG on the right side of the text block (float right, 80×80px, clearfix). Body text in `#F5EDD8` at 17px / 1.7. 3. **Panel 02 — How marketplace transactions generate emissions.** Section label `[ SCOPE 02 ]`. A three-row data table (no borders, only horizontal rules in `#6B4C35` 40% opacity) listing emission sources (logistics, packaging, returns) with Space Mono numeric values and a small amber bar-indicator beside each value — a `` with `width` set proportionally, `background: #E8A86B`, `height: 3px`, `display: inline-block`. No chart library. 4. **Panel 03 — The Footprint Reveal.** Full-width Lottie footprint animation. No text in this panel — the animation speaks alone. Panel label `[ SIGNAL ]` centered at the top. 5. **Panel 04 — Reading your footprint score.** Section label `[ SCOPE 03 ]`. Tutorial explanation of score ranges (low / moderate / high). Two instrument dial SVGs flanking the text (one per side). Sage green (`#4A7C59`) used for the "low" indicator text. 6. **Panel 05 — What sellers can do.** Section label `[ SCOPE 04 ]`. A three-item tutorial list. Each item: bold DM Sans 500 lead-in (terracotta), then body copy explanation. No bullet glyphs — items separated by `1px` rules in `#6B4C35`. 7. **Panel 06 — What buyers can do.** Section label `[ SCOPE 05 ]`. Mirror structure of Panel 05. Three items. One instrument dial SVG centered below the list. 8. **Panel 07 — The market's commitment.** Section label `[ COMMITMENT ]`. Closing tutorial statement, 120 words maximum. Space Grotesk 300 italic at 22px, `#E8A86B`. No buttons, no CTA, no sign-up form, no email field. **Implementation notes:** - Panel face background: `#2E1F0F`. Page background: `#1C1208`. Panel border: `1px solid #C8603A` at 35% opacity. Panel shadow: `inset 0 1px 0 rgba(232,168,107,0.12), 0 2px 12px rgba(0,0,0,0.4)`. - Crosshatch texture tile (SVG data URI) applied to all panel `

` elements as `background-image`. Keep it at ≤ 8% opacity so it does not interfere with text legibility. - The page `` has `background-color: #1C1208` and `background-image: none`. The gap between panels is bare dark background — the column tape floats in it. - No scroll-triggered animations, no parallax, no intersection-observer effects. Motion lives only inside the two Lottie zones. - Lottie animations: embed as `` (via `@lottiefiles/lottie-player` CDN) or as ``. Use `autoplay loop` attributes. If no Lottie JSON is available at build time, replace with an SVG placeholder that preserves the `240px` height and label. - The retro-pattern crosshatch is the only decorative repeat element. Do not add gradients, noise overlays, or grain filters to the page background — the warmth comes from color, not texture. - Typography hierarchy: wordmark `clamp(42px, 7vw, 84px)` Space Grotesk 700 → section h2 `28px` Space Grotesk 600 → body `17px` DM Sans 400 → instrument labels `10px` Space Mono 400 uppercase → numeric readouts `24px` Space Mono 400. - AVOID: hero CTAs, pricing blocks, testimonials, stat grids, navigation menus, social proof, sticky headers, modal dialogs, cookie banners, newsletter popups. ## Uniqueness Notes 1. **Retro-futuristic instrument-panel metaphor is novel in this registry.** The frequency report shows `retro-futuristic` at 1% (one prior use) and no design has yet used the NASA/DOE-console framing. This site claims it directly and specifically: brushed-metal bezels, Space Mono labels, instrument dials, oscilloscope waveform Lottie. The retro-future frame is not cosmetic — it is the pedagogical vehicle: reading carbon data like you're in a 1973 mission control room makes the abstract metric feel real and actionable. 2. **Terracotta-warm palette with charcoal-brown background is unrepeated.** `terracotta-warm` appears at 1% in the registry. The specific combination of `#C8603A` terracotta + `#1C1208` deep charcoal-brown has not been used. Most warm palettes in the registry pair warm accents with cream or white backgrounds; inverting to a dark background with warm accents creates a glowing-instrument-readout quality unique to this design. 3. **Lottie-animation as the primary hero element (not decoration) is rare.** `lottie-animation` appears at 2% in the registry. Here the two Lottie zones are structural — they are the site's visual argument, not embellishment. The oscilloscope waveform IS the carbon trace data; the footprint-reveal IS the conversion moment. No other design in the registry has structured its narrative arc around Lottie as load-bearing content. 4. **Crosshatch retro-pattern SVG tile as panel texture distinguishes from grain/noise overlays.** `retro-patterns` at 2% in the registry; most texture treatments use CSS noise or grain filters. The geometric crosshatch SVG tile is drawn from 1970s engineering drawing paper and reinforces the instrument-panel metaphor coherently. It is lighter-weight (pure SVG data URI, no image requests) and more semantically aligned with the design concept than noise overlays. 5. Seed: aesthetic: retro-futuristic, layout: single-column, typography: frutiger-clean, palette: terracotta-warm, patterns: lottie-animation, imagery: minimal, motifs: retro-patterns, tone: tech-tutorial. Avoided: frutiger-aero (4% — too common), centered layout (92% — overused), warm-inviting (3% — generic), retro-display typography (3% — leans nostalgic not technical).