# Design Language for footprint.markets ## Aesthetics and Tone footprint.markets is **a Cyberpunk Tide-Tracker Bazaar** — a playful, half-broken trading-floor terminal staffed entirely by an algorithmic kelpie that has decided the most honest market in the universe is the market of footprints left in tidal silt. The premise is intentionally absurd, and the design honors that absurdity by being technically meticulous: imagine a 2089 night-bazaar built into the wet concrete of a decommissioned tidal-power station, where every booth is a diagonal-sliced LED panel, every quote-ticker is a slow-pulsing waveform of bare-foot prints, and every transaction is denominated in *the smell of brine after 3am rain*. The aesthetic is cyberpunk **without the chrome and without the rain-noir** — instead a *dusty, muted, hand-soldered cyberpunk*, the kind drawn in chalk on a salt-stained equipment-shed wall by an off-duty technician who has fallen in love with the foam-pattern of the outflow channel. It is tender. It is also extremely strange. The tonal commitment is **playful at 24% — claimed and pushed against the prevailing seriousness of cyberpunk.** Where most cyberpunk sites snarl, footprint.markets *grins crookedly*. The voice is that of a stall-vendor who has been awake for forty hours, who knows three languages, who refuses to take their own commodity quite seriously, and who is therefore the only person on the dock you can actually trust. Copy reads in slightly broken second-person: "you brought a footprint? show me. yes. that one is a *good footprint*. four credits." Humor is small and architectural, never *zany*; the page never winks at the visitor twice in the same sentence. The mood is **after-midnight-bazaar-warm-under-cold-LED** — exactly the temperature contrast of a vendor's portable kerosene heater under a magnesium streetlight, photographed at ISO 6400 and then desaturated until the only chromatic survivors are *brine*, *bruise*, *peach-ember*, and *graphite*. This is not a fintech site. This is not a marketplace site. This is a **single, scrolling speculative fiction** that happens to be shaped like the homepage of a very small, very specific bazaar. The visitor leaves remembering an atmosphere, a typeface, and the exact rhythm of a slow pulse — not a feature list. Pricing blocks, CTA grids, and stat-counters are explicitly forbidden by this brief; if a number appears, it appears as part of a quoted footprint catalog ("Lot 17 — left heel, child, sandstone — pulse interval 1.8s") and never as a dashboard tile. ## Layout Motifs and Structure The structural commitment is **diagonal-sections at 5% in the registry — claimed and made the spatial logic of the entire site.** Every section boundary on footprint.markets is sliced at exactly **17.4°** — the angle of repose of fine wet sand, the steepest a tidal footprint can hold before it slumps. This angle is enforced as a single CSS custom property (`--shore-slope: 17.4deg`) applied as `clip-path: polygon(...)` to every `
` on the page. The diagonals do not alternate; they all lean the same direction, **down-and-right**, the way an evening tide retreats across a long western beach. The eye is therefore *pulled diagonally through the document*, never settling into the safe horizontal banding that dominates 93% of the corpus. The page is composed of seven diagonal stalls, top to bottom: 1. **STALL 00 — `the bazaar opens`** — a quiet, near-empty diagonal slab with the wordmark `footprint.markets` set in oversized slab-serif at the upper-left, and a single slow-pulsing waveform at the lower-right. The waveform *is the heartbeat of the entire site* — its pulse interval (1.8s) governs every other animation on the page. 2. **STALL 01 — `the catalog`** — seven footprint lots displayed as diagonal cards, each rotated to match the shore-slope, each with its own muted-color brine-stain and its own pulse-tagged metadata. 3. **STALL 02 — `the kelpie speaks`** — a diagonal column of monologue from the algorithmic kelpie, set in 28px slab-serif against a graphite slab; the text occasionally shudders in place at the pulse interval, a *pulse-attention* tic rather than an attention-seeking shake. 4. **STALL 03 — `the price-of-things`** — a row of three muted abstract-shape glyphs (a half-moon, a torn comma, a bevelled triangle) each labeled with a non-numeric price ("the smell of cold metal," "one promise, kept," "the second-to-last tide"). The shapes pulse-fade at the heartbeat. 5. **STALL 04 — `tidewise — a small almanac`** — a slim diagonal stripe of waveform almanac data: low tide, slack tide, the *footprint window*. Set in monospaced numerals beside slab-serif labels. 6. **STALL 05 — `how to bring a footprint`** — three diagonal panels of practical instruction, written in the second-person stall-vendor voice. Each panel includes a small abstract-shape pictogram drawn in 2px brine-line. 7. **STALL 06 — `the bazaar closes`** — a wide diagonal slab returning to near-emptiness, with a single sentence ("come back at low tide.") and the slow-pulsing waveform now extending across the entire viewport width as a final sign-off. The reading rhythm is **slow, oblique, and deliberately decelerating.** Each diagonal stall occupies a single viewport-height (`100vh`), with a snap-stop at each boundary; the visitor cannot skim. The diagonals interlock: the lower edge of stall N is the upper edge of stall N+1, and a 1px brine-colored hairline traces the exact shore-slope between them. **Centered layouts (82%), card-grid (82%), and full-bleed (93%) are explicitly avoided** in favor of this diagonal-snap reading column. The page is **maximum 1280px wide** at the content-spine level — the rest is bleed-margin filled with the muted graphite-and-brine substrate. A persistent **left-margin gutter** at 7.4% of viewport width is reserved for the *footprint-trail* — a single SVG path of small foot-shaped icons that fade in one at a time as the visitor scrolls, leaving a literal trail down the left edge of the document. By the time the visitor reaches stall 06, the trail is complete; if they scroll back to the top, the trail remains, *footprints do not unmake themselves*. ## Typography and Palette **Typography — slab-serif at 5% (claimed and load-bearing) paired with a single tech-mono accent.** This design rejects the corpus-default mono-on-sans pairing (mono at 95%, humanist at 49%) and commits to the rarer, heavier voice of slab. Slab-serif gives footprint.markets its *bazaar-signage weight* — the typographic equivalent of hand-painted board signs above the stalls. Google Fonts only, every face confirmed available: - **`Roboto Slab`** (weights 300, 400, 500, 700, 900). The principal voice. Used at the wordmark in 96px black, at stall titles in 48px medium, at body in 18px regular at 1.65 leading. Roboto Slab was chosen specifically because its slab terminals are *engineered, not romantic* — it carries the cyberpunk technical-trust of a sans-grotesk while wearing the slab outerwear of a 19th-century freight-stencil. This is the typographic embodiment of *muted cyberpunk*. - **`Bree Serif`** (weight 400 only, as a one-line accent). Used **only** for the kelpie's quoted speech and for the catalog lot-titles. Bree Serif is rounded, slightly handcrafted, slab-but-friendly; it warms the otherwise cool slab voice without ever drifting toward humanist or handwritten. Italic alternates are used for parenthetical asides in the kelpie monologue. - **`JetBrains Mono`** (weight 400, 500). Used for **numbers only** — pulse intervals, lot-IDs, tide times, footprint dimensions. Never for body text. Set 1px below the slab x-height for visual continuity. This is the only mono on the site and it earns its place by being the language of the *machine-vendor*, not the human-vendor. **Type rules:** - `letter-spacing: 0` everywhere except the wordmark, which gets `-0.02em`. - `font-feature-settings: "ss01", "tnum"` on JetBrains Mono for tabular numerals. - Wordmark cap-height aligns to the upper-edge of stall 00's diagonal — the slab terminals visibly touch the slope. - Body text at 18px / 1.65 / max-width 62ch; long-form passages in stall 03 only. - Stall titles use `font-stretch` not available in Roboto Slab, so are achieved via `transform: scaleX(0.94)` to subtly compress against the diagonal. **Palette — muted at 27% (claimed and pushed below typical saturation).** This is *cyberpunk drained of its neon* — the after-image of a city, not the city itself. Eight colors, all derived from a single muted-cyberpunk source-photograph (a kerosene heater under a magnesium streetlight at a coastal flea market, ISO 6400, then desaturated 38%): - **`#1B1F26`** — *graphite-substrate*. The page background. Not black; a near-black with a faint blue-graphite undertone. Used as the dominant ground (60% of total surface). - **`#2C2A2F`** — *graphite-warm*. A subtle warm graphite, used for stall 03's monologue slab and for the diagonal hairline-shadow under each section boundary. (15%) - **`#7C8B7A`** — *brine-sage*. The primary muted accent. A drained sage-green-with-grey-undertone, the color of seaweed dried on a ferry-rail. Used for the waveform line, the trail-of-footprints SVG, and 50% of the abstract-shape glyphs. (8%) - **`#A07B6B`** — *bruise-clay*. The secondary muted accent. A drained terracotta-with-purple-undertone — a bruise on dry clay. Used for the kelpie's eyes (Bree Serif accent text) and for the catalog lot-titles. (5%) - **`#D9B597`** — *peach-ember*. The single warm-light highlight, used *sparingly* and only at the heartbeat-pulse. The pulse animates from `#7C8B7A` toward `#D9B597` and back, every 1.8s. Less than 2% of total surface. (2%) - **`#C7C2B8`** — *bone-paper*. The body-text color on graphite. Not white — a very pale warm-grey that reads as *paper-under-fluorescent-light* rather than as a high-contrast white. (4%) - **`#5A6E78`** — *fog-steel*. Used for secondary metadata, the pulse-tag labels, and the JetBrains Mono numerals. (4%) - **`#3A3036`** — *bruise-deep*. Used for the diagonal section-boundary fills (the stripe of slightly-different graphite that visually announces a slope). (2%) The palette **explicitly avoids gradient (97%), warm (97%), and high-contrast (16%)** — the page is flat-color, low-contrast, and cool-with-warm-pulses. There are no gradients on this site. There are no shadows on this site. There is *one* glow, and it lives only inside the heartbeat-pulse. ## Imagery and Motifs **Imagery substrate: abstract-shapes at 2% — claimed as the universal visual language of the entire site.** No photography. No 3D render. No hand-drawn illustration. No collage. No watercolor. Every visual artifact on footprint.markets is a **flat 2D abstract shape** rendered as inline SVG, no raster assets at all. The shape library is small, deliberately constrained, and committed to: - **The Footprint Glyph.** Not a literal foot — a *bevelled, asymmetric oblong with five small inset half-circles along its leading edge.* Drawn at 12px, 24px, 48px, and 96px sizes. Used in the left-margin trail and as the bullet for catalog lot-titles. 32 total instances on the page, each with a slight individual rotation (±3°) and a slight individual size jitter (±5%) so that no two footprints in the trail are identical. - **The Wave-Form Line.** A single-stroke SVG path, 1.5px brine-sage, drawn from a sampled audio of slack-tide breaking on packed sand. The waveform appears in stall 00 (small, lower-right), stall 04 (medium, central), and stall 06 (full-width, viewport-spanning). Each instance pulses at the 1.8s heartbeat, with the stroke-color animating toward peach-ember at the apex of the pulse and the path's `stroke-dasharray` shifting by 4px to suggest the wave *is moving along its own length without ever changing shape*. - **The Three Price-Glyphs.** A half-moon, a torn comma, and a bevelled triangle. Each drawn at 96px on the diagonal, each filled with a single muted color from the palette, each with no stroke and no shadow. These are the *iconography of the bazaar's prices* — the half-moon is the price of low-tide footprints; the torn comma is the price of footprints found on the boundary between dry and wet sand; the bevelled triangle is the price of a footprint a child left running. The glyphs pulse-fade at the heartbeat. - **The Stall-Sign Pictograms.** Six tiny 24px abstract-shape pictograms in stall 05, each drawn in 2px brine-sage stroke, each abstracted to the point of mild illegibility — they are *signs that you must stand at the stall to read*. Examples: a bevelled trapezoid (= "kneel here"), a rotated semicircle (= "wait for the slack"), a three-dot column (= "show, do not tell"). **Motifs — wave-forms at 1% (the rarest motif in the entire corpus, claimed as the structural heartbeat).** The single most important visual element on footprint.markets is the wave-form line, and it is *not decorative* — it is the **time-signature of the page itself**. The wave-form's pulse (1.8s) governs: - Every CSS animation on the page (`animation-duration: 1.8s` on every keyframe). - Every text-shudder, every glyph-fade, every footprint-trail-reveal. - The cursor itself: a small custom 8px brine-sage dot that pulses to peach-ember and back at 1.8s. - The wordmark: the period in `footprint.markets` is the only character that pulses, peach-ember at the apex. The wave-form is therefore both motif and meter — the *visual conscience* of the design. Every other element answers to it. A second, smaller motif: **brine-stain washes** behind the catalog lots in stall 01. Each lot has one organic-blob brine-stain in a single muted accent color, at 18% opacity, positioned diagonally beneath the lot-title. These are the *only organic shapes on the site* and are kept small enough to never dominate the geometric vocabulary. **Explicitly avoided imagery patterns** (from frequency analysis): photography (98% of corpus — banned here), gradient-mesh (19% — banned), neon-glow (11% — banned, despite cyberpunk aesthetic), bokeh (7% — banned), lens-flare (7% — banned), grain-overlay (9% — banned, the design wants its surfaces clean and matte). The site is **flat, vector, and uncompromising about it.** ## Prompts for Implementation Build footprint.markets as **one HTML document, one CSS file, one ES module, no framework, no build step, no images.** The asset budget is essentially zero raster — the entire visual language ships as inline SVG. The complete file inventory: - `index.html` — semantic structure, seven `
` containers, all SVG inlined. - `bazaar.css` — single stylesheet, custom properties at the root, diagonal clip-paths per stall, the pulse keyframe. - `pulse.js` — a single ES module that owns the heartbeat clock, dispatches a `pulse` CustomEvent every 1.8s, and lets every other interaction subscribe to that clock. **All animation is driven by this single timer.** Footprints in the trail reveal on scroll-intersection but their fade-in *snaps to the next pulse boundary* — nothing on this page animates outside the heartbeat. **Storytelling spine (HTML structure):** ```

