# Design Language for supplychain.watch ## Aesthetics and Tone **supplychain.watch is a living cargo manifest — a watcher's chronicle of the global supply chain told as a vertical time-travel voyage aboard a quietly luminous freight vessel threading between ports, storms, and silent seas.** The aesthetic is Y2K-futurism executed through the lens of a late-1990s Japanese tech magazine: chrome-edged containers stacked in impossible clarity, logotype rendered in the cold iridescent silver of a CD-ROM held under fluorescent light, and typography that whispers "a human made this to understand machines" rather than "a machine made this to perform for humans." The tone is **approachable-casual** — not a war-room dashboard, not a B2B SaaS pitch deck, not a "disrupting logistics" venture slide. This is a quiet observer's notebook: someone who finds supply chains genuinely fascinating and wants to share what they see. The page breathes slowly. It does not beg for attention. Visitors who stay find themselves scrolling because the next event in the timeline is one beat away, not because an infinite-load spinner is forcing them. Mood references: the quiet hum of a container ship's bridge at 3am. The glow of a radar screen on a foggy night. A FedEx tracking page redesigned by someone who grew up on Evangelion title cards and Winamp skins. The warm-cold paradox of a thermos of tea held in both hands while watching cranes load containers in the dark. The Y2K-futurism manifests in: - Iridescent, chromatic-aberration-tinged surfaces that look like pressed metal foil - UI chrome: beveled edges, subtle emboss highlights, translucent panels with frosted noise - Color palette that avoids the typical Y2K neon-electric excess — instead, **cool complementary contrast**: a deep blue-violet ground against warm amber-gold highlights, with chrome silver as the neutral bridge - Text that feels machine-printed but deliberately set by a careful human hand ## Layout Motifs and Structure **The backbone is a single continuous vertical timeline — a cargo event log scrolled from present downward into historical records, as if the visitor is reading a ship's manifest from the bridge.** Timeline-vertical (4% in corpus) is used not as a mere date-stamp list but as the page's skeletal metaphor: every section IS an event, every transition IS a port-of-call. **Macro structure (top to bottom):** 1. **BRIDGE HEADER — the watch station.** Full-viewport opening: the domain wordmark `supplychain.watch` in cold chrome Cormorant Display at 7vw, set on a field of deep blue-violet (#0D0E2A). Below it, a single line of subtext in IM Fell English at 1.1rem — the kind of italicized annotation a ship's officer would write. A faint SVG radar-sweep animation pulses at 0.25Hz in the background, drawn in chromatic gold (#C8A96E at 12% opacity). No nav bar. No hamburger. No CTAs. 2. **TIMELINE SPINE — the event rail.** A 3px vertical line runs left-of-center (at 38% viewport width), colored with a CSS linear-gradient that shifts from chrome-silver (#B8C5D6) at top to muted amber (#7A6040) at bottom, representing temporal depth. Timeline nodes are hexagonal, 18px diameter, filled with the event's category color. The space to the right of the spine holds event cards; the left side holds sparse date/time stamps in DM Mono at 0.75rem. 3. **EVENT CARDS — the cargo entries.** Each card is a slightly-beveled frosted panel: `background: rgba(13,14,42,0.72)`, `backdrop-filter: blur(12px) saturate(1.4)`, `border: 1px solid rgba(184,197,214,0.22)`, `border-radius: 4px`. The bevel is simulated via `box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.3)`. Cards have a morph-enter animation: they begin as a horizontal `scaleX(0.82)` oval and bloom to their full rectangular shape as the viewport intersection observer fires. This is the **morph pattern** executed through CSS `clip-path` + `border-radius` transitions. 4. **PORT INTERLUDES — full-bleed atmospheric breaks.** Every 4–5 timeline events, a full-viewport-width horizontal band interrupts the scroll with a custom illustration: a silhouette of a port city at blue-hour, rendered in the complementary palette (indigo-violet foreground, warm amber horizon glow, chrome silver water reflections). These illustrations are flat SVG artwork — not photographs, not 3D renders — drawn in a style that evokes 1990s Japanese concept art: simplified planes, long shadows, deliberate negative space. 5. **SIGNAL FOOTER — the anchor log.** Fixed at document bottom (but only revealed when the user reaches it — not sticky): `SIGNAL STRONG · LAST UPDATE [timestamp]` in DM Mono caps. A single pulsing dot in amber (#C8A96E) to indicate live status. **Spatial rules:** - Left margin: 6vw on desktop, 5vw on mobile - Timeline spine: positioned at 38vw from left edge on desktop, 28px from left on mobile (left-aligned) - Event card width: from 42vw to calc(100vw - 8vw) on mobile - Maximum content width: 1200px, centered within viewport - No two consecutive cards share the same entry-direction (odd cards morph from left, even from right, creating a subtle oscillation) ## Typography and Palette **Typography — elegant-serif anchored, with a cold-tech mono accent (2% in corpus, rare and distinctive here).** **Primary Display — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)**, weights 300 and 600, italic variants. Used for: the hero wordmark, port interlude headings, section titles. At large sizes, Cormorant's extreme contrast between thick and thin strokes creates a tension that reads as both antique and cybernetic — the serif equivalent of a chrome surface. Set the wordmark in weight 300 italic at 7vw, letter-spacing -0.03em. **Secondary Body — [IM Fell English](https://fonts.google.com/specimen/IM+Fell+English)**, regular and italic. Used for: event card summaries, body paragraphs, the "observer's note" sections below each Port Interlude. IM Fell English carries the texture of a printed document — irregular baselines, authentic humanist counters — while remaining legible at 16px. It reinforces the ship's-log narrative register. **Utility / Mono — [DM Mono](https://fonts.google.com/specimen/DM+Mono)**, weights 300 and 500. Used for: timestamps, hex coordinates, cargo codes, status tags, the footer signal line. DM Mono reads as clean tech without the sterile coldness of IBM Plex or Courier variants. At 0.75rem with letter-spacing 0.08em and text-transform uppercase, timestamps feel like genuine system output. **Palette — Complementary (blue-violet ↔ amber-gold), chrome-bridged:** | Role | Name | Hex | |------|------|-----| | Ground (deepest) | Midnight Indigo | `#0D0E2A` | | Ground (mid) | Blue-Violet Field | `#161833` | | Ground (surface) | Vessel Panel | `#1E2045` | | Spine / chrome neutral | Chrome Silver | `#B8C5D6` | | Highlight | Pale Frost | `#DDE6F0` | | Accent warm (primary) | Amber Cargo | `#C8A96E` | | Accent warm (glow) | Sunset Hold | `#E8C17A` | | Accent cool (tag) | Signal Cyan | `#7EC8E3` | | Text primary | Off-white Vellum | `#EDF0F4` | | Text secondary | Slate Ghost | `#8B94A8` | The complementary tension is between the blue-violet ground family and the amber-gold accent family. The Chrome Silver (#B8C5D6) acts as the bridge — it is neither warm nor cold, reads as metallic, and allows Y2K-futurist surface effects without neon. ## Imagery and Motifs **All imagery is custom SVG illustration — no photographs, no stock art, no AI-generated images.** **1. Port City Silhouettes (5 total — one per Port Interlude).** Each illustration is a full-viewport-width SVG scene depicting a specific historical or fictional port: a Japanese container port at dusk, a Rotterdam terminal in rain, a Singapore transshipment hub at night, a Los Angeles port at dawn haze, and a final abstract "Port of Data" with no geography. The style is deliberate flat silhouette illustration: 3–4 depth planes, each plane a single shape filled with a progressively warmer hue stepping from `#1E2045` (near) through `#2E3A6E` (mid) to `#7A6040` (horizon-glow). The water plane always carries a horizontal chrome-silver `#B8C5D6` reflection band. SVGs are inlined and animated: the foreground cranes and gantries perform a slow breathing parallax on scroll (translateY capped at ±18px). **2. Hexagonal Node Icons (8 category icons).** Each timeline category (Shipping, Port, Customs, Weather, Geopolitical, Manufacturing, Distribution, Alert) has a unique 40×40px SVG icon inscribed inside a 1.5px hexagon border. Icons are outline-only in Chrome Silver, with a single detail line in Amber Cargo for the primary glyph element. The hexagon geometry echoes the timeline node shapes, creating visual coherence across scale. **3. Morph Transition Overlays.** When a Port Interlude enters the viewport, the panel background morphs from an irregular `clip-path: ellipse(60% 40% at 50% 50%)` to `clip-path: inset(0% 0% 0% 0% round 0px)` over 900ms with a custom cubic-bezier(0.16, 1.2, 0.36, 1.0). This is the primary implementation of the **morph** pattern — it makes each illustration feel like it is pressing through the surface of the page rather than loading. **4. Radar Sweep Background (hero only).** A single SVG arc path rotates at 0.25Hz in the hero section. The arc is drawn with `stroke: #C8A96E`, `stroke-width: 1.5`, `opacity: 0.14`, and a radial gradient fade from center. A faint "ping" circle expands outward from the current sweep position, `border-radius: 50%`, fading from `rgba(200,169,110,0.18)` to transparent over 4 seconds. **5. Iridescent Edge Highlights (Y2K surface effect).** Key UI surfaces (event card top edges, the wordmark container, Port Interlude bottom edges) carry a 1px or 2px CSS gradient line simulating chromatic-aberration foil: `linear-gradient(90deg, #7EC8E3 0%, #B8C5D6 30%, #C8A96E 60%, #7EC8E3 100%)`. This is the primary Y2K-futurism surface signature and is used sparingly — maximum 6 instances per full-page scroll — to preserve its impact. **Motifs summary:** - Hexagonal geometry (nodes, icons, accent borders) - Radar sweep arc (hero background only) - Iridescent foil edges (Y2K chrome signature) - Port silhouette illustrations with parallax breathing - Morph bloom reveals on scroll entry ## Prompts for Implementation **The story to tell:** A visitor opens supplychain.watch and enters the bridge of a watching station. The page is dark and quiet. The wordmark glows in cold chrome serif. A radar sweeps softly behind it. The visitor begins scrolling — and the world's supply chain unfolds as a vertical timeline of events: a port delay in Rotterdam, a typhoon rerouting cargo from Shanghai, a customs hold in Los Angeles, a record throughput at Singapore. Each event arrives with a morph bloom. Every few events, the scroll pauses at a full-bleed port silhouette — the ship's current position in the chronology. The visitor never feels sold to. They feel like a calm observer watching something real from a safe, beautiful distance. **Implementation architecture:** **Section 1 — BRIDGE (hero):** Full viewport height `min-height: 100svh`. Background `#0D0E2A`. Centered wordmark in Cormorant Garamond 300 italic 7vw. Below it, a single IM Fell English italic line: *"watching the movement of goods across the world"* at 1.1rem in `#8B94A8`. The radar SVG is absolutely positioned, centered, `pointer-events: none`, z-index 0. The wordmark sits at z-index 1. No scroll indicator. The section's bottom edge has a 120px feather gradient to `#161833`. On load, the wordmark performs a single entrance: `opacity 0→1` over 1200ms, `letterSpacing -0.1em→-0.03em` over 1400ms, both with ease-out. **Section 2 — TIMELINE (main body):** Background `#161833`. The 3px spine line is rendered as a `::before` pseudo-element on the timeline container, positioned absolutely. Timeline nodes enter via `scale(0)→scale(1)` over 300ms as their IntersectionObserver fires at 60% threshold. Event cards perform the morph bloom (described above). Odd cards: `transform-origin: left center`. Even cards: `transform-origin: right center`. Category tags on each card use DM Mono 0.7rem uppercase in Signal Cyan `#7EC8E3` on `rgba(126,200,227,0.1)` background, border `1px solid rgba(126,200,227,0.25)`. **Section 3 — PORT INTERLUDES (5 atmospheric breaks):** Each interlude is `height: 100svh` on first viewport entry, but collapses to `height: 38vw` after the morph animation completes. The morph from elliptical to full-rect takes 900ms. The port city SVG lives inside the morphing container. Parallax on the SVG depth planes: foreground translateY at `scrollProgress * -18px`, midground at `scrollProgress * -9px`, background at `scrollProgress * -4px`. **Section 4 — SIGNAL FOOTER:** Background `#0D0E2A`. A single line: `SIGNAL STRONG · LAST UPDATE 2026-05-11` in DM Mono 500 0.8rem uppercase `#8B94A8`, letter-spacing 0.1em. The amber pulse dot: a 10px circle in `#C8A96E`, animation `pulse 2s ease-in-out infinite` (opacity 1.0 → 0.3 → 1.0). **Avoid in all circumstances:** - Sticky navigation bars - "Get started" / "Learn more" / "Sign up" CTAs - Pricing blocks, feature comparison tables, stat counters ("10,000 containers tracked") - Progress bars showing percentage metrics - Hamburger menus - Modal overlays - Newsletter popups - Team grid sections - Testimonial carousels **Animation budget:** All animations respect `prefers-reduced-motion`. When reduced motion is detected: morph animations are replaced by simple `opacity 0→1` fades. Parallax stops. Radar sweep stops. Amber pulse continues at 3s interval. ## Uniqueness Notes 1. **Y2K-futurism at 1% — and executed as quiet chrome elegance, not neon maximalism.** The corpus has virtually no Y2K-futurism (1% mentions), and when it appears it defaults to hot pinks and electric blues. supplychain.watch inverts the expected palette: the Y2K aesthetic is delivered through cold iridescent chrome, deep blue-violet grounds, and amber-gold accents — the same color temperature you'd find in a Winamp skin designed for night use. The result is Y2K-futurism as an *atmosphere* rather than a costume. 2. **Elegant-serif (2% in corpus) paired with a cold-tech mono — an unusual cross-register combination.** The standard usage of elegant-serif in the corpus pairs it with humanist sans-serifs for contrast. Here, Cormorant Garamond and IM Fell English are paired with DM Mono — cold precision against warm antiquity — creating a typographic tension that mirrors the domain itself: ancient logistics practice observed through digital instruments. 3. **Morph reveals as spatial metaphor, not decorative flair.** The morph pattern (8% corpus but mostly used as button-hover effects or loader transitions) is used here as the primary viewport-entry reveal for both event cards and Port Interludes. The morphological reading is literal: things press through the surface of the page the way cargo presses through a port gate. No bounce, no slide — just a bloom from compressed oval to open rectangle. 4. **Timeline-vertical as narrative chronology, not UI component.** The corpus's 4% of timeline-vertical layouts treat the timeline as a UI feature (a resume, a changelog list). supplychain.watch treats the timeline as the page's entire spine — it IS the page. Scrolling is reading the manifest. The Port Interludes are chapter breaks in a long-form document. The experience is closer to reading a piece of longform journalism than navigating a web application. 5. **Custom SVG illustration with no photographic content whatsoever.** The corpus uses custom-illustration at 2%, and typically mixed with photography. supplychain.watch is illustration-only, and the illustration style (flat silhouette port scenes, 3-4 depth planes, hexagonal icon system) is drawn from a consistent visual grammar that would survive extraction into a brand system — not incidental decoration but load-bearing narrative infrastructure. **Chosen seed:** aesthetic: y2k-futurism, layout: timeline-vertical, typography: elegant-serif, palette: complementary, patterns: morph, imagery: custom-illustration, motifs: futuristic, tone: approachable-casual **Avoided patterns (per frequency analysis):** - warm (88% — dominant, avoided entirely by choosing cold blue-violet ground) - gradient (76% — used minimally; only in timeline spine depth gradient and footer feather, never as decorative fills) - dashboard (18% — explicitly rejected; this is a chronicle, not a monitoring interface) - glassmorphism (20% — the frosted panel effect on event cards is restrained and structural, not decorative glassmorphism) - single-column (20% — the timeline split with left-side timestamps and right-side cards creates a genuine two-column asymmetric structure)