# Design Language for supplychain.watch ## Aesthetics and Tone supplychain.watch is **an isometric situation room rendered as a slow-moving cartographic diorama** — picture a war-room sand table from a 1970s logistics bureau, but the sand has been replaced by a quiet grid of pale graph paper, and the little wooden ship-and-crate tokens have become precise axonometric line-drawings that drift along their routes at the pace of real freight. The mood is **calm-serene meets quietly authoritative**: this is not a dashboard screaming alerts, it is an observatory — a place where you stand above the whole network, watch ports breathe, and notice the one container lane that has gone the colour of low-tide silt. The governing metaphor is **the watchtower over a model world**. Everything is drawn in a true isometric projection (the classic 2:1 dimetric, 30°/30°), as if the entire global supply chain were a tabletop model kit assembled from blueprint card. Lines are thin and confident. Fills are sparse — mostly the absence of fill, letting the graph-paper substrate show through. Colour is rationed like a strict editor would ration adjectives: a near-monochrome field of ink-on-vellum, with exactly one warm "freight-amber" used only where cargo is actually moving, and one cold "stall-cyan" used only where something has stopped. Nothing glows. Nothing is glassy. Nothing tilts in 3D toward the cursor like every other site. The tone is the tone of a quiet expert pointing at a map and saying, very softly, "here." ## Layout Motifs and Structure The site is **one continuous isometric plane** — a single oversized axonometric "table" that the viewport floats above. As you scroll, you are not moving down a stack of cards; you are **traversing the model world** — the camera (a fixed 30°/30° iso) tracks across the diorama from the upstream raw-material highlands, down through factories, ports, ocean lanes, distribution yards, and finally the last-mile streets. Scroll = a dolly along the supply chain itself. - **The iso-grid substrate.** The entire background is a single rhomboid graph-paper texture (CSS gradients producing a 2:1 isometric lattice), faint ink lines on warm vellum. Every element — every node, every route, every label card — sits *on* this grid, snapped to its rhombus cells. The grid never scrolls away; it is the floor of the world. - **Nodes as axonometric blocks.** Each "section" of the narrative is a **place in the model**: a stack of crates (the warehouse), a low extruded slab with a crane line (the port), a cluster of thin chimneys (the factory). These are drawn in pure SVG line-art, isometric, mostly hollow. They are arranged not in a column but along a **gently descending switchback path** that zig-zags left-right-left across the plane as you scroll — the route a real shipment takes. - **Route ribbons.** Connecting the nodes are **dashed iso-routes** — long polylines that follow the isometric axes (you only ever travel along the three iso directions, never freehand). Along these ribbons, tiny token-glyphs (a single crate, a single ship outline) **creep forward continuously**, independent of scroll, so the world always feels alive even when you stop. - **The watch-label.** Information appears in **flat, untilted "clipboard" cards** that hover a few isometric "millimetres" above the plane, casting a hard-edged offset shadow onto the grid (a flat parallelogram of shadow, no blur — this is a model, lit by a single bare bulb). The cards are the *only* non-isometric thing on the page: deliberately flat, screen-aligned, so reading is effortless while the world stays in projection. - **No hero. No footer slab. No CTA band.** The page begins already inside the diorama (the camera is just *there*, hovering over the highlands) and ends by pulling up and away until the whole model fits in frame — a quiet "this is the entire thing" gesture, then black grid edge. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / node labels — *Major Mono Display*.** A monospaced display face with a faint engineering-stencil quality. Used for the large place-names stamped beside each isometric node ("PORT 04", "INLAND YARD", "LAST MILE") — set in caps, wide letter-spacing, as if rubber-stamped onto blueprint card. Its low contrast and uniform stroke make it read like a draughtsman's lettering set. - **Body / clipboard text — *IBM Plex Sans*.** A humanist-but-engineered sans with real warmth in its italics; used for all explanatory prose on the flat clipboard cards. Plex's slightly mechanical bones keep it in the world's "logistics bureau" register while staying genuinely readable at paragraph length. - **Data / coordinates / tickers — *IBM Plex Mono*.** Used for the live token counters, the iso-coordinates printed faintly along grid axes, timestamps, and lane IDs. The Plex Mono / Plex Sans pairing shares a skeleton so the page never feels like two fonts fighting — more like one voice speaking in two registers (prose and instrument). **Palette — "ink on vellum, two signal inks":** - `#F4F1E8` — **Vellum** — the paper substrate, warm off-white, the base of the entire plane. - `#E8E3D3` — **Vellum Shade** — slightly deeper paper tone for the underside facets of isometric blocks. - `#1C2A33` — **Drafting Ink** — near-black blue-grey, every line, every label, every stroke. The world is drawn in this. - `#5C6B6F` — **Graphite** — muted slate for secondary lines, grid lattice, body text on cards. - `#C97A2B` — **Freight Amber** — the one warm signal: used *only* on routes/tokens that are actively moving, and on the single highlighted lane. - `#2E7E84` — **Stall Cyan** — the one cold signal: used *only* where flow has stopped — a backed-up port, a held shipment, a severed link. - `#9B3B2E` — **Alert Rust** — reserved, used at most once on the whole page, for a single genuine break in the chain (a snapped route ribbon). Rule: at any moment, 90%+ of the screen is Vellum + Ink + Graphite. Amber, Cyan, and Rust are *events*, not decoration. ## Imagery and Motifs **Everything is SVG line-art in true isometric projection. No photography. No 3D renders. No gradient meshes. No glass. The "imagery" is a hand-built model kit.** - **The isometric model pieces** — a recurring kit of axonometric line-drawings, all sharing the same 30°/30° projection and the same 1.5px Drafting-Ink stroke: stacked shipping containers (hollow rectangular prisms), a gantry crane (a thin extruded frame), a cargo ship hull (a long faceted wedge), a warehouse (a low slab with a sawtooth roof), a factory (three thin chimneys on a box), a delivery van (a tiny rounded box on the last-mile street), a pallet (a flat slatted rectangle). Each appears multiple times at different scales along the route. - **The iso-grid** — the 2:1 rhombic lattice underlying everything, drawn as faint Graphite hairlines on Vellum. Doubles as a coordinate system: faint Plex Mono numerals creep along its axes near the camera edge. - **Route ribbons** — long dashed polylines following only the three iso directions; the dashes are short, the gaps long, so they read as "this is a path, not a wall." A travelling token-glyph rides each ribbon, leaving a faint amber afterglow trail of three or four dashes behind it. - **The offset shadow** — every floating clipboard card and every isometric block throws a hard, blur-free parallelogram of shadow onto the grid below it, always offset down-and-right by the same isometric vector. This single consistent shadow is what makes the flat plane read as a lit physical model. - **The "watch reticle"** — a thin square bracket (corner-ticks only, like a camera focus reticle) that appears around whatever node the camera is currently centred on, drawn in Drafting Ink, with a tiny Plex Mono coordinate readout in its corner. It's the only "UI chrome" — a quiet acknowledgement that someone is *watching* this model. - **Pulse-at-the-node** — when a node enters the watch reticle, a single thin ring expands once from its base across the grid and fades. Once. Never looping. Restraint is the motif. ## Prompts for Implementation Build supplychain.watch as **a single-route, vertically-scrolled traverse across one continuous isometric diorama** — one HTML file, one CSS file, one JS module. The reader spends roughly 60–80 seconds dollying the camera from the raw-material highlands down to the last-mile street, watching a model supply chain operate beneath them. There is **no CTA, no pricing tier, no stat-grid, no testimonial carousel, no email capture, no contact form**. There is only the model and the act of watching it. **Construction:** - **The iso plane.** One large fixed-projection container. Use CSS `transform` or pre-baked SVG coordinates to place every element in 2:1 dimetric space. The background grid is layered repeating linear-gradients at the two iso angles (≈26.57°) over Vellum — never an image file. The grid is `position: fixed`-feeling: it's the world floor, it doesn't scroll past, the *camera* moves over it. - **Scroll = dolly.** As the user scrolls, translate the iso plane along its diagonal so successive nodes pass through screen-centre. Each node arriving at centre triggers: the watch-reticle snapping to it, its place-name stamping in (Major Mono Display, letter-spacing animating from tight to wide — a "rubber stamp" settle), and its clipboard card sliding up from the plane with its offset shadow growing beneath it. Use spring/easeOut motion, modest amplitude — this is heavy freight, not a trampoline. - **The living tokens.** Independent of scroll, run a `requestAnimationFrame` loop that advances every route-token a constant few pixels per frame along its ribbon's polyline, wrapping at the end. Each token drags a 3–4-dash amber afterglow. This must keep running when the user is idle — the world is never frozen. - **The one stalled lane.** Somewhere in the middle of the traverse, one node's inbound route is rendered in Stall Cyan with its tokens *stopped* (clustered, not moving), and the clipboard card there narrates the stall plainly. Near the end, exactly one route ribbon is drawn snapped/broken in Alert Rust — the single chromatic "event" of the page. Everything else stays ink-on-vellum. - **The pull-away ending.** At the bottom of the scroll, instead of a footer, the iso plane scales down and recentres until the entire diorama — highlands to last mile — sits inside the viewport, the watch-reticle expanding to frame the whole thing, then a final faint Plex Mono line of coordinates fades in along the grid edge. Hold. End. - **Motion discipline.** Reticle ring pulses fire *once* per node, never loop. Cards never tilt-3D toward the cursor. Hover on a node only brightens its outline stroke by one shade and reveals its iso-coordinate — no lift, no glow, no scale. The cursor does not have a custom follower. Restraint is the entire personality. - **Storytelling beats (top to bottom):** (1) Highlands — raw-material origin, a single mineral block, tokens being born. (2) The Factory — three chimneys, pallets assembling, the first route ribbon. (3) The Inland Yard — crate stacks, switchback. (4) The Port — gantry crane, ship hull at dock, the busiest cluster of moving amber tokens. (5) The Ocean Lane — a long quiet ribbon across empty grid, one ship token creeping, the camera moving fastest here. (6) The Stalled Hub — Stall Cyan, tokens halted, the page's still point. (7) The Distribution Yard — recovery, amber resumes, the broken Rust ribbon visible off to one side. (8) The Last Mile — tiny street grid, a delivery van token, then the pull-away. Tell it like a draughtsman narrating a model, never like marketing copy. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Isometric as the entire stage, not an icon style.** Isometric sits at 13% (aesthetic) / 5% (imagery) — and where it appears it's usually a few decorative iso-icons in an otherwise flat layout. Here the *whole page is one continuous axonometric world the camera flies over*; the layout, the scroll mechanic, the shadows, and the narrative are all consequences of the projection. No other corpus site uses iso as the spatial backbone. 2. **Anti-glow, anti-glass, anti-tilt.** Glassmorphism (84%), cursor-follow (89%), tilt-3d (31%), parallax (89%), warm-gradient palette (98%): this design refuses *all* of them. No frosted panels, no custom cursor, no card tilt, no gradient washes — a flat ink-on-vellum drafting board with a hard blur-free offset shadow. It is conspicuously the quiet one. 3. **Colour as event, not decoration.** 90%+ of every frame is three near-neutral inks; Freight Amber, Stall Cyan, and Alert Rust appear *only* to mark a real state change in the chain (moving / stopped / broken). The corpus's near-universal "warm gradient everything" is inverted into rationed signal colour. 4. **Scroll-as-dolly along the subject itself.** Instead of scrolling through stacked sections, you physically traverse the supply chain — highlands to last mile — with a fixed iso camera. The structure *is* the subject. 5. **The watch-reticle motif.** A camera-focus bracket that tracks the centred node, the only UI chrome, quietly literalising the domain word "watch" — surveillance of a model world rather than a marketing dashboard. Chosen seed/style: **isometric technical docs** *(aesthetic: isometric, layout: immersive-scroll, typography: tech-mono, palette: monochrome, patterns: scroll-triggered, imagery: isometric-icons, motifs: grid-lines, tone: calm-serene)*. Avoided patterns from frequency analysis: glassmorphism (84%), hand-drawn (94%), cursor-follow (89%), parallax (89%), tilt-3d (31%), warm palette (98%), gradient palette (93%), photography (98%), card-grid (92%), magnetic (78%), spring-as-default-bounce.