# Design Language for supplychain.wiki ## Aesthetics and Tone `supplychain.wiki` is **a merchant ledger that learned to breathe** — part Victorian trade atlas, part living organism. The aesthetic is deliberate anti-design applied to an authoritative knowledge domain: the supply chain is not a sterile flowchart, it is a vast, knotted, breathing thing — and the design refuses to pretend otherwise. Columns do not align because shipments do not arrive on schedule. Margins vary because margins are always negotiable. Text intrudes on imagery the way cargo intrudes on timetables. The mood is **opulent-grand** — not the cold gold of corporate luxury, but the rich warmth of aged counting houses, amber-lacquered shipping manifests, and sun-weathered silk rolls. There is gravitas here. The supply chain moves $24 trillion a year; this wiki treats it with the weight it deserves. Tone: authoritative yet restless, encyclopedic yet alive. Every section reads like a notation in a ledger that someone is still writing. The site knows it is a wiki — and refuses to look like one. Visual references: Venetian merchant ledgers, 19th-century railway cargo manifests, hand-annotated atlas pages, cracked amber varnish on old maps, hemp rope texture, wax-sealed documents. ## Layout Motifs and Structure **Editorial-flow layout** pushed to the edge of legibility: The page is a single vertical editorial scroll — not a grid, not a dashboard. It breathes. Column widths shift between sections: some text runs at 52ch (maximum readability, like a journal entry), then suddenly a pull quote bleeds across 90vw at enormous scale. The contrast between narrow and wide is the heartbeat of the layout. **Structural spine:** - A persistent 2px vertical rule in `#8B6914` (aged gilt) runs at `calc(8vw - 1px)` from the left edge across the full document height — it is the ledger's spine - All body columns are left-anchored to this spine; headers break left of it, into the margin - The margin (left of the spine) is used for annotation labels: section codes like `§ LOGISTICS`, `§ SOURCING`, `§ RESILIENCE` in small-caps, set at 11px **Section rhythm:** 1. **Folio entry** (`100svh`, opening) — massive domain wordmark fills the screen at ~20vw font-size, stacked vertically letter by letter down the spine. Below: a one-line provenance annotation in small italic. 2. **Concept corridors** — alternating narrow (52ch) and wide (90vw) text sections, no fixed height. Narrow = dense encyclopedic prose. Wide = single oversized concept, one word, 8vw type. 3. **Manifest blocks** — unordered, slightly rotated (max ±1.5deg) content cards. Cards appear as aged paper rectangles, staggered as if fanned out on a desk. 4. **Thread maps** — full-width SVG-drawn connection diagrams: nodes with domain labels connected by hand-drawn-style bezier threads in `#8B6914`. 5. **Closing colophon** — a typographic signature block in the style of a merchant's mark. No traditional navigation. No sticky header. Section waypoints are discovered by scrolling, not menus. ## Typography and Palette **Type system — all Google Fonts:** - **Primary display / Folio headings:** `Cormorant Garamond` (wght 300–700, italic variant) — Set at `clamp(3.5rem, 9vw, 11rem)` for the opening wordmark. Tracked at `-0.02em`. This is the merchant ledger voice: classical, authoritative, slightly compressed under its own weight. The italic variant is used for pull annotations and sub-headings. - **Body / Encyclopedic prose:** `EB Garamond` (wght 400–500) — At `1.125rem / 1.85` line-height. The oldest design in the Google Fonts library used for the oldest profession: moving goods. Long-form paragraphs in `#2C1810` on `#F5ECD7`. - **Annotation / Margin labels:** `Libre Baskerville` small-caps, 11px, letter-spacing `0.18em`, `#8B6914`. These are the ledger's marginalia. - **Thread labels / Concept codes:** `Space Mono` at 10px — stark geometric mono as counterpoint to the serif warmth. Used only for data-like fragments: route codes (`SGPFRANKHAMBURG`), timestamps, and the SVG thread map node labels. **Palette — earth-tones, aged vellum register:** - `#F5ECD7` — aged vellum (primary background; warm off-white with faint yellow) - `#2C1810` — burnt manuscript ink (primary text; near-black with red-brown undertone) - `#8B6914` — aged gilt (accent; the color of worn gold leaf on old maps) - `#5C3D1E` — dark cordovan (secondary accent; rich warm dark brown, used for borders and pull-quote backgrounds) - `#C4A96B` — pale gold (highlight; lighter gilt for hover states and decorative rules) - `#D9C5A0` — parchment mid (card backgrounds, slight transparency) - `#3E2208` — deep umber (deepest text on highlighted surfaces) - `#7A4F2B` — amber crate (tertiary; the color of well-traveled wooden crates) ## Imagery and Motifs **Abstract-tech meets merchant atlas — the core visual contradiction.** The imagery system runs on two registers that should not coexist but do: **1. Merchant atlas underlays (CSS/SVG, not raster):** Behind each major section, a low-opacity (`0.04–0.07`) SVG layer renders abstract cartographic geometry: rhumb lines radiating from a single point, faint Mercator grid parallels, compass rose fragments. These are NOT stock map images — they are constructed from SVG ``, ``, and `` primitives. The palette is monochromatic in `#8B6914`. The atlas layer is fixed (`position: fixed; z-index: 0`) so it remains static as content scrolls over it. **2. Vector-art supply chain nodes:** Each concept section is accompanied by an inline SVG illustration — strictly geometric, no gradients, no shadows. These illustrations depict: port cranes rendered as simple rectangles and triangles; container ship silhouettes in 5 rectangles; warehouse grids as isometric outlines. Colors: `#8B6914` primary, `#5C3D1E` shadow edge, `#F5ECD7` fill. The geometry is intentionally simple — early technical illustration aesthetic, not modern icon design. **3. Elastic motion motifs:** The dominant interaction pattern is elastic. When users scroll past threshold points, manifest cards "snap" into position with an overshoot spring (CSS `cubic-bezier(0.34, 1.56, 0.64, 1)`). Thread map connectors draw themselves with SVG stroke animation, then slightly overshoot their endpoint before settling. The folio wordmark letters descend individually on load with staggered spring delays — each letter 40ms after the previous. This elasticity communicates: supply chains have tension, and tension has rebound. **4. Wax-seal decorative motifs:** Section transitions use a circular wax-seal SVG motif: a `#8B6914` circle, slightly rough-edged via SVG `feTurbulence` filter, containing an abstract supply-chain glyph (three connected nodes). These appear at the vertical midpoint of section dividers, breaking the spine rule. **5. Rope/thread textures:** CSS `repeating-linear-gradient` at 45-degree angle creates a subtle hemp-rope diagonal texture over card backgrounds — `rgba(140, 105, 20, 0.06)` stripes at 2px width. ## Prompts for Implementation Build `supplychain.wiki` as **a single unscrolled merchant manifest come to life** — not a wiki in the Wikipedia sense, but a wiki in the original sense: a document that grows. The visitor moves through the supply chain's knowledge the way a Victorian merchant moves through a port city: each section is a district, each concept is a warehouse. **Macro structure (full scroll, top to bottom):** 1. **Folio Opening (`100svh`).** Black background for 0.3s, then `#F5ECD7` floods in from left to right over 0.8s (`clip-path` reveal). The atlas underlay appears at 0.04 opacity. The wordmark `supplychain` descends letter-by-letter on elastic spring (Cormorant Garamond, ~20vw, `#2C1810`). Below: the `.wiki` suffix in `#8B6914`, italic, at 4vw. Beneath that: one-line provenance annotation — "A living ledger of global movement." in EB Garamond italic 1.1rem. 2. **Thread Map Introduction (`80svh`).** Full-width SVG: five port nodes (circles, labeled SHANGHAI, ROTTERDAM, LOS ANGELES, SINGAPORE, HAMBURG) connected by animated bezier paths that draw in sequence. Lines animate with `stroke-dasharray/dashoffset`, elastic overshoot on endpoint. Background: `#F5ECD7`. The animation begins when the section enters viewport. 3. **Concept Corridors (variable height, 6–8 sections).** Each corridor alternates between: - **Narrow entry (52ch):** EB Garamond body prose, 1.125rem. Topic headings in Cormorant Garamond italic at 2.4rem. Left-anchored to the spine. - **Wide proclamation (90vw):** Single concept rendered large — e.g., "DISRUPTION" in Cormorant Garamond 8vw, `#8B6914`, positioned asymmetrically at 60% from left. 4. **Manifest Block Section (full scroll width).** Three to five manifest cards: `D9C5A0` background, `2px solid #8B6914` border, slightly rotated (CSS `rotate: -1.2deg` on card 2, `+0.8deg` on card 4). Each card: a concept name in Cormorant Garamond 1.6rem, a 3-line description in EB Garamond, a section code in Space Mono. On scroll-trigger, cards animate in with elastic snap from below. 5. **Resilience Atlas Section (`80svh`).** A full-width abstract map: SVG rhumb lines radiating from a central point, six geographic labels in Space Mono, three disruption markers (red-shifted `#8B1414` circles with pulse animation). Background: `#2C1810` (inverted — dark section). Text: `#F5ECD7` and `#C4A96B`. This is the one dark section in the design — it marks the moment of risk. 6. **Annotation River.** A long narrow section (max 600px) where footnote-style annotations flow down the page: 11px Libre Baskerville small-caps labels on the left margin, EB Garamond prose extending right. Visual rhythm of a heavily annotated manuscript page. 7. **Closing Colophon (`60svh`).** Centered: a wax-seal SVG (120px), the domain wordmark in small Cormorant Garamond italic, and a merchant's mark — three connected nodes in `#8B6914`. No footer links. No CTA. The page ends the way a ledger closes. **Animation principles:** - All enters use Intersection Observer, threshold 0.2 - Spring easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` for elastic, `cubic-bezier(0.16, 1, 0.3, 1)` for snappy settles - SVG thread maps use `stroke-dasharray` + `stroke-dashoffset` animated via CSS keyframes or GSAP - No auto-play video, no raster images, no stock photography - Page background is always `#F5ECD7` except the Resilience Atlas section **AVOID:** Pricing blocks, feature stat grids, CTA buttons, sidebar navigation, hamburger menus, progress bars, loading spinners, grid-of-cards layouts that look like product catalogs. ## Uniqueness Notes **Chosen seed:** aesthetic: anti-design, layout: editorial-flow, typography: serif-classic, palette: earth-tones, patterns: elastic, imagery: vector-art, motifs: abstract-tech, tone: opulent-grand **3+ differentiators from the registry:** 1. **Anti-design applied to supply chain knowledge** — anti-design (3% usage) has never been applied to a logistics/trade domain in this registry. The tension between chaotic editorial layout and the systematic nature of supply chains creates a productive contradiction: the design argues that supply chains are more organic and fragile than any flowchart suggests. No other design in the registry attempts this semantic inversion. 2. **Merchant ledger as interface metaphor** — the spine rule + margin annotation system (§-coded section labels in the physical margin) imports the grammar of double-entry bookkeeping directly into web layout. While several designs use "editorial" or "magazine" metaphors, none use the specific visual grammar of trade ledgers: the left-margin annotation column, the fanned manifest cards, the wax-seal section dividers. 3. **Elastic motion as conceptual argument** — most elastic/spring animation in the registry is decorative. Here it is argumentative: the supply chain has tension and rebound, and every UI interaction demonstrates this. The overshoot on the letter-drop, the elastic snap of manifest cards, the SVG thread overshoot — each is a micro-essay about the physics of trade. This ties interaction pattern to domain meaning, not mere visual delight. 4. **The dark inversion section** — the Resilience Atlas (`#2C1810` background) breaks the warm vellum palette at exactly one moment, representing systemic risk. Most single-palette designs maintain color consistency throughout; this design uses palette inversion as editorial punctuation, the way a journalist would use a sidebar in a different typeface. 5. **Reference avoided patterns:** `editorial` (52% — general pattern overused, this design uses `editorial-flow` specifically with ledger metaphor to differentiate), `tech` motifs (24% — replaced with abstract-tech applied to historical merchant imagery rather than circuits or code), `vintage` motifs (34% — avoided by using *functional* historical reference rather than decorative nostalgia).