# Design Language for supplychain.observer ## Aesthetics and Tone supplychain.observer is **a chart room aboard a stationary observation vessel** — the kind of teak-panelled, brass-fitted cabin where, a century ago, a navigator would have unrolled a great linen sea-chart across a slanted table and traced the routes of cargo by lamplight. The site reframes the modern supply chain not as a dashboard of red and green KPIs, but as **an antique cartographic instrument that happens to be alive**: shipping lanes drawn in fine engraver's line, ports marked with compass-rose flowers, and the slow westward drift of freight rendered as the procession of a tide. The tone is **scholarly-intellectual** — patient, lettered, faintly nautical. Copy reads like the marginalia of a careful hydrographer: "Observed: a coffee shipment, departing Santos, making 11 knots against the current." Nothing shouts. Nothing converts. The visitor is a guest in the chart room, invited to lean over the table and watch the lanes breathe. Visually it lives in the register of **aged admiralty charts**: ivory paper gone the colour of weak tea, ink the deep blue-black of iron-gall, and the cold pewter shine of dividers, parallel rules, and a sextant's arc catching the lamp. There is grain — the tooth of pressed linen paper — but it is restrained, never a "grunge texture." Every line on screen could have been scribed with a ruling pen. This is deliberately **not** the terminal-green or sci-fi-HUD treatment that supply-chain sites default to. There are no monospace counters ticking, no neon, no circuit traces. The future here is studied through a brass eyepiece, not a screen. ## Layout Motifs and Structure The page is a **horizontal-scroll voyage** — the visitor scrolls *eastward to westward across an ocean*, the way freight actually moves, and the chart unrolls beneath them like a scroll being drawn off its spindle. Vertical scrolling is disabled; the wheel and trackpad translate the chart laterally. This claims the 8% horizontal-scroll territory and bends it to a literal cartographic purpose: the x-axis *is* longitude. Structure as **six panels of one continuous chart**, each a "leaf" of the unrolled linen, divided not by hard section breaks but by the faint creases where the original chart was once folded: - **Leaf I — The Cartouche.** The title panel: an ornamental engraved frame (the "cartouche" of an old map) containing the wordmark *supplychain.observer*, a single-sentence dedication, and a compass rose whose needle slowly swings to settle on west. A scroll-hint: a tiny engraved hand pointing leftward, the word "WESTWARD" beneath it. - **Leaf II — The Lanes.** The main chart body: a stylised ocean with three or four great-circle shipping routes drawn as hairline rhumb lines, each annotated in italic script ("Trans-Pacific", "Suez–Rotterdam", "Cape Route"). Small ship glyphs travel these lines in real, slow motion. - **Leaf III — The Soundings.** A "depth" panel where the chart's white space fills with stippled sounding-marks — the engraver's dotted shading — that resolve, on approach, into a field of annotations: lead-times, transhipment notes, dwell-times, each set beside a number written as a navigator would (depths in fathoms, here re-purposed as days). - **Leaf IV — The Wind Rose.** A large rotating compass rose / wind-rose, its 32 points labelled, around which orbit small cards describing what the observer watches for: congestion, weather, embargo, demand swell. The cards drift like the rose's spokes. - **Leaf V — The Logbook.** A facsimile of an open ship's log — two ruled pages — onto which lines of observation are written by an unseen pen (path-draw-svg handwriting), timestamped in the old "bells" convention. - **Leaf VI — The Colophon.** The chart's lower-right corner: the engraver's signature block, the scale bar, the projection note ("drawn on a Mercator projection, 2026"), and a closing line. The chart rolls back onto its spindle as you reach the western edge. A persistent thin **brass rule** runs along the top edge of every leaf — the "parallel rule" — and a small bead slides along it tracking horizontal progress, like a position fix being walked across the chart. Whitespace is treated as **open ocean**: vast, pale, intentional. Land masses (continents, coastlines) appear only as faint engraved outlines at the panel edges, never filled, never the focus — the ocean and its lanes are the subject. ## Typography and Palette **Fonts — all Google Fonts. A hydrographer's three hands: the engraved title face, the running text face, and the navigator's italic script.** - **Display / Cartouche — *Cormorant Garamond* (weights 500, 600; also its *Italic*).** Used for the wordmark, leaf titles, and the cartouche text. Cormorant Garamond has the high-contrast, slightly attenuated cut of an 18th-century engraver's letter — it looks scribed, not typeset. Set large (clamp 2.4rem–5rem), letter-spacing slightly open, often in small-caps for the leaf names ("LEAF II · THE LANES"). - **Body / Running Text — *EB Garamond* (weight 400, 500; with *Italic*).** The workhorse for all paragraph copy and annotations. A faithful Garamond revival — warm, readable, unmistakably *of the book*. Annotations on the chart use its italic. Line length kept generous; this is meant to be read like a passage from a sailing directory. - **Marginalia / Numerals / Scale — *IM Fell English* (weight 400, plus *Italic*).** A digitisation of a 17th-century English typefoundry face, complete with ink-bleed irregularities. Used *sparingly* for the logbook entries, the scale-bar numerals, "bells" timestamps, and the colophon — anything meant to feel hand-pressed. Never for long text. **Palette — aged linen, iron-gall ink, and the pewter of brass instruments. (Documents the underused `navy-metallic` palette.)** - `#F4ECD8` — *Linen Chart* — the paper ground. A warm aged ivory, the base of every leaf. - `#E7D9BC` — *Tea Stain* — slightly darker paper, used for fold-creases, the cartouche fill, and worn edges. - `#1B2A4A` — *Iron-Gall Ink* — the deep blue-black of all primary line work, type, and coastlines. The "black" of this design is never true black. - `#2E4A6E` — *Admiralty Blue* — the ocean fill at its faintest, and the colour of secondary rhumb lines. - `#7C8B9C` — *Pewter* — the cold metallic grey of dividers, the parallel rule, the sextant arc; used for fine instrument linework and the progress bead. - `#B98C46` — *Tarnished Brass* — the warm accent: the top rule, the compass needle, the engraved hand, hover states. Used like gilding — a thin glint, never a fill. - `#9A3B2E` — *Sealing-Wax Red* — reserved entirely for the smallest emphasis: a single port marked "watched", a correction in the logbook, the dot on the compass rose's settled bearing. Texture: a subtle SVG/CSS paper-grain (low-opacity fibrous noise) over the linen ground; a faint vignette toward each leaf's edges as if lamplight falls off; hairline fold-creases at the leaf joins. ## Imagery and Motifs **Everything is line-engraving. No photography, no 3D renders, no stock art, no flat-design icons. Every mark is SVG, drawn as if with a ruling pen and a graver.** - **Rhumb lines & great circles** — the shipping lanes: continuous hairlines (0.75px–1.25px), some dashed, sweeping in shallow arcs across the ocean leaves, annotated in EB Garamond italic. - **Compass roses / wind roses** — the recurring star of the design: 8-, 16-, and 32-point roses, drawn in pewter line with a brass needle, one large rotating one on Leaf IV and small static ones marking each major port. Rendered with the classic fleur-de-lis north point. - **Stippled soundings** — fields of tiny engraver's dots that stand in for shaded sea-floor depth; on Leaf III they animate into clusters that "label" themselves with lead-time figures. - **Ship glyphs** — minute side-profile engravings of a barque / a container vessel reduced to a few strokes, travelling the lanes at honest, sleepy speed (a real container ship crosses the Pacific in ~12 days; the glyph should feel that patient). - **Cartouche frame** — an ornamental engraved border (scrollwork, a ribbon, a small anchor or sextant motif) around Leaf I's title, in iron-gall line with brass highlights. - **The instruments** — a pair of brass dividers, a parallel rule, a sextant's arc: drawn in pewter, they appear as decorative furniture at the edges of leaves and as cursors/markers (the dividers "step" along a lane when you hover it). - **Coastlines** — faint, unfilled engraved continental outlines at the far margins of the ocean leaves; never coloured-in, never interactive — just the edges of the known world. - **Wave hatching** — the conventional cartographic shorthand for open water: short repeated horizontal dashes, used very sparingly near coastlines to say "this is sea." (Documents the underused `wave-forms` motif as engraver's hatching, not as audio waveforms.) - **The ship's log pages** — ruled blue feint lines on tea-stained paper, a red margin rule, a worn gutter shadow down the centre fold. ## Prompts for Implementation Build supplychain.observer as **a single horizontally-scrolled chart room** — one HTML file, one CSS file, one JS module. The whole experience is a ~70-second eastward-to-westward voyage across an unrolling admiralty chart. There is **no CTA, no pricing block, no stat-grid, no testimonial row, no contact form, no email capture, no feature cards**. There is the chart, the lanes, the instruments, and the observer's quiet annotations. **Scroll model.** Translate vertical wheel / trackpad delta into horizontal motion of a long `.chart` track (six leaves laid side by side, each ~100vw, total ~600vw). Use a momentum/easing layer so the chart glides like paper being drawn off a spindle — slightly heavy, never snappy. A thin brass rule pinned to the top of the viewport carries a pewter bead whose x-position maps to scroll progress; the bead is a "position fix" being walked westward. Provide visible westward affordance on Leaf I (engraved hand + the word WESTWARD). Keyboard: left/right arrows nudge leaf-to-leaf. **Storytelling beats, leaf by leaf:** 1. **The Cartouche.** Fade up on the linen ground with paper grain settling in. The ornamental cartouche border draws itself (path-draw-svg, ~2.5s), then the wordmark sets in Cormorant Garamond, then a one-line dedication in EB Garamond italic ("An observation deck for the freight of the world."). The compass rose's needle wobbles, then swings to rest pointing west. The WESTWARD hand pulses once. 2. **The Lanes.** As this leaf enters, three or four rhumb lines path-draw across the ocean from the right edge toward the left, each followed by its italic label sliding in along the line. Tiny ship glyphs spawn at the eastern ends and begin their slow crawl. Hovering a lane: a pair of brass dividers appears and "steps" along it; the lane brightens to tarnished-brass; its label gains a fathoms-style figure (re-cast as transit days). 3. **The Soundings.** The white ocean fills, on scroll-in, with stippled sounding dots (stagger them outward from a few seed points). On approach, clusters of dots dissolve and an annotation card rises in their place — lead-time, dwell-time, transhipment note — each numeral set in IM Fell English. Counter-style animation is fine here but keep it slow and bell-toned, not a fast odometer. 4. **The Wind Rose.** A large 32-point rose occupies the leaf centre, slowly rotating (~one revolution per 40s). Four small cards orbit it on its principal spokes (N, E, S, W) describing what the observer watches: "Congestion", "Weather", "Embargo", "Demand". As the rose turns, the spoke pointing nearest to true west glows sealing-wax red and its card lifts forward. Cursor near the rose: it eases toward the cursor's bearing, then resumes its drift (magnetic, gentle spring). 5. **The Logbook.** Two ruled, tea-stained pages. As the leaf settles, lines of observation are *written* across them by an invisible pen (handwriting path-draw in IM Fell English italic), each preceded by a "bells" timestamp ("Four bells, forenoon watch — observed:"). One entry gains a sealing-wax-red correction struck through and rewritten. The pen lifts at the page's foot. 6. **The Colophon.** The engraver's corner: a signature block, a scale bar with IM Fell numerals, a projection note ("Drawn on a Mercator projection — supplychain.observer, MMXXVI"), and a closing line in Cormorant Garamond italic. As you reach the western edge, the entire chart visibly rolls up onto its spindle (a CSS-driven rolled-paper cylinder closing in from the right) and the viewport returns to the cartouche, ready to be unrolled again. **Motion vocabulary:** path-draw-svg for every line, rhumb, frame, and handwriting stroke (this is the soul of the engraving aesthetic and a deliberate lean into the 48% path-draw territory done *cartographically*); slow magnetic drift on the compass roses and ship glyphs; staggered reveal for soundings and orbit cards; a momentum-eased horizontal scroll; hover states that summon instruments (dividers, parallel rule) rather than highlight boxes. No parallax-of-photos, no tilt-3D, no cursor-trail particles. Everything should feel weighted, lamplit, and quiet — paper, ink, and brass. **Texture & finish:** persistent low-opacity fibrous paper grain over the linen ground; faint per-leaf vignette as if lamp falls off toward the edges; hairline fold-creases at leaf joins; a barely-there warm "lamp glow" radial centred slightly above the chart. Respect `prefers-reduced-motion` by drawing all paths instantly and stilling the roses and ships. ## Uniqueness Notes Differentiators from the rest of the corpus: 1. **The supply chain as an antique sea-chart, not a dashboard.** The frequency analysis shows supply-chain / data sites gravitate to `terminal` (23%), `sci-fi-hud`, `data-viz`, and dark neon dashboards. This site refuses all of that: the data lives inside a hand-engraved admiralty chart, observed by lamplight. `editorial` aesthetic with a cartographic skin is a near-empty intersection in the corpus. 2. **Horizontal scroll as literal longitude.** Horizontal-scroll sits at 8%, almost always used as a "gallery." Here the x-axis *is* the ocean's longitude and freight moves east-to-west across it as you scroll — the navigation mechanic and the subject are the same thing. Paired with the "chart unrolling off a spindle" framing, this is unique. 3. **`navy-metallic` palette rendered as iron-gall ink + pewter + tarnished brass.** Navy-metallic is at 2%; this design grounds it in a specific historical material reality (linen paper, iron-gall ink, brass instruments) rather than a generic dark-blue-with-chrome scheme. 4. **path-draw-svg recast as engraver's line and a writing pen.** Path-draw is heavily used (48%) but almost always as logo/illustration reveals; here every line, rhumb, cartouche, and the logbook *handwriting* is scribed, making the omnipresent technique read as a graver and a ruling pen — a fresh justification for a common tool. 5. **No CTA, no stats grid, no pricing, no cards-of-features.** A pure six-leaf voyage with a colophon, deliberately avoiding the overused `card-grid` (92%), `dashboard` (34%), and counter-grid conventions. Garamond-trio typography (Cormorant Garamond / EB Garamond / IM Fell English) avoids the corpus-saturated `mono` (94%) entirely. Chosen seed / style: **editorial · horizontal-scroll · garamond-classic · navy-metallic · path-draw-svg · line-illustration · wave-forms (as engraver's hatching) · scholarly-intellectual** — assembled from `seeds.json` vocabulary; this exact combination is not present in other designs. Avoided per frequency analysis: `mono` typography, `terminal`/`sci-fi-hud`, `card-grid`, `dashboard`, `glassmorphism`, `hand-drawn` (94%), `cursor-follow` particle trails, `tilt-3d`.