# Design Language for supplychain.wiki

## Aesthetics and Tone

supplychain.wiki is a **working draftsman's atlas of how things move** — a site built to feel like the unrolled cross-section drawings tacked to the wall of a port logistics office at 2 a.m., where a planner is tracing a single pallet from a soybean field in Mato Grosso to a ramen shelf in Osaka. The aesthetic is **isometric technical documentation** rendered with the patience of a 1960s Soviet industrial-process poster and the cleanliness of a Braun service manual. Nothing here is "marketing." It is a **reference instrument**: axonometric diagrams, exploded views of a shipping container, callout leaders with index numbers, fold-out plates, and a quiet authority that assumes the reader is here to *understand a system*, not to be sold one.

The tone is **scholarly-intellectual but grounded** — the voice of a logistics lecturer who has actually stood on a quay. It is calm, precise, faintly obsessive about units (TEU, deadweight tonnes, lead-time days, cube utilisation %). It treats the global supply chain the way a naturalist treats a tide pool: as something vast, interlocking, slightly miraculous, and worth diagramming carefully. The mood is **blueprint-cool with warm graphite** — never cold corporate-tech, never dashboard-busy. There is wonder in it, but the wonder is expressed through *accuracy*, not through hype.

This deliberately avoids the two ceiling patterns of the archive — **hand-drawn (94%)** and **glassmorphism (84%)** appear nowhere. There are no frosted panels, no sketchy wobbly strokes. Every line is a deliberate, ruled isometric vector, as if plotted.

## Layout Motifs and Structure

The spine is **isometric technical docs** (only 13% of archive) crossed with **timeline-vertical** (6%) — the site reads top-to-bottom as a *journey along a supply chain*, each section a "station" on the route, and every station is illustrated by a true 30°/30° axonometric plate.

**The drafting-table grid:**

- The page is laid on a **continuous engineering grid**: a fixed background of pale 8px minor / 80px major graph lines, drawn in CSS with layered `linear-gradient` repeats, that the whole document scrolls over. This grid never moves — content slabs float above it like cut paper laid on a light table.
- Each station occupies **100vh minimum** and is composed as a **two-zone split**: a left **plate zone** (≈58vw) holding the isometric SVG diagram, and a right **legend zone** (≈42vw) holding the numbered callout list, the figure caption, and the running prose. On narrow screens the legend stacks below the plate.
- A persistent **left-edge route rail**: a thin vertical line with small square nodes — one per station — that fills with graphite as you scroll, exactly like the route line on a logistics flow chart. Beside the active node, a monospace station code emerges (`ST-01 ORIGIN`, `ST-02 CONSOLIDATION`, …). This is the only navigation. No top bar, no hamburger, no logo cluster, no footer nav.
- **Callout leaders are real geometry.** Numbered circles on the diagram connect to legend lines with thin elbowed leader lines (horizontal then vertical, never diagonal-curved), redrawn live with SVG `<path>` so they re-anchor on resize. Hovering a legend item highlights its callout circle on the plate and dims the rest of the diagram to 35% opacity.
- **Fold-out plate moment:** one mid-document station is a wide **horizontal-scroll** panel — a single continuous isometric "world conveyor" drawing ~4 screens wide (farm → mill → port → vessel → port → DC → shelf) that the visitor scrubs sideways, with the route rail rotating to run horizontally for that section only.

Explicitly avoided: card-grid (92%), centered hero (80%), dashboard (34%), bento-box. There are no cards. There are *plates*.

## Typography and Palette

**Typefaces — Google Fonts only:**

- **Spectral** (serif, weights 300/400/500/600, with italics) — the prose register. A Production Type serif designed for screens, with a slightly technical, almost cartographic warmth. Used for all running body text, the figure captions, and station titles set in 400 small-caps. It carries the "lecturer's manual" voice.
- **IBM Plex Mono** (weights 400/500/600) — the instrument register. Used for *everything that is a measurement or a code*: station codes, callout index numbers, unit annotations on the diagrams (`13.7 m`, `2 TEU`, `+9 days`), grid coordinates, the route rail labels. Set at `0.06em` letter-spacing uppercase for labels. This is the typographic signature.
- **Archivo** (variable, weights 500/600/700, plus `Archivo Expanded` styling via `font-stretch`) — the section-divider register. Big expanded uppercase numerals for station numbers (`01`, `02`) printed huge and faint behind the plate zone, like the figure numbers on a fold-out engineering sheet.

Hierarchy: huge faint Archivo Expanded station numerals (clamp 18–34vw, 6% ink), Spectral small-caps station titles (clamp 2–3.4rem), Spectral 400 body (1.0625rem, line-height 1.65, measure capped at 64ch), Plex Mono micro-labels (0.7rem).

