# Design Language for footprint.market ## Aesthetics and Tone footprint.market is a **retro-futuristic celestial bourse** — picture if NASA's 1977 Voyager-era graphics department had been asked to brand an interplanetary carbon-credit exchange, and the resulting wordmark posters had been hung above a trading floor where every quote ticker was rendered as a constellation pulsing through an aurora curtain. The site reads as **whimsical-creative space-age commerce** — earnest, optimistic, gently absurd. It does not apologize for being a "market" by hiding behind glassmorphic dashboards or cyberpunk grids; instead it embraces marketplace-as-cosmology, treating each listing as a glowing footprint left across a planetary surface and offered up to the stars. The mood is **soft-industrial future-nostalgia**. There is the warm crackle of a 1970s public-television science segment, the typographic confidence of a Pan-Am ticket counter that has been transplanted to a moon base, and the celestial wonderment of a planetarium show projected onto the inside of a department-store dome. Every interaction should feel like dialing a brass knob on a lacquered console and watching an aurora ribbon shimmer in response. There is humor here — buttons that wink, footnotes that drift like meteors, marginalia drawn in dotted constellation lines — but the humor is delivered with a straight face, the way an astronaut on a stamp smiles politely at the void. This is **anti-corporate-saas, anti-cyberpunk-edge, anti-glassmorphic-frost**. It is not "trustworthy fintech blue" and it is not "neon dystopian crypto." It is a creature out of mid-1970s speculative futurism, brought up to a plausible 2026 standard of motion fidelity, and given permission to be charming. The brand voice that hovers behind every type setting is: *"welcome to the exchange — please mind the comet."* ## Layout Motifs and Structure The composition begins from the most-tired pattern in the corpus — **card-grid at 82%** — and deliberately deconstructs it into something the corpus does not contain: a **constellation-grid**. Cards are still the fundamental unit, but they are not laid out in a Bento or a Tailwind 12-column. Instead, each card is anchored to a **named star** in a hand-authored celestial atlas, and the atlas reflows across breakpoints by reprojecting the star coordinates rather than by re-snapping a CSS grid. - **The Atlas.** A 1600×900 SVG starfield underlies every page. It contains 88 named anchors (one per IAU constellation), each a `` of radius 1.5px. Cards are absolutely positioned with their geometric centers on these anchors. There is no `display: grid` involved; positions are computed from a `stars.json` lookup. At narrow breakpoints, the atlas does not stack into a column — it **rotates to portrait orientation** (the entire celestial sphere yawing 90°) so the star anchors remain in their relative positions while the viewport changes shape. This means the same card, on mobile and desktop, occupies *the same star*. - **Constellation Lines.** Cards within a single category are joined by **dotted polylines** drawn star-to-star, creating literal constellations of related listings. Hovering any card raises its constellation: the lines brighten, the unrelated stars dim, and a tiny serif label fades in below the cluster reading "Constellation: Cetus" or "Constellation: Lyra." This is the *card-grid subverted into card-cosmology*. - **The Aurora Curtain.** Behind the atlas, three overlapping **animated aurora bands** drift across the upper third of the viewport — a slow vertical SVG `feTurbulence` that warps a tri-stop gradient from #4DD0B3 through #7E5BEF into #FFB347 and back. The curtain is the only "background" the site has; there are no flat color blocks, no full-bleed photographs, no glassmorphic overlays. - **The Console Strip.** Anchored to the bottom 84px of the viewport sits a **brass-and-cream console strip** — a fixed band, not a sticky nav, that visually cites a 1972 Hammond-organ control surface. It carries the wordmark, a single "ledger" indicator (a horizontal needle that drifts based on scroll progress), and a mode toggle that slides like a rocker switch. No hamburger menu, no mega-nav, no sticky CTA. - **No Hero, No Fold.** There is no hero section. The atlas begins immediately at scroll-position zero, and the wordmark sits in the console strip at the bottom — never above the fold. The page commits to its cosmology from frame one. - **Vertical reading is a slow drift.** Total page height is ~6800px. Scroll velocity is dampened (CSS `scroll-behavior: smooth` plus a 0.92 wheel-event multiplier) so that the entire scroll feels like a tugboat moving through a port. Stars **parallax** at three depths (-0.3, 0, +0.4) so the starfield gains visible parallax depth. This subverts card-grid by keeping the unit (a card) but discarding the lattice (the grid), and it claims **layered-depth** (10%) and a stitched-on-top **immersive-scroll** (8%) without committing fully to either — the page is a *flat plane viewed obliquely*, like a planisphere held up to a lamp. ## Typography and Palette **Typography — bebas-bold as the cosmic announcer, with two supporting voices (Google Fonts only):** - **Display & Wordmark — *Bebas Neue* (single weight 400, the only weight Bebas ships).** Used at 92px → 168px for the "FOOTPRINT.MARKET" wordmark in the console strip, and at 28px → 44px for category labels above each constellation. Bebas Neue is the centerpiece of the seed; its tall, narrow, all-caps geometry recalls 1970s NASA mission-patch typography and the metal letterpress titles on a Carl Sagan paperback. Letter-spacing is set to **0.18em** on display, **0.12em** on category labels — generous but not theatrical. Bebas only comes in one weight, so contrast is achieved by *size and tracking*, never by adding a bold companion. - **Body & Meta — *Space Grotesk* (variable, weight 350–600).** Used at 15px/24px for card body text and at 12px/18px for star coordinates and footnote marginalia. Space Grotesk is the only humanist sans permitted; it shares Bebas's slight industrial flavor but adds the warmth and humanism that prevents the page from feeling like a defense-contractor brochure. Where the page needs to whisper rather than announce, Space Grotesk does it. - **Numerals & Tickers — *Major Mono Display* (weight 400).** Used exclusively for price tickers, footprint-volume readouts, and the brass console's drift-needle indicator. Major Mono is a one-trick monospaced font that looks like a 1968 IBM Selectric ball element; it is reserved for *numbers only*, never running text. This protects mono from the 95%-saturated mono trend by relegating it to a single, ceremonial role. The three-voice arrangement (display all-caps, humanist sans body, ceremonial monospace numerals) is borrowed from the credit-line typography on a Voyager Golden Record, where each role is hard-walled. **Palette — aurora-gradient, eight stops, never blended into a single soft mush:** - `#0A1A2E` — *Midnight Vacuum.* The deepest void color, used for the atlas background only. - `#16264D` — *Indigo Mantle.* The starfield's middle layer, where parallaxed stars sit. - `#4DD0B3` — *Aurora Mint.* The first aurora band; also the constellation-line color on hover. - `#7E5BEF` — *Aurora Violet.* The middle aurora band; used for category-label keylines. - `#FFB347` — *Aurora Persimmon.* The third aurora band; used for the console strip's needle and the meteor-streak accents. - `#F4E9D8` — *Lunar Cream.* The console strip ground color and all body-text foreground; the only "warm neutral" on the page. - `#C9A96E` — *Brass Knob.* Used for the console rocker switch, the wordmark serif-stroke detail, and any UI element that should read as "physical." - `#E94560` — *Comet Coral.* The single warning/error/transactional-alert color; used sparingly and never decoratively. The palette refuses the dominant **warm + gradient (97%/97%)** corpus combo by being **cool-dark + aurora-gradient** — a gradient stack that lives only in named, separable bands rather than a wash. Aurora-gradient is at 4% in the corpus; the design fully claims it. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration.** Every visual element is either SVG or a procedurally-generated canvas effect, with two reserved imagery primitives (lens-flare, star-celestial) doing the heavy work. - **The Starfield (star-celestial, 2% in corpus — claimed).** A hand-authored set of **412 stars** placed on a 1600×900 grid, each rendered as a `` with radius proportional to a magnitude value (0.5px–4px). Stars are colored from a five-stop palette derived from real stellar classifications: O-class blue-white (#C8DDFF), A-class white (#F4F8FF), G-class yellow (#FFE5B4 — our sun's class), K-class orange (#FFB347), M-class red (#FF8B6E). The 412 number is not arbitrary; it is the count of stars visible to the unaided eye on a clear night from 30°N latitude. Each star **twinkles** independently via a CSS `opacity` keyframe with a randomized 4–11s duration — so the field never pulses in unison, which would feel mechanical. - **The Constellations.** 88 named constellations are pre-authored as polyline data in `stars.json`. Each constellation is drawn only when its category is hovered or in the viewport; otherwise the lines are absent. Constellations include literal-IAU shapes (Lyra, Cetus, Andromeda) and **invented mock-IAU constellations** named after marketplace concepts: "*Mercator*" (the merchant), "*Lampas*" (the lamp), "*Vinculum*" (the bond), "*Pondus*" (the weight). The mock constellations are a small whimsical-creative gift; they are drawn in the same dotted-line vocabulary so they don't visually announce themselves as fictional. - **Lens-Flare (7% — used distinctively).** Three flare-points at fixed positions on the atlas (top-left, mid-right, bottom-center) emit **anamorphic lens streaks** — horizontal bars of light, 1px tall and 240px wide, with a Gaussian falloff. The streaks pulse in a triangular cycle (8s in, 11s out, 6s rest) so they appear to be coming from a slow rotating mirror. Lens-flare is not used as decoration on a hero photo (the dominant use in the corpus) — it is used as **functional light-source notation**, marking the three points where the page's narrative warmth originates. - **Aurora Bands.** Three SVG-filtered gradient ribbons, each 320px tall, drift horizontally across the top third at 0.06 vh/s (left band), 0.04 vh/s (mid band), 0.08 vh/s (third band, opposite direction). The drift uses `feTurbulence` with `baseFrequency="0.012 0.018"` to add organic warp, evoking the way real aurorae unfold. The bands never align — their phase offsets are co-prime — so the curtain pattern never repeats within a viewing session. - **Meteor Streaks.** At 17–34 second random intervals, a single short white-to-coral streak crosses the atlas at a random angle, lasting 0.85s. There is never more than one meteor on screen at a time. Meteors are the page's only "delight" easter-egg; they cost nothing and reward attention. - **The Console.** A single hand-drawn SVG of a brass-and-cream organ-style control surface: rocker switch (left), drift needle (center), wordmark plate (right). The console is the page's only skeuomorphic element; it grounds the cosmic atlas in a tactile Earth-side reading-room. - **No icons.** No icon font, no FontAwesome, no Phosphor. Where iconography would normally appear (close, expand, sort), the design substitutes **single Bebas characters**: the letter "X" for close, the symbol "↗" for outbound, the symbol "≡" for sort. Three glyphs total; that is the entire icon library. ## Prompts for Implementation Build footprint.market as **a single-route, vertically scrolled celestial atlas** — one HTML file, one CSS file, one JS module, and one `stars.json` data file. Treat the page as a 90-second drift through an interplanetary trading floor where each listing is a star and the aurora flickers behind everything. **There is no CTA-heavy hero, no pricing block, no stat grid, no testimonial row, no contact form, no email signup, no logo wall, no "trusted by" strip.** The page commits, instead, to telling the story of the market as a sky. **Storytelling structure (vertical scroll, six narrative phases tied to scroll progress 0.0 → 1.0):** 1. **Phase 0.0 → 0.10 — The Curtain Rises.** On page load, the atlas is black. The aurora curtain fades in over 2.4 seconds (`opacity 0 → 1`, `cubic-bezier(.2, .9, .3, 1)`). The console strip slides up from the bottom over 0.9 seconds. Stars begin twinkling individually, with their entrance times offset by a hash of their (x,y) coordinates so they "wink on" in a slow rolling pattern across the field — never all at once. The wordmark "FOOTPRINT.MARKET" type-sets letter-by-letter into the console plate at 60ms per glyph, in Bebas Neue, with an aurora-mint underline that draws in last. Total: 4.2 seconds before the user scrolls. 2. **Phase 0.10 → 0.30 — The Atlas Reveals Categories.** As the user scrolls, the first six constellations brighten in sequence, each accompanied by a Bebas category label that fades in 0.4s after its constellation lines complete drawing. Categories include "Carbon", "Travel", "Habitat", "Cuisine", "Apparel", "Materials" — six listings of footprint-tradeable goods. Each category's stars are positioned on a real IAU constellation so they retain visual coherence. 3. **Phase 0.30 → 0.55 — The Drift.** A long, sparse middle phase where the atlas is the only thing on screen. The user scrolls and the starfield parallaxes at three depths (-0.3, 0, +0.4 vh per scroll-vh). The aurora bands continue drifting independently of scroll. Cards remain pinned to their stars. **Two meteors** are scripted to occur during this phase at scroll-progress 0.38 and 0.49, drawing a coral streak across the atlas. There is no text in this phase except a single Space Grotesk italic line floating mid-screen: "*every footprint becomes a star, eventually*". 4. **Phase 0.55 → 0.75 — The Mock Constellations.** The four invented constellations (*Mercator, Lampas, Vinculum, Pondus*) draw in slowly, each over 1.4 seconds, accompanied by a hand-set Major Mono Display ledger entry to the right: "MERCATOR — 14.2 t CO₂e", "LAMPAS — 3.71 t", etc. The numbers tick up in a counter-animate from zero to their target value over 1.8 seconds. 5. **Phase 0.75 → 0.92 — The Console Engages.** The console strip's drift-needle, which has been sitting at center, swings to the right and the rocker switch animates into "MARKET OPEN" position. A single Space Grotesk line below the console fades in: "the floor is open. trades settle at next aurora." 6. **Phase 0.92 → 1.00 — The Curtain Falls.** The aurora bands fade to 35% opacity. The starfield darkens by one stop. The atlas remains; the wordmark in the console plate begins a slow pulse (opacity 1.0 → 0.78 → 1.0, 6.5s cycle). There is no footer in the conventional sense — only the console strip continuing to live, indefinitely, at the bottom of the viewport. The user can scroll back up. **Border-animate (2% in corpus — claimed as the dominant interaction pattern):** Every card on the atlas has an **animated SVG border** that draws on hover: a 2px stroke in aurora-mint (#4DD0B3) traces the card's perimeter from the top-left corner clockwise, completing in 0.42 seconds with a `path-length` keyframe. On unhover, the stroke fades to 0 opacity over 0.18 seconds (does not retract — fades). This is the page's primary interaction feedback. Because border-animate is at 2% saturation in the corpus, and because every interactive surface on this page uses it, the design fully owns the technique. **Subordinate interactions (used sparingly):** - **No cursor-follow** (which sits at 83% — explicitly avoided). The cursor is a normal cursor. - **No magnetic buttons** (75% — avoided). Buttons sit where they are placed. - **No spring physics** on UI motion (81% — avoided). Motion uses CSS `cubic-bezier` only, with curves chosen for a slightly *over-damped* feel — the opposite of springy. - **No tilt-3d cards** (25% — avoided). Cards are flat planar surfaces; the depth in the design comes from parallax and aurora layering, not from per-element 3D. - **Stagger** is used only on the initial wordmark type-setting (Phase 0.0) and the constellation-line draw-in (Phase 0.10–0.30); nowhere else. **Technical notes:** - Single HTML file, single CSS file (~480 lines), single JS module (~280 lines), single `stars.json` (~412 entries × ~40 bytes ≈ 16 KB). - All animations CSS-driven where possible; JS only for scroll-progress dispatch, meteor scheduling, and constellation hover-state. - Atlas is one large inline `` — easier to keep consistent than multiple SVGs. - Aurora curtain is **three stacked `
`s** with `background: linear-gradient(...); filter: url(#aurora-warp);` referencing an SVG `` with `feTurbulence` + `feDisplacementMap`. This is the trick that gives the curtain its organic warp without needing WebGL. - Reduced-motion: aurora bands stop drifting, meteors are suppressed, star-twinkle is reduced to 18% amplitude. The atlas remains. - The site is a **single page**; there are no internal routes, no detail modals, no checkout, no listings beyond the six categories. The design is a brand-statement, not a marketplace UI. (A real marketplace would be built on a separate, denser surface; this is the welcome poster.) ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Constellation-grid replaces card-grid.** Card-grid sits at 82% in the corpus — the second-most-saturated layout pattern after full-bleed. footprint.market keeps the *card* as a unit but discards the *grid* lattice entirely, replacing it with a hand-authored 88-anchor IAU starfield positioned via absolute coordinates from a `stars.json` file. Across breakpoints the layout *rotates* the celestial sphere rather than reflowing into a column. This is, as far as the corpus shows, a unique inversion of the dominant layout pattern. 2. **Aurora-gradient as separable bands, not a wash.** Aurora-gradient is at 4% in the palette frequency analysis, and the warm+gradient combination dominates at 97%/97%. footprint.market uses **cool-dark + aurora-gradient** with the gradient committed to *three named, separable, independently-drifting curtain bands* rather than a single soft wash. The palette refuses the warm-gradient orthodoxy. 3. **Border-animate as the primary interaction language.** Border-animate sits at 2% in the patterns frequency. This design routes every interactive feedback signal through SVG-stroke perimeter draws — a single, consistent, restrained vocabulary that contrasts directly with the cursor-follow / magnetic / spring orthodoxy (83%/75%/81%) explicitly avoided here. 4. **Star-celestial motif at full commitment.** Star-celestial is at 2% in the motifs frequency. The design treats the star as the literal load-bearing layout primitive — every card occupies a named star, every category is a literal constellation, the entire page is a planisphere. The motif is not decorative garnish; it is the architecture. 5. **Bebas Neue used only at one weight, with sized contrast.** Bebas-bold is at 5% in typography frequency, and most uses pair it with a body sans of similar weight. footprint.market commits to Bebas's single-weight constraint and achieves typographic hierarchy purely through *size* and *tracking* — a discipline rarely seen in the corpus. 6. **Retro-futuristic aesthetic at 1970s-NASA register.** Retro-futuristic sits at 3% in the aesthetic frequency, and most uses lean Y2K-chrome or vaporwave-mall. footprint.market positions retro-futurism in the *Pan-Am-meets-Voyager* register: warm-cream consoles, Major Mono Display tickers, hand-authored constellations, and a Carl-Sagan-paperback voice. This temporal anchor (1970s public-television speculative futurism) is, as far as the corpus shows, unclaimed. 7. **Whimsical-creative tone with a straight face.** Whimsical-creative sits at 7% in tone frequency. footprint.market commits to the tone — invented mock constellations, a meteor easter-egg, italic marginalia about footprints becoming stars — but delivers all of it with the deadpan typographic decorum of a 1972 trade-publication editorial. The whimsy is in the substance, not the surface. 8. **Avoided patterns from frequency analysis:** cursor-follow (83%), spring (81%), stagger as a default (76%), magnetic (75%), parallax-as-only-trick (95%), tilt-3d (25%), full-bleed photography backgrounds (93%), warm palette (97%), gradient as wash (97%), card-grid lattice (82%), centered (82%), hand-drawn aesthetic (96%), photography (98%), mono everywhere (95%), pastoral-romantic (34%). The design either reframes these patterns into something distinct or refuses them outright. **Chosen seed (from assignment):** *aesthetic: retro-futuristic, layout: card-grid, typography: bebas-bold, palette: aurora-gradient, patterns: border-animate, imagery: lens-flare, motifs: star-celestial, tone: whimsical-creative.*