# Design Language for footprint.broker ## Aesthetics and Tone **footprint.broker** is an **urban field dispatch** — the aesthetic of a silk-screen poster that has absorbed three weeks of city rain, then been photographed under neon and uploaded at 2 AM. Watercolor washes are not pastoral here; they are the bleed of fluorescent signage on wet concrete, the way a puddle holds a traffic light in lavender and acid green. The mood is street-level, curious, slightly restless — a voice that sounds like a friend who moves cities for a living and is genuinely excited to tell you what they found. Tone is **approachable-casual**: no capitals for their own sake, no formal register, no hushed luxury. Sentences finish mid-thought and restart. Headers land like the opening line of a text message, not a press release. The copy is first-person plural ("we track", "we move") and the second person is used sparingly but warmly ("your footprint", "where you've been"). The design vocabulary draws from **editorial-flow** — the feel of an arts weekly that formats its own content with no advertising whitespace to protect. Content columns break their own grids intentionally. Pull quotes jut into adjacent lanes. Section titles rotate 90° and sit in the gutter. Every layout decision privileges *reading momentum* over conventional hierarchy. The overall effect: a living document that was designed in the field, not in a studio. ## Layout Motifs and Structure The page unfolds as a **vertical editorial river** with three internal lane widths: a narrow gutter (120 px), a body column (640 px), and a wide-bleed panel (full viewport). These three lanes alternate on a rule of three: no two consecutive sections share the same lane width. The gutter is never empty — it holds rotated sub-labels, line numbers rendered in the primary neon accent, or thin horizontal rules that run the full viewport width and bisect sections unexpectedly. **Section transitions are the slide-reveal pattern** (frequency: 0% — completely unused). Each section enters the viewport by sliding up from behind the preceding section as if pages of a broadsheet are being peeled back one layer at a time. The preceding section does not scroll away; it is covered by the arriving section, which slides in from the bottom edge at a slight angle (transform: rotate(0.4deg) then snapping to 0 when fully open). This creates a layered stack effect — earlier content feels archived beneath later content. Key layout decisions: - **Hero**: full-bleed watercolor-gradient mesh panel, 100vh, with the domain name set in large grotesque weight across three lines, breaking mid-word intentionally (foot- / print. / broker) to emphasize editorial rhythm. A secondary sub-label in the gutter reads "place intelligence" rotated 90° counterclockwise. - **Columns**: the body column snaps left for odd-numbered sections, right for even-numbered sections — offset alternation that creates a weaving reading path down the page. - **Pull quotes**: 2–3 pull quotes per page, set at 200% of body size, bleeding 80 px into the gutter on the opposite side from the body column. - **Rule lines**: 1 px horizontal rules in #39FF14 (acid green) appear at irregular intervals, never aligned to section starts. - **Footer**: a single-line slug at 11 px — no nav, no social links, just coordinates and a timestamp. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display / Hero headings — `Barlow Condensed`** — weight 700–800, tracking -0.03em, uppercase. Set at 96–120 px on the hero. The condensed geometry reads as both grotesque-neo and street-poster simultaneously. Used for section titles and the hero wordmark. - **Body / Editorial text — `Space Grotesk`** — weight 400–500. 18 px / 1.65 line-height for body paragraphs. The slight geometric quirk of Space Grotesk (the single-story `a`, the angular `t`) reinforces the neo-grotesque seed without feeling cold. Used for all running text. - **Accent / Labels — `Space Mono`** — weight 400, 11–13 px, letter-spacing 0.12em. Used for gutter line-numbers, rotated sub-labels, timestamps, and metadata annotations. The monospace grid contrasts the fluid watercolor imagery directly beneath. - **Pull quotes — `Barlow`** (non-condensed), weight 300, italic, 36–44 px. The light weight against the dark background creates a spectral, almost washed-out contrast that echoes the watercolor palette. **Palette — dark-neon (frequency: 7% — deliberately lean):** - `#0A0A0F` — Near-black page background. Not pure black; the slight blue cast keeps it from feeling terminal. - `#0F0F1A` — Section panel background, 6 pts lighter than page base. - `#39FF14` — Acid green neon. Primary accent. Used on rule lines, active labels, the logo dot in "broker", and gutter line numbers. - `#BF5FFF` — Electric violet. Secondary accent. Used on pull quote text, selected state highlights, and the watercolor wash layer blending mode tint. - `#00D4FF` — Cyan ice. Tertiary accent. Used on hover states, link underlines, and the gradient mesh glow highlight. - `#F0EDE6` — Off-white cream. All body text, pull quotes. Warm enough to feel editorial rather than clinical. - `#2A2A3A` — Muted mid-dark. Card backgrounds, section dividers, gutter fill. - `#1C1C2E` — Deep navy-dark. Used as the watercolor base layer beneath gradient mesh panels. **Watercolor wash technique**: watercolor here is not pigment-on-white. It is **light on dark** — the washes are `mix-blend-mode: screen` or `color-dodge` overlaid on the near-black background, so the "watercolor" behaves like neon dye spreading through black water. The acid green bleeds into violet at the edges; the cyan holds a crisp center and feathers out. Generated as SVG radial gradients with `feGaussianBlur` (stdDeviation 28) and `feTurbulence` (type fractalNoise, baseFrequency 0.025) composited together. ## Imagery and Motifs **No photographs. No stock imagery.** The registry shows photography at high frequency — footprint.broker opts for entirely generative and illustrative visual language. **Primary visual motif — gradient-mesh panels** (frequency: not in top patterns — novel choice). Each section background is a unique CSS `mesh-gradient` approximated via overlapping radial gradients (3–5 per panel) in the neon palette. The mesh gradients are not static; on scroll, the gradient origins shift by 8–12 px driven by `IntersectionObserver` — a slow liquid drift that registers only at the periphery of attention. **Cultural motif layer**: the "cultural" motif seed manifests as **cartographic ghost-type** — ghosted place names from international cities set in 8 px Space Mono at 6% opacity, arranged in a non-repeating pattern across the full-bleed panels. City names include non-Latin scripts (Hangul, Arabic, Devanagari) alongside Latin text. These are not decorative labels — they are legible at 300% zoom and feel like a map legend dissolving into the background. This is the "cultural footprint" of the domain, made literal. **Decorative structural elements**: - **Pin markers**: simplified SVG location-pin shapes (12 × 18 px), rendered as single-stroke outlines in `#39FF14`, placed at the start of each major section like map waypoints. - **Contour lines**: ultra-thin (0.5 px) concentric ellipses in `#2A2A3A`, used as section backgrounds behind body text — topographic map contours suggesting terrain and depth. - **Ink-blot dividers**: between sections, a 100%-wide by 24-px-tall SVG path that looks like a watercolor bleed line — irregular, slightly asymmetric, in `#BF5FFF` at 30% opacity. **Slide-reveal layer transitions**: each section panel has a slight paper texture (SVG `feTurbulence` grain at 3% opacity) so the reveal feels like uncovering a printed broadsheet, not a screen transition. ## Prompts for Implementation Build this as a **single continuous vertical dispatch** — not sections in a product-marketing sense but beats in a story. The structure should read: arrival → context → how it works → the territory → who moves with us → close. No headers with numbers. No "Feature 1, Feature 2" cadence. **Slide-reveal implementation**: - Each `.section` element is `position: sticky; top: 0` within a parent `.section-stack`. - The parent `height` is set to `(n_sections * 100vh)` so the page scrolls normally. - Each section starts with `transform: translateY(100vh) rotate(0.4deg)` and `border-radius: 12px 12px 0 0`. - As scroll progresses through each section's range (tracked via `scrollY` ranges), `translateY` animates to `0` and `rotate` snaps to `0deg` over 300 ms using `cubic-bezier(0.22, 1, 0.36, 1)`. - Use `will-change: transform` on each section for GPU compositing. - The topmost visible section always has `box-shadow: 0 -20px 60px rgba(0,0,0,0.8)` to reinforce the stacked-layers illusion. **Gradient mesh implementation**: - Each section panel: 4–5 `
` elements with `position: absolute`, `border-radius: 50%`, large dimensions (60–120% of container), and `background: radial-gradient(...)` in the neon palette. - `filter: blur(60px)` on each blob; `mix-blend-mode: screen` on the container. - On scroll within section range, JS nudges `left/top` of each blob by ±10 px using `transform: translate()` — the drift. - No CSS animation; pure scroll-driven JS for performance. **Cultural ghost-type layer**: - City names in a flat JS array (50+ entries, mix of scripts). - Rendered as absolutely positioned `` elements within a full-bleed container. - Position determined by a seeded pseudorandom function (not random on each render) so the layout is stable. - Pointer-events: none; aria-hidden: true. **Typography in motion**: - Hero wordmark: `Barlow Condensed` 800 weight, starts at `opacity: 0; letter-spacing: 0.4em` and transitions to final state over 800 ms on page load. Letter spacing collapses inward; opacity rises. The effect: the wordmark condenses into place from a loose blur of characters. - Pull quotes: appear via a bottom-up wipe using `clip-path: inset(100% 0 0 0)` → `inset(0% 0 0 0)` over 400 ms when entering viewport. **AVOID**: sticky nav with logo + hamburger, hero CTA button, pricing section, feature card grid, testimonial carousel, "trusted by" logo bar, footer social links, cookie banner, chatbot widget. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **watercolor**, layout = **editorial-flow**, typography = **grotesque-neo**, palette = **dark-neon**, patterns = **slide-reveal**, imagery = **gradient-mesh**, motifs = **cultural**, tone = **approachable-casual**. **Differentiators from every other design in the registry:** 1. **Slide-reveal stacked-page transition is at 0% frequency.** The scroll-driven page-stacking pattern — each section sliding up to cover the previous like layers in a broadsheet — does not appear anywhere in the 114 analyzed designs. Almost every site uses parallax (91%) or stagger (67%). This pattern inverts the convention: instead of content scrolling away, it is buried under the next content, creating an archive-layering metaphor directly relevant to the domain ("footprint" = things left behind, now covered over). 2. **Watercolor as dark-mode neon technique.** The registry shows watercolor at 12%, but every instance is presumably pigment-on-light-background (the conventional "artistic gallery" treatment). footprint.broker inverts this entirely: watercolor washes are `mix-blend-mode: screen` overlaid on near-black, making them behave as neon dye-diffusion rather than ink-on-paper. Dark-neon palette (7%) is not typically combined with watercolor (12%); the pairing is unreported. 3. **Cultural ghost-type with non-Latin scripts as decorative infrastructure.** The "cultural" motif (3%) and the domain concept ("footprint" = geographic presence) are unified into a single visual element: city names in 8+ scripts floating at 6% opacity behind content. This is not an illustrative gesture — it is a data layer made decorative. No other design in the registry uses typographic multilingual geography as its primary ambient imagery. 4. **Grotesque-neo typography at 1% frequency.** `Barlow Condensed` as the display face is distinct from the over-represented `Space Grotesk` (used in body here but not display) and avoids the editorial clichés of Cormorant or Playfair. The condensed grotesque at 120 px on a dark neon ground is both street-poster and editorial — bridging the two aesthetic registers of the site.