**Palette — "blueprint graphite on drafting cream", a muted/duotone-leaning scheme (avoiding the 98% warm-gradient default by keeping gradients to grid-line repeats only):**

- `#F4F1E8` — **drafting cream**, the paper field (primary background)
- `#E9E4D4` — **light-table beige**, secondary panels / legend zone tint
- `#1E2A33` — **graphite ink**, primary text and diagram contour lines
- `#3C5A6E` — **blueprint slate**, the dominant accent: route rail, callout circles, key diagram fills
- `#C24E2E` — **minium orange** (red-lead primer, the colour real machinery gets undercoated in) — used *only* for the single active/highlighted element: the live callout, the current route node, one underline. Strictly rationed.
- `#7E8A6B` — **olive drab**, a quiet secondary fill for "in-transit" diagram elements (containers on water, trucks)
- `#9C9482` — **pencil grey**, hairlines, the 8px minor grid, disabled legend items
- `#F8F6EF` — **near-white plate**, the cut-paper slabs that float over the grid

Ink-on-paper, high-legibility, deliberately *not* dark-mode, deliberately *not* neon. The only saturated colour is the rationed minium orange.

## Imagery and Motifs

**Zero photography** (98% of the archive uses photography — this site uses none) and **zero AI-render gloss**. Every image is a **hand-built isometric SVG plate**, drawn at a true 2:1 isometric projection, contoured in graphite ink at 1.5px, with flat fills in the palette and *no gradients except a single 6%-opacity "ambient occlusion" shadow polygon under each volume*.

**The plate inventory (one signature drawing per station):**

1. **Origin** — an isometric field-and-silo: stacked grain, a loading auger, a waiting flatbed, callouts for harvest date, moisture %, lot ID.
2. **Consolidation** — an exploded axonometric of a **40-ft shipping container**, lid lifted and floating, pallets numbered 1–11 inside, with a cube-utilisation gauge drawn as a stepped bar.
3. **Port of Origin** — a quay crane (the iconic ship-to-shore gantry) mid-lift, isometric, with the container suspended on the spreader, a stack of containers colour-coded by destination.
4. **Ocean Leg** — the wide horizontal-scroll plate: a container vessel in cutaway profile *flattened into iso*, hull cells filled, a great-circle route line above it with day-counters, weather glyphs, a fuel-burn ribbon.
5. **Port of Entry** — customs/inspection bay: a container split open for examination, a documents tray (bill of lading, packing list, certificate of origin) rendered as labelled iso rectangles.
6. **Distribution Centre** — a multi-level racking aisle in isometric, an order-picker, conveyor segments, a "pick path" drawn as a routed orange leader line snaking through the racks.
7. **Last Mile** — an iso city block: a delivery van, parcels stacked, a doorstep, the route line terminating in a small filled square — the destination node — in minium orange.

**Recurring motifs:** `grid-lines` (10%, used as the literal substrate); `abstract-tech` flow arrows (always elbowed, never curved); the **callout circle** (a Plex Mono numeral in a thin slate ring) used as a unifying device everywhere — even section transitions are "callout 08 → see overleaf"; a faint **registration-mark** corner-cross in each plate's four corners, like a printing plate; **unit ribbons** — thin horizontal bars carrying `Plex Mono` measurements that animate their numbers when scrolled into view.

## Prompts for Implementation

Build supplychain.wiki as a **single static HTML document** + one CSS file + one small vanilla ES module (target < 14KB JS). No framework, no build step, no service worker. Preconnect to Google Fonts and load **Spectral, IBM Plex Mono, and Archivo** in one `display=swap` request.

**Narrative structure — the visitor walks the chain:**

The document is a **guided descent along one pallet's journey**, seven stations, scroll-driven. There is **no CTA, no pricing table, no stat-grid hero, no testimonials, no email capture, no logo wall, no FAQ, no chatbot, no cookie banner.** It opens not with a headline but with a **title plate**: the words "supply chain" set in Spectral small-caps over a faint full-screen isometric world-conveyor sketch, a Plex Mono subtitle reading `FIG. 0 — THE SYSTEM, IN SEVEN PLATES`, and the route rail beginning its descent at the left edge.

**Section-by-section build:**

