# Design Language for supplychain.observer ## Aesthetics and Tone supplychain.observer is the visual record of a **field surveyor who has walked every link of the chain** — a figure who once traced a bolt of linen from the flax field in Belgium through the spinning mill in Lancashire, the container hold in Antwerp, the bonded warehouse in New Jersey, and the dry-goods drawer in a Catskills farmhouse. The site exists to surface that journey. It is not a dashboard. It is a **naturalist's field notebook for goods in motion**: careful, earthy, observational, patient. The aesthetic is **cottagecore-industrial** — a pairing that is not contradictory if you accept the premise that supply chains are literally the connection between the cottage and the world. The visual language borrows from two archival sources simultaneously: **nineteenth-century botanical survey plates** (pressed-specimen illustration, ink wash, hand-annotation) and **1940s–1960s documentary photography of working ports, mills, and warehouses**. These two registers — the tender and the industrial — are set in conversation throughout the page, never resolved into each other. A crate manifest reads like a seed catalogue. A route map looks like a hedgerow survey. The tone is **grounded-earthy**: not anxious, not urgent, not breathless with statistics. The site speaks in the cadence of someone who has actually seen the crates move — a quiet authority, an unhurried attentiveness. It trusts the visitor to slow down. Color choices emphasize warm cream, dusty sage, amber-flour, and the faded-ink brown of a ledger that has been opened many times. There are no bright CTAs, no urgency pulses, no red alert indicators. Even the data is presented as **observation**, not alarm. The key emotional register: *the satisfaction of understanding where things come from.* ## Layout Motifs and Structure The macro structure is **hero-dominant with vertical survey chapters** — a single full-viewport opening plate that establishes the observer's position, followed by five chapters that unroll the chain link by link, each chapter occupying at minimum `90svh` on desktop. **Hero plate (full-viewport, `100svh`).** A double-exposure composition: a vintage documentary photograph of a working port (cranes, crates, long shadows at dawn) bleeds to all four edges at low saturation. Over it, at the exact center of the viewport, the wordmark is set in slab-serif at a generous weight. Below the wordmark, a single handwritten-style annotation line in lighter weight. No navigation bar visible on load — it fades in as a thin hairline strip after 1.2 seconds. No scroll indicator arrow. The hero earns its scale by being completely still: no autoplay video, no particle system, no animated gradient. The stillness is the statement. **Structural asymmetry (the surveyor's notebook rule).** A persistent vertical hairline at `33.3%` from the left edge of the viewport runs through all non-hero chapters on desktop (≥1024px). Left of the line: margin annotations, chapter labels, coordinate notations in small slab-serif caps. Right of the line: the body content, flowing in a generous single column. This mimics the layout of a field notebook opened flat — the narrow margin is for datestamps and classifications, the wide block is for observation prose and plate illustrations. **Chapter anatomy (five chapters below the hero):** 1. **The Origin Plate** — a full-width photographic landscape of a source region (farmland, quarry, textile district), cropped to `56svh`, with a botanical-survey overlay of route annotations 2. **The Transit Record** — a hand-annotated path diagram (SVG, not a third-party map library) showing goods movement across a schematic continental outline; styled as if drawn with a ruling pen on survey linen 3. **The Warehouse Inventory** — a grid of paired items (vintage photograph thumbnail + brief observational caption), 3 columns on desktop, single column on mobile; items scale up on hover (`scale-hover` pattern, 1.04× scale, 220ms ease-out cubic-bezier, no border change) 4. **The Ledger** — tabular data rendered as if typeset in a Victorian counting-house ledger: slab-serif numerals, hairline table rules, alternating cream/warm-white row bands, no rounded corners anywhere 5. **The Field Note** — a single long-form observational paragraph, set in generous leading (1.8), followed by a hand-inked botanical ornament (SVG) as the closing device **No sticky header on mobile.** Navigation (just four items: Observe / Routes / Inventory / Ledger) appears only as a fixed thin bar that is transparent over the hero and becomes `--cream-base` on scroll past `100svh`. **Horizontal rhythm:** 8-column grid on desktop with a `clamp(1.5rem, 4vw, 3rem)` gutter. Content uses columns 2–7 (body), column 1 (margin), column 8 (breathing room). No content ever fills all 8 columns except the hero photographic bleed. ## Typography and Palette **Typography — slab-serif primary, humanist secondary. All on Google Fonts. No invented names.** Three typefaces, strict structural roles: - **Display and Heading: *Zilla Slab*** (Google Fonts). Weight 400 for body-scale headings, weight 600 for the hero wordmark and chapter titles, weight 300 italic for annotation lines and margin notes. Zilla Slab carries the survey-instrument quality: its serifs are mechanical (drawn with a flat nib at a fixed angle) rather than calligraphic, which reads as *precision* rather than *ornament*. Set at clamp(2.8rem, 6vw, 6.4rem) for the wordmark; clamp(1.6rem, 3.2vw, 3.2rem) for chapter titles. - **Body prose: *Source Serif 4*** (Google Fonts). Weight 400 for all long-form reading text. Variable optical size (`opsz` axis set to 14–16 for body, 20+ for pull-quotes). Line height 1.78 on desktop, 1.7 on mobile. Measure strictly capped at 68 characters (approximately `55ch`). Source Serif 4 is chosen because it reads like a well-maintained Victorian typeface — dignified without being precious, and it handles the ledger numerals beautifully in tabular figures (`font-variant-numeric: tabular-nums`). - **Annotation and UI labels: *DM Mono*** (Google Fonts). Weight 400 only. Used for coordinate labels in margin, table column headers, route notation overlays, and the navigation items. Set at 0.72rem–0.82rem with letter-spacing `0.08em`. DM Mono's monospaced discipline reads as the surveyor's instrument notation — not tech-cool, but *technically accurate*, the way a grid reference is written. **Palette — creamy-pastel, five named variables:** - `--cream-base`: `#F5EFE0` — the primary page background; warm cream, not pure white; like a slightly foxed survey paper - `--sage-field`: `#8A9E7E` — a dusty, low-chroma sage green; used for accent elements, the persistent hairline, botanical SVG strokes; never used as a large fill - `--amber-flour`: `#C49B54` — a warm, mid-value amber; used for decorative rules, ledger alternating row tint (`rgba(196,155,84,0.07)`), the Zilla Slab wordmark - `--ink-brown`: `#3E2B1A` — the primary text color; not pure black; a deep warm brown like iron-gall ink that has aged ten years; used for all body text, headings, table text - `--dust-linen`: `#D9CDB8` — a pale warm-linen mid-tone; used for table rule hairlines, secondary borders, the navigation background on scroll, the survey-notebook margin band Five colors only. No neon, no pure black (`#000`), no pure white (`#fff`). No gradients of more than two stops. The palette must read as *materials* (paper, ink, sage field, amber grain) rather than *interface states* (primary, secondary, success, danger). ## Imagery and Motifs **Imagery: vintage documentary photography, desaturated and warm-toned, zero stock-photo aesthetics.** The photographic corpus draws exclusively from documentary images of actual supply chain nodes — ports, rail yards, grain silos, textile mills, container stacks, market halls — treated as follows: - **Desaturation to 60–70% of original chroma**, then a warm amber tone overlay (`mix-blend-mode: multiply`, `--amber-flour` at 18–22% opacity) so all photographs read as archival rather than contemporary - **Grain overlay applied globally** via an SVG `feTurbulence` filter (frequency `0.65`, numOctaves 4, baseFrequency tuned per viewport) at 6–8% opacity; this simulates the grain of a contact print - **No product-photography aesthetics**: no white-cyclorama shots, no hero portraits of smiling logistics workers, no floating-device mockups. All photographs are **landscape or object**, never people as subjects, always the *material of commerce* (the crate, the field, the rail track, the warehouse shelf) - **Hero photograph scale:** full-viewport bleed, cropped to the center-subject rule (the horizon sits at 38% from top, not 50%), giving the impression of a wide, grounded view rather than a balanced composition **Tech motifs — reinterpreted as instrument, not interface:** The "tech" motif is present as **navigation technology from the age of survey** rather than silicon-era iconography. Specifically: - **Route SVG overlays** styled as if drawn with a ruling pen: `stroke-dasharray` on path segments, coordinate tick marks at junctions, bearing annotations in DM Mono - **The schematic continental map** (Transit Record chapter) is hand-drawn SVG — simplified coastlines only, no political boundaries, drawn in `--sage-field` at 0.8px stroke, reminiscent of a 1950s pilot chart or Admiralty Chart detail - **No icons from icon libraries.** The only decorative marks are: (a) a pressed-specimen botanical silhouette (single plant, SVG, appears once as chapter-closing ornament), (b) the ruling-pen route marks, (c) a small sextant-arc device used as the section separator (an arc of `--amber-flour`, 1.2px, no fill, 40px radius) - **The Warehouse Inventory grid uses `scale-hover`:** on pointer-over, each item scales to `1.04` over 220ms (`cubic-bezier(0.25, 0.46, 0.45, 0.94)`), no other change — no shadow, no border, no color shift. The scale alone confirms presence. This is the **only interaction animation** on the page. **Decorative motifs — botanical + cartographic, never decorative-tech:** - A pressed-fern silhouette SVG (single frond, stylized, not photorealistic) appears once in the hero margin and once as the terminal ornament - A `+` crosshair mark (4px, `--sage-field`, hairline stroke) is used at chapter-boundary intersections in the margin - The ledger chapter uses typographic ornaments only: `§`, `—`, and `†` as section marks; no icon fonts, no SVG decoration ## Prompts for Implementation Build supplychain.observer as a **single-page field report** — the output of one surveyor's season-long observation of a specific supply chain. There are no product features to sell, no SaaS tiers to compare, no testimonials to scroll past. There is only the chain itself, observed and documented. **Mood reference:** the visual equivalent of reading a 1952 National Geographic long-form feature about how rubber gets from a Malay plantation to a Birmingham tyre factory — thorough, earthy, quietly astonishing, and visually patient. **Hero section (`100svh`):** - Background: the port photograph, desaturated and amber-toned, full bleed via `object-fit: cover` - An `::after` pseudo-element adds the grain texture via SVG `url()` data-URI - Wordmark centered both axes: `Zilla Slab 600` at `clamp(3rem, 7vw, 7rem)`, color `--cream-base` - Below wordmark: a single annotation line in `Zilla Slab 300 italic`, `clamp(1rem, 1.8vw, 1.4rem)`, `--dust-linen`: *"every link, observed"* - Navigation bar: `position: fixed; top: 0; width: 100%`; transparent on hero, transitions to `background: --cream-base` with a hairline bottom border in `--dust-linen` at `scrollY > window.innerHeight * 0.9`; nav items in `DM Mono 400`; no hamburger on desktop **Notebook layout (chapters 1–5):** - CSS Grid: `grid-template-columns: 1fr 33.3% auto 55% 1fr` on desktop; single column on mobile - The persistent hairline is a `1px` right border on the margin column element, `--dust-linen` - Margin annotations use `writing-mode: horizontal-lr` on desktop (they read normally, not rotated), positioned in the narrow left column - Chapter titles appear in the margin column as vertical slab-serif labels on desktop (rotated 90° counterclockwise via `transform: rotate(-90deg)`) **The Transit Record SVG map:** - Drawn entirely in inline SVG; no external map libraries - Coastline paths simplified to ≤ 40 points per continent silhouette - Route path: `stroke-dasharray: 6 4; stroke-dashoffset` animated from full-length to 0 on IntersectionObserver trigger (500ms delay, 1400ms duration, linear easing) — simulates the ruling pen drawing the route in real time - Coordinate tick marks at every 10° latitude/longitude intersection, `DM Mono 400` at 8px **The Ledger chapter:** - `` element, no CSS frameworks; pure custom styles - `border-collapse: collapse; border-spacing: 0` - Row background alternates between `--cream-base` and `rgba(196,155,84,0.06)` - `th` elements: `Zilla Slab 600` at 0.75rem, letter-spacing `0.06em`, uppercase, color `--ink-brown`, bottom border `1px solid --dust-linen` - `td` elements: `Source Serif 4 400` for text, `DM Mono 400` for numeric values using `font-variant-numeric: tabular-nums` - Table caption above: italic `Source Serif 4` in `--amber-flour` **Scale-hover on Inventory grid:** - `transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94)` - `transform: scale(1.0)` default; `transform: scale(1.04)` on `:hover` - `will-change: transform` for GPU compositing - `backface-visibility: hidden` to prevent subpixel jitter **AVOID in implementation:** - Any use of pure white (`#fff`) or pure black (`#000`) - Rounded corners anywhere (0px border-radius throughout) - Box shadows (use `outline` or `border` when separation is needed) - Animations triggered by time rather than user scroll/interaction - Any gradient other than the hero overlay (linear, max 2 stops, at low opacity) - Sticky sidebar or sticky elements other than the navigation bar - Grid of statistics with large numbers and percent-change badges - Any element that resembles a SaaS product dashboard ## Uniqueness Notes Seed: aesthetic: cottagecore, layout: hero-dominant, typography: slab-serif, palette: creamy-pastel, patterns: scale-hover, imagery: vintage-photography, motifs: tech, tone: grounded-earthy Three or more deliberate differentiators from the existing 496-design corpus, with frequency-analysis context. 1. **Cottagecore applied to industrial infrastructure, not pastoral craft.** The frequency report shows `cottagecore` at 4% (approximately 20 prior occurrences). The prior corpus uses cottagecore as a pastoral-craft frame (printing houses, herbalists, botanical studios). supplychain.observer takes cottagecore's core premise — *attentiveness to material origin, the satisfaction of tracing provenance* — and applies it to the industrial supply chain. The aesthetic outcome is **the same earthy patience, but the subject matter is cranes and crates, not ferns and fondant**. The botanical frond ornament and the pressed-specimen grain overlay serve the same purpose they do in a cottage-aesthetic site, but they appear alongside a schematic Admiralty Chart and a Victorian counting-house ledger. This pairing does not exist in the corpus. 2. **Slab-serif as the survey instrument, not as editorial impact.** The frequency report shows `slab-serif` at 3% (approximately 15 prior occurrences). Prior slab-serif uses in the corpus are typically editorial (magazine headlines, bold contrast with thin body text). supplychain.observer uses Zilla Slab at restrained weights (300–600) as the *font of the surveyor's instrument* — the way the Ordnance Survey would letter a 1:50,000 map in a mechanical slab: precise, repeatable, unpretentious. The slab serifs are not expressive; they are **indexical**, pointing at things. The `DM Mono` annotation layer reinforces this: both fonts read as tools of measurement, not tools of persuasion. 3. **Hero-dominant layout with complete stillness.** The frequency report shows `hero-dominant` at 4% (approximately 20 prior occurrences). The typical hero-dominant site in the corpus uses the hero as an animated focal point (parallax, video, particle system, typewriter text). supplychain.observer's hero is **cinematically still** — one photograph, one wordmark, one annotation line. The stillness functions as curatorial restraint: a museum vitrine for the photograph. No other design in the corpus pairs `hero-dominant` with deliberate, complete absence of hero animation. 4. **Tech motifs expressed through cartographic instruments, not silicon imagery.** The frequency report shows `tech` at 24% (approximately 120 prior occurrences). The overwhelming majority of tech-motif uses in the corpus employ silicon-era imagery: circuit traces, hexagonal grids, gradient glows, HUD overlays, terminal typography. supplychain.observer places its tech motifs in the **age of survey and cartography** — ruling-pen route paths, Admiralty Chart coastlines, sextant arcs as section separators, bearing annotations in monospace. The technology that connects the cottage to the global supply chain is not a microchip; it is a sextant, a running stitch, and a ledger entry.