footprint.markets

...

the catalog

  1. 17

    left heel · child · sandstone

    pulse interval
    1.8s
    weight
    14kg
    brought by
    the kelpie
you brought a footprint? show me. yes. that one is a good footprint. four credits.
``` **Animation choreography — every effect on this page lives inside the heartbeat:** 1. **The Pulse Clock.** A single `setInterval(dispatch, 1800)` in `pulse.js`. Every animated element listens for the `pulse` CustomEvent and toggles a `.is-pulse` class for 600ms. CSS handles the visual transition. **Nothing on the site animates on its own arbitrary timeline.** This is the *one motion law* of footprint.markets and it is rigid. 2. **The Pulse Visual.** When `.is-pulse` is applied to an element, its color shifts from `#7C8B7A` (brine-sage) toward `#D9B597` (peach-ember) over 200ms ease-out, holds for 200ms, returns over 200ms ease-in. This is the *only color transition on the site*. 3. **Pulse-Attention pattern (claimed at 2%).** Three specific elements use pulse-attention as a UI mechanism: (a) the wordmark period; (b) the cursor dot; (c) the price-glyphs in stall 03. These pulse continuously, drawing the eye to *the rhythm of the bazaar* without ever escalating to attention-grabbing flicker. The pulse is **slow enough to feel like a heartbeat**, not a notification. 4. **Footprint-Trail Reveal.** As the visitor scrolls, IntersectionObserver fires for each stall; on the next pulse-boundary, the next four footprints in the left-margin trail fade in (300ms ease-out). The trail is cumulative; scrolling back does not unmake it. 5. **Diagonal Section-Snap.** `scroll-snap-type: y mandatory` on `
`, `scroll-snap-align: start` on each `
`. The visitor can free-scroll but the page resists, settling on each diagonal stall. 6. **Kelpie Text-Shudder.** The kelpie's monologue blockquote receives a 4-pixel `transform: translateX()` shudder at every fourth pulse (every 7.2s), lasting 80ms. This is the *only non-color animation on the page* and it should feel like the algorithm cleared its throat, not like the page is broken. 7. **Catalog-Lot Hover.** On `:hover`, a lot's brine-stain expands from 18% opacity to 32% opacity over one pulse-interval (1.8s ease). No transform, no shadow, no scale. The lot's pulse-tag also synchronizes to the global pulse for as long as the cursor remains. 8. **Waveform Drift.** Each waveform path's `stroke-dasharray` advances by 4px per pulse, giving the wave a slow lateral drift. The path itself never re-renders; only the dash-offset changes. **Explicitly avoided patterns** (from frequency analysis): parallax (95% — banned), cursor-follow with magnetic-trails (75–83% — explicitly **not** used; the cursor here is a static-position dot that only changes color), spring/elastic easing (75–81% — banned in favor of plain ease-in-out at the pulse's own tempo), tilt-3d (25% — banned), card-flip (14% — banned), counter-animate (13% — banned, no numbers count up on this site). **Storytelling priorities (above all):** - **Atmosphere over information.** A visitor who reads only the first stall and the kelpie monologue should leave with a complete emotional impression of the bazaar. - **Rhythm over interactivity.** The page is a metronome with content draped over it. The visitor's job is to *feel the pulse*, not to click anything. - **Restraint over feature.** No login. No CTA. No pricing tier. No newsletter capture. The page does not ask for anything from the visitor — it only offers a small, strange world. The design treats this restraint as the central commitment, not a deficiency to be patched later. - **Type as architecture.** Roboto Slab carries the structural weight of the page. If the visitor disabled CSS, the page should still read as *a slab-serif bazaar broadside*, not as a generic document. **Avoid:** CTA-heavy layouts, pricing blocks, stat-grids, dashboard tiles, testimonial carousels, feature-comparison tables, FAQ accordions, social-proof logos, sign-up modals, popups of any kind. The brief is single-document narrative cyberpunk, and these conventions are explicitly out of scope. ## Uniqueness Notes This design commits to differentiators chosen explicitly to avoid duplication with other CMassC sites and to lean into the underused patterns surfaced by frequency analysis. The full Planned Seed is **`aesthetic: cyberpunk, layout: diagonal-sections, typography: slab-serif, palette: muted, patterns: pulse-attention, imagery: abstract-shapes, motifs: wave-forms, tone: playful`** — and every dimension is committed to as a load-bearing structural decision, not as a surface tag. Differentiators from the existing 180-design corpus: 1. **Cyberpunk without neon, without rain, without chrome.** Cyberpunk sits at 22% in the corpus and is overwhelmingly executed as neon-electric / dark-neon palettes (15%+ combined) with chrome-metallic accents (8%) and gradient meshes (19%). footprint.markets executes cyberpunk as **muted, drained, kerosene-warm-under-magnesium-cool** — the palette is flat, the saturation is low, there is exactly one warm light (peach-ember) and it lives only inside the heartbeat-pulse. This reframes cyberpunk as *a setting and a politics*, not a color palette. 2. **Slab-serif as the principal voice (5% in corpus, almost virgin territory).** The corpus is dominated by mono (95%) and humanist (49%); slab-serif appears in only 5% of designs and almost never as the lead voice for a tech-coded site. Roboto Slab here carries the structural weight of the page, with Bree Serif as a single warmer accent and JetBrains Mono confined to numerals only. The design *rejects the Inter/Space-Grotesk monoculture* of the corpus. 3. **Diagonal-sections at 5%, claimed as the spatial logic of the entire document.** The corpus reads horizontally: full-bleed (93%), centered (82%), card-grid (82%). footprint.markets slices every section at exactly 17.4° (the angle of repose of wet sand) and forces the reading eye diagonally down-and-right through the page. There are no horizontal section boundaries on the site — the page *cannot be read in horizontal bands*. 4. **Pulse-attention at 2% as the meter of the entire page.** Pulse-attention sits at the bottom of the patterns list (2%); footprint.markets makes it the *one motion law* of the design. A single 1.8s heartbeat clock (the angle of slack-tide pulse) governs every animation on the page. **Nothing animates outside the pulse.** This is the design's most idiosyncratic structural decision and the one that most distinguishes it from the parallax/cursor-follow/spring/stagger orthodoxy of the corpus (95%/83%/81%/76%). 5. **Wave-forms at 1% — the single rarest motif in the corpus, claimed as the time-signature of the entire page.** Where most cyberpunk sites reach for circuit (6%) or sci-fi-hud (5%) motifs, this site commits to the wave-form, treating it as both visual decoration and animation metronome. The wave-form is the *visual conscience* of footprint.markets and every other element answers to it. 6. **Abstract-shapes at 2% as the only imagery substrate. No photography, no raster, no hand-drawn.** The corpus is 98% photography-aware; footprint.markets ships zero raster images. Every glyph, footprint, waveform, and price-icon is inline SVG, total weight under 12kb. This is the design's tightest material constraint and it dictates every other decision (no gradient meshes possible, no neon glow possible without painting it in SVG filters, etc.). 7. **Muted palette at 27%, pushed below typical saturation toward 38%-desaturated.** Most muted-palette sites in the corpus retain enough chroma to feel "designer-muted." This palette is muted **further** — derived from a single ISO-6400 photograph desaturated 38% — so that the only color event on the page is the heartbeat-pulse from brine-sage to peach-ember. The page is mostly graphite, brine, bone, and bruise. 8. **Playful tone (24%) executed with restraint, not zaniness.** Most playful-tone sites in the corpus reach for bright pastels, bouncy springs, and exclamation-point copy. footprint.markets is playful in voice (the kelpie, the absurd commodity, the broken second-person stall-vendor narration) but rigorously controlled in form (slow pulse, muted palette, no bouncy easing). The humor is *architectural and tender*, never zany. 9. **Wordmark period as the only continuously-pulsing character.** A small, specific, almost-secret detail: in `footprint.markets`, only the period pulses. It is the *bazaar's heart* in typographic form. This single detail is the design's quietest signature and is intended to be the thing the visitor remembers a week later. **Patterns explicitly avoided** (per frequency analysis): hand-drawn aesthetic (96%), photography imagery (98%), full-bleed layout (93%), parallax (95%), cursor-follow with magnetic trails (75–83%), spring/elastic easing (75–81%), warm gradient palettes (97% each), mono typography (95%), tilt-3d (25%), card-flip (14%), counter-animate (13%), neon-glow (11%), gradient-mesh (19%), grain-overlay (9%). The design's discipline is precisely in *not reaching for these* despite cyberpunk's gravitational pull toward most of them. **Chosen seed (verbatim, for the registry):** `aesthetic: cyberpunk, layout: diagonal-sections, typography: slab-serif, palette: muted, patterns: pulse-attention, imagery: abstract-shapes, motifs: wave-forms, tone: playful`.