1. **Title plate (ST-00).** Faint background iso line-drawing of the whole chain; on load, the route rail draws itself top-down with `path-draw-svg` (stroke-dashoffset), nodes popping in with a tiny `spring` settle (no bounce overshoot beyond 4%). A single line of prose: what a supply chain *is*, in one careful sentence.
2–8. **Stations ST-01…ST-07.** Each: huge faint Archivo Expanded numeral behind the plate; the isometric SVG plate on the left; on scroll-into-view, the plate's contour `<path>`s draw in with a staggered `path-draw-svg` (each component 120ms apart, `scroll-triggered`), then fills `fade-reveal` in. The legend zone's numbered items `stagger` upward 14px into place. Callout leader lines draw last, elbow-by-elbow. Hovering a legend `<li>`: its callout circle on the plate scales to 1.15 with the minium-orange ring, all *other* diagram groups drop to 35% opacity (`blur-focus`-style attention, but via opacity not blur). Unit ribbons `counter-animate` their numbers (e.g. lead time counting `0 → 38 days`) when 60% visible.
3. **The ocean leg (ST-04)** is the **horizontal-scroll** centrepiece: pin the section, translate a ~400vw isometric strip on vertical scroll; the route rail rotates to horizontal for this panel; day-counters and the fuel-burn ribbon update as the vessel passes longitude marks. Exit unpins back to vertical flow.
4. **Closing plate (ST-08 "Overleaf").** Not a CTA — a *colophon*: the whole route line redrawn in miniature as a single elegant iso polyline across the full width, every station node labelled in Plex Mono, the minium-orange destination square pulsing once (`pulse-attention`, single cycle, then still). A last Spectral sentence on what the diagram leaves out.

**Interaction texture:** cursor near the plate reveals a faint **crosshair guide** (two 1px pencil-grey lines tracking the pointer, snapping to the iso grid) — a `cursor-follow` that feels like a drafting cursor, not a blob. Scroll progress is shown only by the rail filling. All motion is restrained, ruled, mechanical-precise — easings are gentle `cubic-bezier(0.22, 1, 0.36, 1)`, durations 280–620ms, nothing springy-cute. Respect `prefers-reduced-motion`: drop path-draws and counters to instant, keep layout.

**Avoid:** CTA-heavy layouts, pricing blocks, stat-grids, card grids, glassmorphic panels, hand-drawn wobble, dark-mode neon, hero-with-button. This is a reference plate, not a landing page.

## Uniqueness Notes

Differentiators from other designs in this codebase:

1. **True isometric SVG plates as the *only* imagery — no photography at all.** 98% of the archive leans on photography; this site has zero. And while 13% touch "isometric," none commit the *entire* visual system to ruled 2:1 axonometric technical drawings with numbered callout leaders. The drawing *is* the content.
2. **The numbered-callout-leader as a site-wide UI primitive.** Legend items, section transitions, and hover states all run through the same "circled index number → elbowed leader line → legend entry" device borrowed from engineering manuals. No card-grid (92%), no bento-box — everything is a *plate with a legend*.
3. **Ink-on-drafting-cream palette with a single rationed minium-orange.** Sidesteps the 98% warm-gradient / 84% glassmorphism conventions entirely — gradients exist only as graph-paper line repeats; the lone saturated colour appears on exactly one element at a time (the active callout / current route node).
4. **The route rail as sole navigation, with a horizontal-rotation moment.** A logistics flow-chart route line that fills on scroll, sprouts Plex Mono station codes, and *rotates 90°* for the one horizontal-scroll ocean panel — not a top bar, not a hamburger anywhere.
5. **A "drafting cursor" not a "blob cursor."** The cursor-follow effect is a grid-snapping crosshair guide, reframing the over-used cursor-follow pattern (89% of archive) into something that reads as a CAD pointer.
6. **Scholarly-grounded voice obsessed with units** (TEU, cube %, lead-time days) — collapses the 33% pastoral-romantic / 21% warm-inviting tone conventions into the 10% scholarly-intellectual lane, expressed through measurement annotations rather than prose flourish.

Chosen seed/style: **isometric technical docs** — `aesthetic: isometric, layout: timeline-vertical, typography: tech-mono, palette: muted, patterns: path-draw-svg, imagery: isometric-icons, motifs: grid-lines, tone: scholarly-intellectual`.

Avoided overused patterns per frequency analysis: hand-drawn (94%), glassmorphism (84%), photography (98%), card-grid (92%), centered hero (80%), warm-gradient palette (98%), cursor-follow-blob (89% — reframed as crosshair).
<!-- DESIGN STAMP
  timestamp: 2026-05-11T08:44:51
  domain: supplychain.wiki
  seed: unspecified
  aesthetic: supplychain.wiki is a **working draftsman's atlas of how things move** — a site ...
  content_hash: 8434fe0141bb
-->