# Design Language for footprint.bar ## Aesthetics and Tone footprint.bar is a **soft-spoken graffiti almanac** — a single long page that looks like the outside wall of a corner bar at 7:14 a.m., when the night's tags have already dried into the masonry and the rising sun has bleached every fluorescent pink and acid green into the dusty, milky end of the spectrum. The premise of the site is the **footprint** in the most literal possible sense: every mark a person leaves on a place. Sneaker tread. Spray-can drip. Sticker residue. Beer-glass ring. Cigarette burn. Boot-print on a dew-damp sidewalk. The site is a quiet ledger of those marks, displayed with the energy of street art but the volume of a dawn street — *up*, but *not loud*. The aesthetic register is **graffiti softened by morning light**. Not the high-saturation Wildstyle of a Bronx subway car, not the photo-realistic muralism of a contemporary commission — but the **second-day graffiti** of an alley, where rain has already dimmed the color, where one tag has been sprayed half-over another, where a pastel pink throw-up sits beside a tan brick that has its own smoke-stained patina. The mood is **energetic but exhaled** — like a sprinter at the moment after the finish line, hands on knees, still buzzing but no longer shouting. There is no "buy now" anywhere on this page. There is no pricing tier. There is no "trusted by." The page is a **walking inventory of marks**, presented in the visual voice of a hand-paint artist who happens to also love mid-century print typography. The narrative posture is that of a **documentarian on the night shift** — calm, observant, certain that the small marks are the real story. The page admits it is energetic, but its energy is the **steady fizz of a freshly poured pilsner** rather than the explosion of a champagne cork. Every animation on the page should feel like *something settling* (paint drying, foam thinning, dew beading) rather than *something launching*. The reader should leave with the sense that they have walked the length of a single block at dawn and counted, with affection, every footprint they passed. ## Layout Motifs and Structure The page is a **HUD overlay laid over a single full-bleed cream-pastel back wall**. Imagine a forensic photographer's photograph of a graffitied bar wall, then imagine a transparent acetate overlay that has been laid on top of it — measurement reticles, framing brackets, frame counters, timestamp stamps, distance markers. The bar wall is the *content*; the HUD is the *navigation, attribution, and metadata*. This is the **hud-overlay layout** (only 2% in the registry — deliberately picked to differ from the dashboards and bento boxes of the rest of the system) and it is used here in a non-obvious way: the HUD is **decorative annotation of a static mural**, not a dashboard. **Vertical structure (single full-bleed column, 1100px max-width content rail, 100% width back-wall mural):** 1. **Frame 01 — The Wall (Letterhead)** — at the top of the page, a 100vh full-bleed cream-pastel concrete wall. Centered on it, in a pastel-pink graffiti throw-up softened to dusty rose, the wordmark **footprint.bar** at ~280px cap height, with a slow soft drip animation under the lowermost letterforms. Around it, a HUD bracket reticle in 1pt navy line, and a small caption reading "FRAME 01 / WALL ELEVATION / N. WABASH @ 6:47 AM / 14°C." This is where the "FRAME XX" timestamp HUD vocabulary is established. 2. **Frame 02 — The Manifesto** — a 70vh band of cream paper-aged texture, centered prose in Commissioner at 18px, ~580px column width, two short paragraphs explaining what a "footprint" means here and why this catalog exists. A single soft-pink flourish underline draws under the header on scroll-trigger. 3. **Frame 03 — The Tread Inventory** — five sneaker-sole tread illustrations rendered as bokeh-background photographs (out-of-focus pastel circles behind sharply rendered tread silhouettes). The HUD overlays each tread with a measurement reticle and a hand-written tag in the graffiti font: "VANS / 2003 / SIZE 9.5 / WET CONCRETE / OBSERVED 03:18 AM." 4. **Frame 04 — The Drip Field** — a long-scroll 200vh column where pastel-pink, peach, and mint paint drips slowly extend downward as the reader scrolls. Each drip terminates in a small bokeh halo. A Commissioner caption explains that every drip is a tag observed on a single block of the South Loop between 2017 and 2026. 5. **Frame 05 — The Beer-Glass Ring** — circular composition on a creamy field. A single glass-bottom ring of pastel apricot stain on the wall, surrounded by twelve smaller rings at varying offsets. HUD calipers measure each ring's diameter in millimeters; a graffiti-tag annotation sits beside each. 6. **Frame 06 — The Cigarette Burn** — a tight, near-claustrophobic frame, the only frame on the entire page that breaks the cream-pastel base and goes instead to a slightly darker tobacco-cream. A single graffiti-tag burn mark with HUD framing brackets. Caption: "BURN / 4mm / 2024 / PHOTOGRAPHED IN TUNGSTEN." 7. **Frame 07 — The Sticker Residue** — fragmented compositional grid (3-up horizontal) of three sticker silhouettes that have been peeled away, leaving the residue. Bokeh background of pastel-pink and mint orbs. 8. **Frame 08 — The Boot-Print on Dew** — full-bleed mint-pastel field. A single boot tread, stamped once, top-left to bottom-right diagonal. The HUD overlay marks "VECTOR 134°" and "DEW POINT 8°C." This frame uses the most negative space of any in the page. 9. **Frame 09 — The Ledger** — a vertical stack of 22 thumbnails of all the footprints catalogued, with their HUD captions inline. This is the page's only "list" — but it reads as a **ledger entry** in a forensic notebook, not as a card grid. 10. **Frame 10 — The Wall (Bottom Edge)** — a final 50vh return to the back wall. A small graffiti tag in the bottom-right corner reads "fp.bar / dawn shift / 2026." A subtle HUD bracket closes the frame. **Spatial relationships.** The page reads top-to-bottom as a **walk along a single wall**. Vertical scroll is *horizontal walking*. The HUD bracket reticles never move with the content — they are **fixed at the viewport edges** with `position: fixed` and contain only the four corner brackets, the timestamp, and a small distance counter that increments as the reader scrolls. This is the *one* place where the HUD overlay is literally an overlay rather than a typeset annotation. The bracket distance counter reads "DIST 0M" at the top of the page and "DIST 314M" at the bottom — the implied length of one bar block, walked at dawn. **Negative space discipline.** The cream-pastel back wall must remain visible behind every frame. No frame fills more than 78% of the viewport width. The HUD reticles never overlap content — they sit in the gutter. This is **HUD as marginalia**, not HUD as dashboard. ## Typography and Palette **Fonts (Google Fonts only):** - **Commissioner** — variable humanist sans, used at three weights: Light (300) for body prose at 18px, Regular (400) for HUD captions at 11px small-caps tracking, and SemiBold (600) for the small "FRAME XX" labels at 13px. Commissioner's variable axes give the page a single typographic family that handles ledger annotation, body prose, and small-caps metadata without bringing in a second sans. **This is the registry's `commissioner-versatile` typography seed at 3% — deliberately underused.** Commissioner is doing the *quiet voice* of the page. - **Permanent Marker** — used **only twice on the entire page**, once for the wordmark "footprint.bar" at the top and once for the closing tag at the bottom. Permanent Marker is the *graffiti voice*, but it is rationed to two appearances so that it reads as **two tags on a quiet wall** rather than a graffiti-themed page. - **Caveat** — used for the **HUD's hand-written tag annotations** at 14px (e.g., "VANS / 2003 / SIZE 9.5"). Caveat sits between Commissioner and Permanent Marker — it is the **forensic photographer's notebook hand**, not the muralist's spray paint. Approximately 22 instances across the page. Tracking discipline: HUD small-caps captions use +120 tracking. Body prose uses 0 tracking. Wordmark and tag use -20 tracking (Permanent Marker eats space anyway). **Palette — creamy-pastel (registry 4%, deliberately underused):** | Role | Hex | Notes | |---|---|---| | Cream paper / back wall | `#F4EAD5` | The base substrate. Slightly warmer than ivory, slightly cooler than buttercream. Concrete dusted with morning light. | | Dusty rose / softened wildstyle pink | `#E8B4B8` | The wordmark, the drip field highlights, the beer-glass rings. This is *graffiti pink that has been rained on once*. | | Apricot peach / paint drip | `#F0C39A` | Used for paint-drip terminations and the second-most-prominent drip color in Frame 04. | | Mint pastel / dew | `#C8E0CC` | The Frame 08 boot-print field. Used sparingly elsewhere as bokeh accents. | | Tobacco cream / cigarette burn | `#D8C29D` | Frame 06 only. The page's single warmer departure from the cream base. | | Forensic navy / line, type | `#2C3E5E` | All HUD reticle lines, all Commissioner body type, all Caveat tag annotations. The single ink color of the page. | | Bracket nickel / hairline | `#8A95A8` | Faint HUD bracket weight at 0.5pt; used only on bracket corners and rule lines. | | Dawn warm / ambient bokeh | `#F4D9A8` | The bokeh background fill behind tread illustrations and sticker residue frames. Out-of-focus pastel orbs. | The palette is **creamy and pastel by daylight discipline**, not by candy-cuteness. Every color has been desaturated to feel like it was photographed at 6:47 a.m. on a partially overcast morning. There is no neon, no saturated electric pink, no deep blacks. The single permitted darkness is forensic navy `#2C3E5E`, used for line and type only — never for fills. ## Imagery and Motifs **Primary imagery — bokeh-background (registry 7%, underused).** Behind the tread inventory, the sticker residue, and the ledger thumbnails, the visual backdrop is a layered set of out-of-focus pastel circles — the photographer's signature soft circular lens artifacts when wide-aperture optics are pointed at distant pastel-pink and mint-warm streetlights at dawn. Each bokeh field is composed of 14 to 22 circular `` SVG elements with `filter: blur(28px)` and opacities ranging from 0.18 to 0.42. The circles are sized 80px to 220px, scattered with a deliberately off-grid Poisson-disk distribution. This bokeh field **never animates** — it is the *atmosphere* of the page, not a feature. It should read as if the page itself were photographed through a forgiving 50mm f/1.4 lens. **Secondary motif — vintage (registry 25%, moderate but seed-confirmed).** The vintage register comes through in the **forensic notebook annotation language**: the HUD reticles look like 1973 surveillance camera framing, the FRAME-XX timestamp uses the typewriter cadence of a 1968 Polaroid datestamp, the body prose paragraph indentation follows the 1962 *New Yorker* rule of 1.2em first-line indents. This is *vintage as documentary precision*, not *vintage as nostalgia kitsch*. No sepia, no aged-paper torn edges, no ornament filigree. **Graffiti motifs — softened.** Hand-drawn paint drips in `` form, with a 4px stroke that tapers to 1px at the drip terminus. Spray-can stipple is rendered as a stippled SVG pattern at 4% opacity over the cream substrate, applied only to Frame 04 (the Drip Field). Throw-up bubble outlines appear only twice — once around the wordmark and once around the closing tag — and are rendered with a 3px Permanent Marker stroke softened by a 1.5px gaussian blur on the inner edge so they read as *spray-painted* rather than *bezier'd*. **Tread silhouettes.** Each of the five sneakers in Frame 03 is a custom SVG silhouette — Vans waffle, Converse herringbone, Adidas Samba honeycomb, Nike Air Force ridge, and a generic boot tread for the closing Frame 08. They are inlined SVG, filled with forensic navy at 0.84 opacity over the bokeh background. They are not photographs — they are *technical drawings* of treads, the way a forensic technician would render them on a chalkboard. **Beer-glass rings & cigarette burn.** Hand-drawn `` ellipses with a 1.2pt forensic navy stroke, no fill, slight irregularity in the stroke (achieved by a `feTurbulence` displacement filter at baseFrequency 0.04, scale 0.6 — just enough to feel hand-drawn). **HUD reticle vocabulary.** Six recurring HUD elements: (a) corner L-bracket, 0.5pt nickel; (b) cross-hair reticle, 0.5pt nickel with 1pt navy center dot; (c) caliper measurement bracket with two perpendicular tick marks; (d) FRAME-XX timestamp box, navy 1pt with Commissioner SemiBold 13px small caps inside; (e) distance counter, fixed top-right of viewport; (f) compass vector annotation in Commissioner Regular with degree symbol. **No icons.** No font-awesome, no lucide. Every visual element on the page is either inlined SVG drawn for this page, the bokeh circle field, or text. The page is **drawn**, not assembled from a kit. ## Prompts for Implementation Build footprint.bar as **one HTML document, one CSS file, one ES module, and three asset files**: `wallpaper.png` (1024×1024 tiling cream-concrete texture, ~42kb, generated as a soft pastel concrete with a barely visible spray-stipple at 3% opacity), `wordmark.svg` (the Permanent Marker "footprint.bar" softened with a faint inner blur to read as spray paint), and `treads.svg` (five sneaker-tread silhouettes as a single combined SVG sprite). Everything else — the bokeh circle fields, the HUD reticles, the paint drips, the beer-glass rings, the boot-print, the ledger thumbnails — is inlined SVG in the HTML so a single shared CSS custom property can address them. **No framework. No bundler. No Lottie. No WebGL. No canvas. No video. No webfont self-hosting** (use Google Fonts CDN for Commissioner, Permanent Marker, Caveat). Bias every implementation decision toward **the morning-after stillness of a tagged wall**. Refuse every implementation decision that would make the page feel like a SaaS landing, an art-supply storefront, a graffiti-themed product page, a fitness-tracker dashboard, or any registry default. There are no CTAs. There are no "Buy Now" buttons. There are no pricing blocks. There are no testimonial carousels. There are no stat-grids. There are no "trusted by" logos. There are no email-capture modals. The page is **a walk down a single block at dawn**, and the only interaction is the reader's scroll. **Storytelling through scroll-triggered (registry 20%, deliberately preferred over parallax 95% and cursor-follow 83%).** The reader's vertical scroll is the unfolding of the wall, frame by frame. Each frame uses **exactly one** IntersectionObserver-triggered animation, fired once on entry, never repeated: - Frame 01 (wordmark): on first paint, the wordmark drips begin a 4-second slow `stroke-dashoffset` animation downward — paint settling, not falling. - Frame 02 (manifesto): the soft-pink flourish underline draws itself left-to-right in 1.2 seconds with `cubic-bezier(0.34, 1.56, 0.64, 1)` — a 6% spring overshoot. - Frame 03 (tread inventory): the five tread silhouettes fade their forensic navy fill from 0.0 to 0.84 opacity in a 240ms-staggered sequence (60ms between treads). - Frame 04 (drip field): the seven paint-drip `` strokes animate `stroke-dashoffset` downward over 6 seconds with `cubic-bezier(0.65, 0, 0.35, 1)` (slow ease in-out — paint creeping). This is the page's longest single animation. - Frame 05 (beer-glass rings): the twelve ring `` strokes animate in radiating order from the center ring outward, 80ms staggered, each ring drawing in 700ms. - Frame 06 (cigarette burn): a single 1.4-second radial gradient expansion of the burn mark, with a faint heat shimmer on the burn edge using a 0.08-amplitude `feTurbulence` that animates `baseFrequency` from 0.04 to 0.06 over 3 seconds and then stops. - Frame 07 (sticker residue): three sticker silhouettes peel away — `transform: translateY` from 0 to -8px combined with `opacity` from 1 to 0.3, 280ms staggered. - Frame 08 (boot-print): the single boot tread fades in over 600ms — but the HUD vector annotation animates *after* the tread, drawing its arrow from boot heel to boot toe over an additional 900ms. This is the page's only sequential two-step animation. - Frame 09 (ledger): the 22 thumbnails fade in with a 30ms stagger from top-left to bottom-right. - Frame 10 (closing wall): on first paint of the closing frame, the small graffiti tag animates its drip downward over 3 seconds. **The HUD distance counter** (top-right fixed) is the **one ambient animation** on the page that is not scroll-triggered. It updates from "DIST 0M" to "DIST 314M" linearly with the reader's scroll position. When the reader reaches the bottom of the page, the counter freezes at 314M and a small "▪ END OF BLOCK" indicator appears in Commissioner SemiBold next to it. The counter uses Commissioner Tabular Numbers (the `tnum` OpenType feature) so the digits do not jitter as they update. **The bokeh field** is purely static SVG with no animation. Its presence is **atmospheric**, like the ambient noise of dawn traffic in the distance. Do not animate the bokeh circles — that is a registry trap, and the discipline of holding them still is what gives the page its quietude. **Refusals — what this page must never become.** No carousel. No modal. No popup. No accordion. No tabs. No sticky header. No floating CTA. No "back to top" button. No cookie banner styling that breaks the wall metaphor (if a banner is required, render it as a small navy hairline along the bottom edge in Commissioner SemiBold small caps — never a centered modal). No emoji. No lucide-icons. No font-awesome. No anime line art. No product cards. No "Buy Now." No "Subscribe." No "Get Early Access." No newsletter signup. No social-share buttons. No infinite scroll. The page **ends at Frame 10** with the closing tag, and the scroll stops there. The site does not sell anything. It is **a quiet documentary**, not a funnel. **Multiply blend mode discipline.** The HUD navy lines and Caveat tag annotations are rendered with `mix-blend-mode: multiply` against the cream-pastel substrate at 100% opacity. This makes the navy *bleed into* the cream the way real ink bleeds into real concrete. The bokeh circle fills, however, use `mix-blend-mode: screen` so they read as *light blooming through morning haze* rather than as ink dots. This dual blend-mode discipline is the single technical decision that does the most work for the soft-graffiti-at-dawn feeling. Test it: multiply for ink, screen for light, and never confuse the two. **Type rendering discipline.** Commissioner at 18px on the cream substrate needs `text-rendering: geometricPrecision` and `-webkit-font-smoothing: antialiased`. **Do not** apply `font-smoothing: subpixel-antialiased` — on a pastel cream background it produces a faint warm chromatic fringe that reads as cheap inkjet rather than letterpress. Permanent Marker needs no smoothing adjustments — its inherent stroke variability does the work. Caveat at 14px should have `letter-spacing: 0.01em` to keep it from collapsing into illegibility on the bokeh background. **Cursor discipline.** The page does **not** use cursor-follow (registry 83%, deliberately avoided). The cursor is a default arrow. There is no glow, no trail, no magnetic attractor, no hover-lift on the ledger thumbnails. The reader's hand is invited to be **still and observant**, not interactive and curious. The page rewards reading, not pointing. ## Uniqueness Notes **Differentiators from the rest of the registry (3+ required):** 1. **HUD-overlay layout used as forensic marginalia, not as dashboard.** The registry's hud-overlay seed sits at 2% and is almost always used for sci-fi dashboard pages or analytics overlays. footprint.bar uses it inverted: the HUD is **decorative annotation of a static graffiti wall**, with corner brackets, calipers, and timestamp boxes serving as ledger marginalia. There is no live data, no dashboard, no telemetry — only a still-life wall annotated as if by a forensic technician at 6:47 a.m. The HUD is the *acetate sheet on top of the photograph*, not the cockpit of a spacecraft. 2. **Graffiti aesthetic softened to dawn, not amplified to neon.** The registry's graffiti aesthetic seed sits at 5%, and the few sites that use it lean into wildstyle, neon, and high-contrast urban energy. footprint.bar deliberately *desaturates* graffiti into the **second-day, rain-dimmed, dawn-bleached register** — pastel pink instead of acid pink, dusty rose instead of fluorescent magenta, mint-cream instead of safety-cone green. The graffiti voice (Permanent Marker font) is rationed to **exactly two appearances on the entire page** — wordmark and closing tag — so the page reads as *two tags on a quiet wall* rather than a graffiti-themed page. This is graffiti as **morning-after observation**, not graffiti as identity-signal. 3. **Scroll-triggered animation used in deliberate inversion of parallax (95%) and cursor-follow (83%).** The registry's overwhelming default is parallax/cursor-follow motion. footprint.bar uses **scroll-triggered IntersectionObserver animation only**, fires each animation **exactly once per frame**, and **forbids cursor-follow entirely**. The cursor is a default arrow with no glow, no trail, no magnetic attractor. This is a deliberate refusal of the most overused motion patterns in the registry, replaced with a **walking-pace ten-frame storyboard** in which each frame settles, rather than launches. 4. **Bokeh-background used as static atmosphere, never animated.** The registry's bokeh-background imagery seed sits at 7%, and most uses involve animated drift or hover-driven bloom. footprint.bar holds the bokeh **completely still** — 14 to 22 SVG circles per frame, no transform, no opacity animation, no drift. The discipline of holding the bokeh still is what makes the page feel *photographed* rather than *constructed*. This is bokeh as **ambient air**, not bokeh as feature. 5. **Creamy-pastel palette grounded by a single forensic navy.** The registry's creamy-pastel palette seed sits at 4% and is usually paired with chromatic complement accents (lavender, mint, peach in equal measure). footprint.bar grounds its creamy-pastel field with **a single forensic navy `#2C3E5E`** used exclusively for line and type, never for fill. The pastels are decorative; the navy is structural. This single-ink discipline is borrowed from architectural elevation drawings and forensic notebooks, not from web palettes. 6. **Commissioner-versatile carrying three voices instead of three families.** Most registry sites that adopt Commissioner pair it with a serif (Cormorant Garamond) and a mono (IBM Plex Mono). footprint.bar uses **Commissioner alone** at three weights and treatments — Light prose, Regular small-caps HUD captions, SemiBold FRAME labels — and lets the variable axis carry the typographic hierarchy. This is **commissioner-versatile** taken seriously: one variable family, one navy ink, one set of typographic rules. The two display fonts (Permanent Marker, Caveat) sit outside this system as occasional voices, not as primary structure. 7. **Vintage motif as documentary precision rather than nostalgic ornament.** The registry's vintage motif sits at 25% and most often manifests as sepia, torn-paper, ornament filigree, or 1920s art-deco shapes. footprint.bar's vintage register is **1960s-1970s forensic-notebook documentary**: typewriter datestamps, surveillance reticle brackets, magazine-style first-line indents, technical-drawing tread silhouettes. This is vintage as *the visual language of someone documenting evidence*, not vintage as *nostalgia*. There is no sepia, no torn edge, no ornament. The vintage feeling comes from *precision*, not from *aging*. **Document chosen seed/style:** The Planned Seed for this site is **aesthetic: graffiti, layout: hud-overlay, typography: commissioner-versatile, palette: creamy-pastel, patterns: scroll-triggered, imagery: bokeh-background, motifs: vintage, tone: energetic.** Every one of these eight axes is taken at the underused end of the registry distribution (graffiti 5%, hud-overlay 2%, commissioner-versatile 3%, creamy-pastel 4%, scroll-triggered 20%, bokeh-background 7%, vintage 25%, energetic 15%) and combined into a single coherent visual: **a softened-graffiti dawn wall annotated by a forensic photographer's HUD, scroll-paced through ten still frames, on a creamy-pastel substrate inked by a single forensic navy.** **Reference avoided patterns from frequency analysis:** - **AVOIDED — hand-drawn aesthetic (96%):** The page does not use hand-drawn illustration as the dominant aesthetic register. Hand-drawn elements (paint drips, beer-glass rings) appear only as forensic-evidence motifs, not as primary illustration style. - **AVOIDED — glassmorphism (69%):** No frosted glass, no translucent cards, no backdrop-filter blur on UI surfaces. The HUD is line-based, not glass-based. - **AVOIDED — photography (98%):** No photographic imagery anywhere on the page. Every visual is SVG, drawn or composed in code. The bokeh field *evokes* photography but is itself entirely SVG. - **AVOIDED — gradient palette (97%) and warm palette (97%):** The page uses flat pastel fills, not gradients. The palette is creamy-pastel, not warm. There is exactly one warm departure (the tobacco-cream of the cigarette-burn frame) and it is intentional and isolated. - **AVOIDED — parallax (95%) and cursor-follow (83%):** Replaced by scroll-triggered IntersectionObserver animation, used exactly once per frame, with no cursor interactivity at all. - **AVOIDED — spring (81%) and stagger (76%) and magnetic (75%):** Spring easing is used only on the manifesto underline, once. Stagger is used only on the tread inventory and ledger, with deliberate restraint (60ms or 30ms). Magnetic attraction is not used at all. - **AVOIDED — card-grid (82%) and centered (82%):** The ledger uses a vertical thumbnail stack, not a card grid. Composition is asymmetric and frame-by-frame, not centered hero blocks. - **AVOIDED — mono typography (95%):** No monospace anywhere on the page. The HUD captions, which would normally invite mono in the registry's defaults, use Commissioner SemiBold small-caps instead — a **humanist HUD**, which is itself a deliberate inversion. - **AVOIDED — humanist typography (49%):** While Commissioner is technically a humanist sans, the page uses it in a forensic-annotation register that reads as documentary, not as the warm-humanist register of most registry sites.