# Design Language for supplychain.wiki ## Aesthetics and Tone The visual identity of supplychain.wiki draws from the command bridges of fictional interstellar freight haulers -- the kind of vessel that moves raw materials between asteroid mining platforms and orbital refineries. Think the cargo manifests of the Nostromo, the industrial pragmatism of Cowboy Bebop's Bebop, the functional grime of Blade Runner's logistics terminals. This is sci-fi not as aspirational future-sheen, but as the working infrastructure of tomorrow's commerce -- utilitarian, information-dense, and quietly beautiful in its engineered precision. The tone is **professional** in the truest sense: this is the voice of someone who has moved ten thousand containers through deep-space corridors and knows exactly what documentation matters. No hype. No breathless futurism. Instead, a steady, competent authority that treats supply chain complexity with the respect it deserves. The site communicates: "We understand the system because we built the system." The atmospheric quality leans heavily on **candle-atmospheric** warmth cutting through cold digital interfaces -- like the amber glow of a status lamp on a bridge console at 0300 hours, or the warm light leaking from a cargo bay inspection hatch into a frost-covered corridor. This tension between cold-blue infrastructure and warm-amber human presence is the emotional core of the design. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture that mirrors the lateral flow of goods across a supply chain. The page is not a vertical document to be read top-to-bottom; it is a **lateral timeline**, a conveyor belt of information that the user traverses left-to-right like tracing a shipment across a routing map. **Horizontal Spine:** The primary content axis runs horizontally. The viewport is divided into discrete "stations" -- each station occupying 100vw (or occasionally 150vw for expanded data panels). The user scrolls vertically with the mousewheel or trackpad, but the page translates horizontally, creating the sensation of traveling along a supply chain route. CSS `scroll-snap-type: x mandatory` ensures each station locks into view. **Station Architecture:** Each station is internally structured as a vertical stack, but the stack is offset and staggered: - **Primary content block:** Positioned at 15% from the left edge, spanning 55% of the station width. This creates a persistent left-margin gutter (the "rail") that runs the full length of the horizontal scroll, containing a thin progress indicator line -- like a fiber-optic data conduit running the length of a cargo ship's spine. - **Secondary annotation layer:** Floating elements positioned in the remaining right-side space, at varying vertical positions. These are data callouts, schematic fragments, and ambient detail -- never essential for comprehension but enriching for those who pause. - **Connector lines:** Between stations, thin SVG lines (1px, color #2A4A6B) extend horizontally, visually linking one station to the next like routing paths on a logistics diagram. **Depth Layering:** Three visual planes: 1. **Background plane (z-0):** A slowly drifting star-field or abstract particle grid rendered in extremely low opacity (#0D1B2A at 95% opacity with sparse #1B3A5A dots). This never distracts but provides subliminal depth. 2. **Content plane (z-1):** Where all readable text and primary imagery live. Slightly elevated with a subtle `box-shadow: 0 0 80px rgba(10, 25, 47, 0.6)` suggesting the glow of a screen in a dark environment. 3. **HUD overlay plane (z-2):** Sparse, non-interactive decorative elements -- thin corner brackets around sections (like a targeting reticle), small coordinate-style labels (e.g., "SEC.03 // LOGISTICS"), and the persistent progress rail. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) at weights 500-700. This grotesque-neo typeface has the mechanical precision of industrial signage with just enough geometric warmth to avoid feeling robotic. Used at 2.8rem-5.5rem for station titles. Letter-spacing: -0.03em at display sizes for density, 0em at body sizes. All headlines set in uppercase with `font-feature-settings: "ss01"` enabled for alternate glyphs where available. The uppercase treatment is deliberate -- it evokes stenciled crate markings, manifest headers, regulatory signage. - **Body / Reading:** "IBM Plex Sans" (Google Fonts) at weight 300-400, sizes 1rem-1.15rem, line-height 1.72. IBM Plex Sans carries the legacy of industrial information design -- it was literally designed for a technology corporation that built supply chain infrastructure. Its humanist proportions at light weights create comfortable reading while maintaining the technical credibility of the overall system. Color: #B8C6D4 on dark backgrounds, #1A2A3A on rare light panels. - **Data / Labels / Annotations:** "Space Mono" (Google Fonts) at weight 400, sizes 0.7rem-0.85rem, letter-spacing: 0.08em, uppercase. Used for all coordinate labels, progress indicators, section codes, timestamps, and ambient data. Color: #4A6A8A -- deliberately muted to sit behind primary content. This monospace face pairs naturally with Space Grotesk (same family philosophy) and reinforces the terminal-adjacent aesthetic without fully committing to a terminal design. **Palette:** The palette is **ethereal-blue** -- a range of deep ocean and twilight sky blues that create a sense of vast, cold, operational space punctuated by warm amber signal lights. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Background | Midnight Void | #0A1628 | Primary background, the darkness of space | | Mid Background | Nebula Blue | #0D1B2A | Station backgrounds, panel fills | | Surface | Steel Twilight | #1B2D44 | Card surfaces, content panels, elevated elements | | Border / Lines | Conduit Blue | #2A4A6B | All structural lines, connector paths, dividers | | Body Text | Frost Silver | #B8C6D4 | Primary body text color | | Heading Text | Ice White | #E2EAF2 | Headlines, station titles, emphasis text | | Accent Primary | Signal Amber | #D4943A | Warm accent -- status lights, active indicators, hover states, the candle-glow | | Accent Secondary | Alert Copper | #C47832 | Secondary warm accent -- visited states, deeper interactions | | Accent Tertiary | Beacon Gold | #F0C060 | Sparingly used for critical highlights -- like a warning lamp | | Muted Annotation | Twilight Gray | #4A6A8A | Data labels, coordinates, ambient text | | Highlight Glow | Ethereal Cyan | #5AB4D6 | Underline draws, active link color, special emphasis | ## Imagery and Motifs **Hand-Drawn Schematics as Primary Imagery:** The imagery style is **hand-drawn** -- but not whimsical or sketchy. These are hand-drawn in the way that an engineer draws on a whiteboard during a 2AM incident response: precise in intent, slightly imperfect in execution, deeply informative. All visual diagrams, flow charts, and illustrative elements are rendered as SVG paths with deliberate hand-tremor applied via JavaScript noise functions (Perlin noise at low amplitude, ~1.5px deviation on control points). Specific imagery elements: 1. **Supply chain flow diagrams:** Hand-drawn node-and-edge graphs showing material flow from source to destination. Nodes are imperfect circles (SVG ellipses with slight randomized radii). Edges are curved paths with hand-tremor. Labels in Space Mono. The overall effect: a logistics planner sketching routes on a frosted viewport with their finger. 2. **Cargo manifest fragments:** Decorative panels that resemble partially-visible shipping documents -- columns of item codes, quantities, origin/destination pairs, rendered in Space Mono at 0.65rem with selective redaction (some lines replaced with `████████` blocks in #1B2D44). These are ambient texture, not functional data. 3. **Schematic cross-sections:** Hand-drawn cutaway views of abstract containers, vessels, or infrastructure -- a warehouse shown in cross-section, a container ship's hold, a network topology diagram. Rendered as SVG with a 1.5px stroke in #2A4A6B and #D4943A for highlighted subsystems. 4. **Atmospheric candle-glow particles:** Tiny amber dots (#D4943A at 15-40% opacity) that drift slowly across stations, concentrated near headings and interactive elements. They simulate the floating dust motes visible in the beam of a cargo bay inspection light. Implemented with a lightweight canvas particle system (max 30 particles per station, 0.3px-1.5px radius, drift velocity 0.1-0.4px/frame). **Motif: Candle-Atmospheric Warmth:** The candle-atmospheric motif manifests as: - Subtle radial gradients behind headings: `radial-gradient(ellipse at 50% 50%, rgba(212, 148, 58, 0.08) 0%, transparent 70%)` -- as if each heading has a warm lamp behind it. - Amber glow on hover states: interactive elements gain a `box-shadow: 0 0 20px rgba(212, 148, 58, 0.15)` on interaction. - The progress rail in the left gutter pulses with a slow amber breathe animation (opacity oscillating between 0.3 and 0.7 over 4 seconds), like a status LED confirming the system is alive. ## Prompts for Implementation **Full-Screen Horizontal Narrative Experience:** The site opens to a full-viewport station -- no navigation bar, no header, no footer. The first station is nearly empty: the domain name "supplychain.wiki" set in Space Grotesk at 4.5rem, uppercase, color #E2EAF2, positioned at 15% from left, 40% from top. Below it, a single line in IBM Plex Sans Light at 1.1rem, color #4A6A8A: a tagline. The background is #0A1628. In the lower-right quadrant, a hand-drawn supply chain diagram fades in with a 2-second delay -- nodes appearing one by one (stagger: 300ms each), edges drawing themselves along their paths (SVG stroke-dasharray animation over 800ms per edge). Amber particles begin drifting after 3 seconds. A thin horizontal line at the bottom of the viewport, color #2A4A6B, extends from left to right over 1.5 seconds, indicating "scroll to continue" without text. **Underline-Draw Animation Pattern:** The primary interaction pattern is **underline-draw**. When any heading or interactive text element enters the viewport (via IntersectionObserver), a line draws itself beneath the text from left to right. Implementation: a pseudo-element `::after` with `background: #5AB4D6`, height 2px, positioned at the baseline. On trigger, `scaleX` transitions from 0 to 1 with `transform-origin: left`, duration 600ms, easing `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. For headings, the underline color is #D4943A (amber). For body links, the underline is #5AB4D6 (cyan). The underline remains after drawing -- it does not retract. **Station Transitions:** As the user scrolls between stations, the transition is a smooth horizontal slide (CSS `scroll-behavior: smooth` combined with `scroll-snap-type: x mandatory`). During transition, the connector lines between stations briefly brighten (opacity from 0.3 to 0.8 and back over 400ms), and the ambient particles increase velocity momentarily (1.5x for 300ms), simulating the "passing through" of a corridor between cargo holds. **Responsive Adaptation:** On viewports below 768px, the horizontal scroll converts to vertical scroll with stations stacking. The progress rail moves from left gutter to top edge. Connector lines become vertical. The visual language remains identical; only the axis changes. **AVOID:** CTA-heavy layouts (no "Get Started" buttons dominating viewport space), pricing blocks (this is a wiki, not a SaaS product), stat-grids (no "10,000+ Users" counters), centered symmetric layouts, generic hero images, stock photography of any kind. **Bias toward:** Full-screen narrative immersion, information-rich ambient detail, engineering-diagram aesthetics, the feeling of navigating a system rather than reading a brochure. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal-scroll as supply chain metaphor:** At only 1% frequency in the portfolio, horizontal-scroll is nearly unused. Here it is not a gimmick but a direct spatial metaphor -- the user literally traverses a supply chain by scrolling laterally through stations. The mousewheel-to-horizontal translation creates a novel navigation feel that directly embodies the domain's subject matter. No other design uses layout structure as domain-specific metaphor in this way. 2. **Hand-drawn engineering schematics (not whimsical sketches):** The hand-drawn imagery category sits at 21% frequency, but it is almost always deployed for whimsical, playful, or artistic purposes. supplychain.wiki uses hand-drawn aesthetics for technical diagrams -- flow charts, cross-sections, network topologies -- creating a visual language that feels like an engineer's whiteboard rather than an illustrator's sketchbook. The combination of hand-drawn + sci-fi + professional tone is unprecedented in the portfolio. 3. **Candle-atmospheric warmth in a cold-blue interface:** The candle-atmospheric motif (1% frequency) is deployed here as a humanizing counterpoint to the sci-fi industrial palette. Rather than a full warm palette, the amber glow appears only in strategic moments -- status indicators, hover states, heading halos, drifting particles -- creating the emotional sensation of a human operator's warm presence within a vast cold system. This warm-in-cold tension is unique; most designs commit fully to either warm or cold palettes. 4. **Grotesque-neo typography for industrial signage:** At 4% frequency, grotesque-neo is rarely used. Space Grotesk in uppercase with tight letter-spacing transforms headlines into stenciled cargo markings, reinforcing the supply chain industrial narrative. The pairing with IBM Plex Sans (designed for actual industrial technology contexts) creates a typographic system with genuine provenance rather than aesthetic borrowing. 5. **Ambient data texture as decorative element:** The cargo manifest fragments -- columns of fake shipping codes with selective redaction -- create a visual texture that is unique in the portfolio. They serve no informational purpose but establish atmosphere, like the background radio chatter in a well-designed sci-fi film. This "data as decoration" approach appears nowhere else. **Chosen seed/style:** aesthetic: sci-fi, layout: horizontal-scroll, typography: grotesque-neo, palette: ethereal-blue, patterns: underline-draw, imagery: hand-drawn, motifs: candle-atmospheric, tone: professional **Avoided overused patterns:** Rejected centered layout (99% frequency), scroll-triggered as primary pattern (97%), warm palette (100%), mono typography (99%), friendly tone (99%), minimal imagery (95%), playful aesthetic (95%), vintage motifs (88%). Every seed dimension targets underused vocabulary to maximize portfolio diversity.