# Design Language for footprint.broker ## Aesthetics and Tone footprint.broker is **a 1928 celestial atlas being repainted, one folio at a time, by a watercolorist who keeps her studio above a small carbon-credit brokerage on the rue de Tournon** — a place where the daily work of *brokering footprints* (matching emissions to retirements, sources to sinks, polluters to forest plots) is treated as the slow, manual cataloguing of stars. Every transaction is a constellation drawn by hand: pale washes of pigment across hot-pressed cotton paper, a scratchpad of art-deco numerals in the margin, a single line-illustrated swallow flying north across the top of the page. The mood is **conversational** — not corporate, not authoritative, not data-haunted. The site speaks to its visitor at the level of a friend across a small marble table at Café de Flore: "*Look — here is what was emitted last Tuesday. Here is who paid. Here is the pine forest in Galicia that took it back. Would you like to see the brushwork?*" This is the **watercolor** aesthetic (11% in the registry — claimed and pushed past its current ceiling) executed *not* as a Pinterest-grade pastel decoration but as the **literal medium of the page**: every panel, every chart, every numeral, every navigation rule is rendered as if pigment had been laid wet-on-wet onto cold-press paper, allowed to bloom, then dried with a hairdryer at low heat. The color does not sit *on* the page — it sits *inside* the paper. There are no flat fills anywhere. Every surface that another site would render with `background: #fff` or a hard CSS gradient is instead a layered SVG `` stack of `feTurbulence` (stochasticity) + `feDisplacementMap` (paper-tooth distortion) + `feGaussianBlur` (capillary spread) + `feComposite` (pigment density) tuned to mimic Schmincke Horadam transparent watercolors on Arches 300gsm. The **star-celestial** motif (only 2% in the registry — the second-rarest motif token — actively claimed) is realized as the *bookkeeping system itself*: every emission record is a star, plotted on a slowly rotating equatorial chart, with its declination set by the vertical timestamp and its right ascension set by the horizontal counterparty index. The chart drifts at the sidereal rate (1.0027× per day) so a visitor returning a week later finds the constellation visibly rotated. The tone of voice is **conversational** (only 6% in the registry — claimed). Every microcopy fragment is written in the second person, in sentences a bookkeeper might say aloud while pouring two cups of weak coffee. "We brokered 412 tonnes today." "Three of those are still looking for a forest." "The star above the ledger is Vega — she rises at 03:11 in May." Numerals are spelled in art-deco capitals when they appear in headings, and rendered as **handwritten ink-and-wash digits** when they appear inside the watercolor charts — the two never overlap, so the page reads as a *typographer and a watercolorist passing the same notebook back and forth*. ## Layout Motifs and Structure The structural commitment is **card-grid** (82% in the registry, deliberately reclaimed but radically remade). The card-grid here is **not a Bento, not a CMS template, not a feature comparison rack**. It is a **plate-bound astronomical folio** — 18 pigment cards arranged in three folio openings of six plates each, exactly as in Bayer's 1603 *Uranometria* or the 1928 IAU constellation map, where each plate occupies a regular slot but every plate is rendered as a unique watercolor study. The grid is *the same in dimension* (6 cards per opening, 3 openings stacked, total 18 cards), but the *content of each card is unique watercolor pigment* — no shared chrome, no shared typography lockup, no shared CTA shape. Card-grid as folio, not as marketing wallpaper. Each card occupies a fixed slot of 1fr at desktop, three columns × six rows, with a 4.2% gutter that widens to 6.8% at the folio binding (the centerline between columns 2 and 3, where the spine of the imagined book would fall). The gutter is rendered as **pale unmarked paper** with a single hairline of 0.4px Payne's Grey running vertically — the *binding stitch*. Above the binding stitch a single ink-and-wash swallow (line-illustration) flies once per minute, animated along an SVG `` path from the bottom-left of the page to the top-right, fading into the paper at the 70% mark. The reader navigates by **progressive-disclosure** (only 2% in the registry — among the rarest pattern tokens — claimed as the controlling interaction model). A visitor lands on the folio cover: a single watercolor wash of the night sky over the Atlantic in late May, with the title *footprint.broker* set in a generous art-deco display capital. Touching or hovering any region of the wash reveals — slowly, at 600ms ease-in-out — a single card of the underlying folio. The card *paints itself in*: first a pale wash of background pigment, then a second wash of mid-tone, then the line-illustration ink, then the art-deco numerals, then the body text — a **four-stage watercolor build** mirroring how a real watercolorist works wet-into-wet, then wet-on-dry. Each card disclosure takes 2.4s end-to-end. A reader who does nothing simply sees the cover; a reader who explores discovers eighteen folios in sequence; a reader who waits four minutes sees the whole atlas paint itself in unattended, in the order Bayer himself would have painted it (largest constellations first). There are **no tabs, no accordions, no hamburger menus, no sticky headers, no toast notifications, no modals, no carousels**. The progressive disclosure is the only navigation primitive. There is no scroll-to-top button — the reader returns to the folio cover by pressing **`Esc`** or by waiting eight seconds without interaction (a slow re-binding, 1.6s, where the cards re-collapse back into the cover wash like pigment being lifted by a clean wet brush). ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Limelight`** (regular, single weight) — the principal display face, serving the **art-deco-display** commitment (only 4% in the registry — claimed). Limelight is a single-weight art-deco titling face with the elongated apexes and stepped ligatures characteristic of 1925–1932 Parisian theatre typography (the Folies Bergère, the Casino de Paris). Used exclusively for the wordmark *footprint.broker* on the cover (clamp 4.8rem → 9.2rem, tracking +0.06em), for the folio numerals at each card corner ("PLATE I" through "PLATE XVIII", set in small caps at 0.86rem, tracking +0.18em), and for the chapter headings of each of the three folio openings ("THE EMITTERS", "THE BROKERS", "THE FORESTS"). Never used for body, never below 0.86rem, never above 9.2rem. Color: Payne's Grey #2C3340. - **`Cormorant Garamond`** (variable weights 300–600, italic available) — the secondary face for body, captions, and any prose paragraph longer than two lines. Cormorant has the open apertures and slightly Mannerist cursive italic that pairs naturally with watercolor — the strokes feel as if they were laid down with a Series 7 sable round, not extruded by a printer. Body 1.05rem weight 360, italic captions 0.9rem weight 380, all set to color #2C3340 with a 92% opacity so the text *bleeds slightly into the paper*. - **`Caveat`** (variable weights 400–700) — the handwritten ink-and-wash numeral face, used **only inside the watercolor charts** for plotted numbers (e.g., "412 tCO2e", "RA 18h36m", "DEC +38°47′"). Caveat is a wet-tipped pen face with humanist proportions and a slight forward slant, and is set in a deeper ink color (#1A2030 — near-black with a blue-violet undertone, mimicking Winsor & Newton Indigo watercolor). Sized 1.1rem to 1.6rem, weight 500. Never used outside chart contexts; never juxtaposed with Limelight on the same line. The three faces never co-occur in a single typographic block. Limelight always sits alone, in margins or covers. Cormorant carries all prose. Caveat lives only inside the charts. This separation is the **typographic equivalent of the watercolorist's rule that ink lines must be drawn after the wash dries**: each face waits its turn. **Palette — strict triadic (3% in the registry — claimed, with the rarest motif/palette pair specifically chosen to push triadic past its ceiling):** - **Indigo Wash** `#3A4F7A` — primary cool, Winsor & Newton Indigo at 30% pigment dilution. Used for the night-sky cover wash, the Payne's Grey hairlines, all line-illustration ink. The triadic anchor at 240° hue. - **Saffron Bloom** `#E8A23B` — primary warm, Schmincke Horadam Quinacridone Gold at 25% dilution. Used for the art-deco wordmark accents, the constellation star fills, the swallow's belly highlight. The triadic anchor at 40° hue (clockwise 160° from Indigo). - **Madder Lake Pink** `#C8526B` — primary rose, Daniel Smith Quinacridone Rose at 22% dilution. Used for the active-card border bloom, the numerals on hover, the brokerage stamps in the lower-right corner of each plate. The triadic anchor at 350° hue (clockwise 130° from Saffron, completing the triad). - **Paper Ground** `#F4ECD8` — Arches Cold Press 300gsm cream, the literal page color. Never pure white. All washes bleed into this ground. - **Payne's Grey** `#2C3340` — the ink color for all line-illustrations and Limelight wordmark. - **Carbon Lift** `#1A2030` — the deepest ink, used only for handwritten Caveat numerals inside charts and for the binding stitch on the spine. Six total values, but only three are pigments — the other three are paper, ink, and shadow. The triadic discipline is held strictly: no analogous secondaries, no tetradic accents, no neutral grays bridging the warms and cools. When Indigo touches Saffron the boundary is allowed to **bleed visibly** — a 2px Gaussian blur at the contact line, mimicking the pigment-creep that happens when a wet warm wash is laid against a still-damp cool wash on cotton paper. This is a *signature* of the design: every chart has at least one wet-on-wet bleed. ## Imagery and Motifs The visual world is built from four motif families, all rendered in **layered SVG with watercolor filters and zero raster assets** — no photography (98% in the registry — its exclusion is the largest deliberate deviation), no stock illustration, no 3D, no Lottie, no icon set. **1. Watercolor Washes (imagery: watercolor, 1% in registry).** Each card background is a procedurally generated SVG watercolor wash, built from three stacked `` elements, each filtered through a custom `` chain: `feTurbulence baseFrequency="0.012" numOctaves="3"` + `feDisplacementMap scale="14"` + `feGaussianBlur stdDeviation="3.4"` + `feComposite operator="in"`. Each wash uses one of the three triadic pigments at 18%–32% opacity, layered with a 600ms `` on `stdDeviation` to give the *just-barely-still-wet* sensation that happens for the first few seconds after a wash is laid down. The washes are seeded per-card so reloading the page produces visibly different bloom patterns — no two visits show identical watercolor. **2. Line-Illustration (imagery: line-illustration, only 5% in registry — claimed).** Hand-drawn ink-and-wash illustrations, rendered as SVG `` elements with `stroke-linecap: round`, `stroke-linejoin: round`, `stroke-width: 1.4px`, and a custom `stroke-dasharray` animation on first reveal that traces the line in over 1.8s (the **path-draw-svg** pattern at 27% — one supporting pattern lifted into service of the disclosure system). The line-illustration vocabulary is restricted to **eight subjects, repeated as a visual rhyme across the eighteen plates**: a swallow, a pine, a chimney, a coal seam, a sailing ship, a brass scale, a teacup, a stylus pen. Each appears multiple times in different orientations — the swallow flies over plates I, VI, XII, XVIII; the pine grounds plates II, IX, XVII; the brass scale weighs plates IV, X, XV. The visual rhyme creates an internal grammar: *every subject paired across the folio means a counterparty has been matched*. **3. Star-Celestial (motif: star-celestial, 2% in registry — controlling motif).** A live equatorial chart drifts in the lower-third of the cover and reappears miniature in the corner of every plate. The chart is rendered as an SVG circular projection of the May 2026 night sky over Paris (48.8566° N, 2.3522° E), with stars plotted at their actual J2000 right ascension and declination, magnitudes mapped to circle radii (mag −1.5 → 4px, mag 6.0 → 0.4px). The chart rotates at 15.041°/hour (sidereal rate), so by the time a visitor finishes reading the folio the sky has visibly turned. Vega, Altair, and Deneb (the Summer Triangle) are labeled in Caveat handwriting. Below the chart a Caveat caption reads *"Vega rises tonight at 03:11 — the day's brokerage will close when she crosses the meridian."* The stars are colored by spectral class, but desaturated and pulled into the triadic palette: O/B stars take Indigo, F/G/K stars take Paper Ground, M stars take Madder Pink — a *watercolor astronomy*, not a Stellarium screenshot. **4. Folio Margins and Binding Marks.** Every plate has a watercolor-bled margin treatment: a 1.4cm margin on three sides, a 2.8cm margin on the binding side, with a single hand-ruled hairline of Carbon Lift ink offset 6mm in from the trim, and four small **register marks** at the corners (cross-hairs in 0.5px Payne's Grey, used historically to align color plates in offset printing). The register marks pulse softly (opacity 0.4 → 0.6, 4s ease-in-out) — the only ambient motion outside the disclosure animations. ## Prompts for Implementation Build footprint.broker as **one HTML document, one CSS file, one ES module (`atlas.js`), one JSON star catalogue (`stars.json` — Hipparcos magnitude-≤6 subset, ~2200 entries) — and zero raster assets**. No JPGs, no PNGs, no WebP, no icon fonts, no Lottie, no Three.js, no canvas. Google Fonts CDN only for Limelight, Cormorant Garamond, and Caveat. The whole experience is layered SVG (with custom watercolor `` chains) + a single `requestAnimationFrame` driving the sidereal rotation + a small set of disclosure transitions managed by Web Animations API. Bias every decision toward **stillness, slow handwork, and storytelling**. AVOID: hero CTAs, pricing blocks, stat grids, testimonial carousels, feature comparisons, "Trusted by" logo strips, sticky headers, social-proof pop-ups, exit-intent modals, footer link sprawl. The folio cover is the only landing surface; the eighteen plates are the only content; there is **no contact page, no about page, no blog**. If the brokerage business needs a contact email, it is written in Cormorant italic in the lower-right of Plate XVIII, near the Madder Lake stamp: *"reach the broker at hand@footprint.broker"* — set as a `mailto:` link, no form. The cover paints itself in over 4.8s on first load: first the Paper Ground emerges, then the Indigo night-sky wash blooms across the top 60%, then the Summer Triangle stars appear in Saffron at sidereal positions, then the Limelight wordmark fades up at the optical center, then the Caveat caption appears beneath. Every subsequent interaction is **disclosure**, not navigation. Hovering or tapping a region of the cover reveals the corresponding plate (cover is divided into 18 invisible regions matching the underlying folio grid). The plate paints itself in **four watercolor stages** (background wash → mid-tone wash → ink line → numerals) over 2.4s. Esc collapses everything back to cover. Eight seconds idle also collapses. The **star drift** is real and continuous. On page open, `atlas.js` reads `Date.now()`, computes the local sidereal time at Paris, and rotates the SVG chart accordingly. It then increments rotation at the actual sidereal rate (15.041°/hour) using `requestAnimationFrame`. A visitor watching the page for one minute will see Vega move 0.25° — not visible to the eye, but visible across a long visit. A visitor returning the next day will find the chart visibly turned. The **swallow** flies once per 60s along an SVG `` path that arcs from the lower-left of the binding stitch to the upper-right, fading in at 0.0 and out at 0.7 of the path. The swallow is a single SVG `` with a `stroke-dasharray` of "3 1.4 0.6 1.2" (Caveat-pen-like irregularity). It is the only ambient motion outside the sidereal drift. The **line-illustrations on each plate** draw themselves in over 1.8s on plate disclosure (path-draw-svg via animated `stroke-dashoffset`). After drawing, they hold still — no tilt, no parallax, no cursor-follow. The page rejects every interactive trope from the registry's overused middle (cursor-follow 83%, magnetic 75%, parallax 95%, spring 81%, stagger 76%): there is **no cursor-follow** anywhere; **no magnetic snap**; **no parallax scroll** (the page does not scroll past the cover at all on most viewports — the disclosure is in-place); **no spring physics** (all animations are pure cubic-bezier eases shaped to mimic sable-brush stroke acceleration: ease-in-out with a 0.34/0.07/0.32/1.0 curve I will call **"sable-7"**); **no stagger** (each plate paints its own four stages independently of any other plate). The progressive-disclosure mechanism is the *only* interaction primitive, by design. Microcopy is conversational throughout, written in second-person English with occasional fragmentary French (*"reach the broker"*, *"trois cent grammes de pin"*). Every numerical value larger than 20 is also rendered, beneath, in spelled-out form in Cormorant italic at 0.7× size: "412 — *quatre cent douze tonnes*". This is bilingual not for translation but for **rhythm** — the numerals are art-deco-tight, the spelled words are watercolor-loose, and the page breathes between them. The **eighteen plate slots** are: I. May Carbon, II. Pine Sink, III. Cement Source, IV. The Brass Scale, V. Galician Forest, VI. Northbound Swallow, VII. Coal Memo, VIII. Tea Ceremony, IX. The Long Pine, X. The Weighted Side, XI. Atlantic Crossing, XII. Return Swallow, XIII. The Brokers' Ledger, XIV. May Sailing, XV. Final Reckoning, XVI. The Stylus, XVII. Pine Mortar, XVIII. The Stamp & Address. The names are not feature names; they are *plate captions*, set in Limelight small caps in the upper-left corner of each. There is no "How It Works" plate. There is no "Pricing" plate. There is no "Sign Up" plate. The **brokerage stamp** in the corner of each plate is a circular Madder Lake watercolor seal, 38px diameter, with the text *footprint.broker · plate xvii · MMXXVI* set in Cormorant small caps, hand-drawn around the inner circumference. The stamp is pre-rendered once per visit and stays put — no animation. It is the *signature* of the page, lower-right corner, every plate. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused vocabulary surfaced by frequency analysis: 1. **Watercolor as literal medium, not Pinterest decoration.** The 11% of CMassC sites tagged watercolor reach reflexively for pastel CSS gradients and rounded corners. footprint.broker rejects every pastel-gradient shortcut and instead executes watercolor as a **multi-stage SVG `feTurbulence` + `feDisplacementMap` + `feGaussianBlur` filter chain**, tuned to mimic Schmincke Horadam pigments on Arches 300gsm cold-press paper. Every wash is procedurally seeded per-load, so no two page-views show identical pigment blooms. The wet-on-wet bleed at color boundaries is a literal CSS implementation of capillary pigment-creep. 2. **Card-grid reframed as a 1928 astronomical folio.** Card-grid is the second-most-overused layout (82%); footprint.broker reclaims it by binding the eighteen cards into **three folio openings of six plates each**, with a literal binding stitch hairline down the center spine, register marks at every corner, and a swallow flying along the gutter. The card-grid here is *Bayer's Uranometria*, not a CMS template — the structural commitment is unchanged but its *meaning* is inverted from "marketing tile rack" to "bound atlas". 3. **Star-celestial motif as the actual ledger system.** Star-celestial sits at 2% in the registry — among the rarest motifs. footprint.broker pushes it past its ceiling by making the constellation chart **the literal accounting view**: every emission record is a star plotted at real J2000 coordinates, the chart drifts at the sidereal rate (15.041°/hr), Vega's meridian crossing is the daily close-of-books. This is the only CMassC site (verified against frequency report) that turns its chosen motif into the live business logic of the page rather than decorative chrome. 4. **Triadic palette held strictly with no analogous bridge.** Triadic appears in 3% of sites and is usually softened by an analogous bridge or muted neutral to make the three-way tension easier on the eye. footprint.broker holds the triad **rigidly** — Indigo, Saffron, Madder Lake — and lets the wet-on-wet boundaries between them bleed visibly via Gaussian blur, treating the chromatic tension as a *feature* rather than a problem to soften. The triadic discipline is enforced by a hard CSS variable lockdown: `--c1: #3A4F7A; --c2: #E8A23B; --c3: #C8526B;` and no others may color a pigmented surface. 5. **Progressive-disclosure as the only interaction primitive.** Progressive-disclosure sits at 2% — tied for second-rarest pattern — and is usually deployed as a one-off accordion. footprint.broker promotes it to be the **sole** navigation system: no menu, no tabs, no scroll, no router, no modal. The cover is the home; touch reveals a plate; Esc returns; idle returns. The page literally cannot be navigated by any other mechanism. This is the most aggressive interaction-pruning of any CMassC site. 6. **Art-deco-display typography, used only at the margins.** Art-deco-display (4%) is usually employed for hero wordmarks and immediately abandoned. footprint.broker uses Limelight only at the **margins of the folio** — the cover wordmark, the plate captions, the chapter headings — and never inside body or charts. The face is treated as a piece of *theatrical signage* spanning a Parisian quarter, not a hero gimmick. The body work is done by Cormorant Garamond; the chart numerals by handwritten Caveat. The three faces never co-occur in a single typographic block. 7. **Conversational tone in second-person + bilingual rhythm.** Conversational tone sits at 6%; most sites that claim it write generic friendly copy. footprint.broker writes every microcopy in **second-person English with fragmentary French rhythmic doubling**, where every numerical value larger than 20 is rendered both as art-deco numeral and as spelled-out Cormorant italic French. The rhythm is the design — *412 — quatre cent douze* — not the literal translation. 8. **Line-illustration as a visual rhyme grammar across plates.** Line-illustration (5%) is usually deployed as scattered icon decoration. footprint.broker constrains the line-illustration vocabulary to **exactly eight subjects** (swallow, pine, chimney, coal seam, sailing ship, brass scale, teacup, stylus pen) and then *rhymes them across the eighteen plates* such that paired subjects encode a brokered match. The line-illustrations are not decoration — they are **the second-layer ledger**, readable by anyone who notices the rhyme. 9. **Zero raster assets, real sidereal time.** No JPGs, no PNGs, no Lottie, no Three.js, no canvas. The entire visual system is layered SVG with custom watercolor `` chains, plus a single `requestAnimationFrame` loop computing real local sidereal time at 48.8566° N. The page is 6 KB of HTML + 14 KB of CSS + 22 KB of JS + 96 KB of star catalogue JSON, served gzipped — and renders an unbounded universe of unique watercolor pages, since each load reseeds the procedural washes. **Chosen seed (verbatim from orchestrator):** *aesthetic: watercolor, layout: card-grid, typography: art-deco-display, palette: triadic, patterns: progressive-disclosure, imagery: line-illustration, motifs: star-celestial, tone: conversational* — claimed in full, with the two rarest tokens (`star-celestial` at 2% and `progressive-disclosure` at 2%) elevated to be the controlling motif and controlling interaction primitive of the entire design, respectively. **Avoided patterns from frequency analysis:** photography (98%), parallax (95%), full-bleed (93%), mono typography (95%), warm palette (97%), gradient palette (97%), cursor-follow (83%), spring (81%), stagger (76%), magnetic (75%), centered (82%), hand-drawn (96%) — all consciously refused. The page uses none of these. The only middle-of-the-pack pattern adopted is **path-draw-svg** (27%), and only in service of the progressive-disclosure mechanism.