One consistent design language for the whole website — color, type, spacing, motion, icons and a signature interaction of our own. It's the contract every page is built against, and the reference stakeholders sign off before we build.
Trusted by global leaders
Reusable logo strip — greyscale at rest, full colour on hover, edges faded, and the scroll pauses on hover so logos are easy to read. They sit on a white panel so every mark reads cleanly in light or dark mode.
Every decision in this guide traces back to one of these.
Generous whitespace is the single biggest "expensive" signal — large section padding, wide margins, never crowded. We let the page breathe before we add anything to it.
A senior enterprise buyer should feel they're dealing with a serious, modern, expensive-to-build platform — within three seconds of landing.
Blue leads; white and warm neutrals support. One palette, one type system — intentional, not decorated.
Nothing animates to show off. Motion explains the product or adds calm life — physics easing, never linear.
Believable product UI and crisp, tabular data beat stock photography and abstract blobs — it signals we do the hard things.
Same tokens, components and spacing on every page. The system is the brand; deviations cheapen it instantly.
The research across new-age sites was unanimous: warm off-white reads more premium than cold pure-white. So we keep Shipsy's blue as the hero and white for surfaces — floated on a warm, paper-like canvas. That one move separates "expensive" from "template".
Surfaces lift off the warm canvas; glass adds depth without clutter.
Book a demoBlue is the brand and the only saturated color used at scale. Warm neutrals carry the page; ink carries the words.
Blue 500 (#2F5BFF) = primary action / brand. 600–700 hover & press. 50–200 tints, fills, focus rings. 800–900 + Navy for dark sections.
One premium grotesk — Satoshi — across the whole site. Warmer and more characterful than the usual SaaS sans, and a clear step up in polish. Labels use the same font, uppercase and tracked; we dropped the monospace, which read "vibe-coded" and off-theme. (No display serif either — it's the most common AI-design tell.)
Headings, UI and body copy. Weights 400 / 500 / 700 / 900; tight tracking on large headings; generous line-height for body.
Same Satoshi — set UPPERCASE with wide tracking for eyebrows, and tabular figures for metrics & tables. One typeface, no exceptions.
Phosphor (regular weight · MIT-licensed · 1,200+ glyphs) as the base — elegant and consistent — with a few custom Shipsy marks (the chevron, route & shipment token) drawn to match. Single-color (currentColor), rendered in the locked blue wash so the whole set reads as one family everywhere.
Rules: one family only (Phosphor regular) · never mix in a second set · size tokens 16 / 20 / 24 / 28 · always presented in the blue wash below. Custom Shipsy glyphs are drawn at the same weight so they're indistinguishable from the base set. The library scales freely as the site grows.
Every icon sits in a pale-blue chip with a deep-blue glyph — one brand hue across the whole site (Reform's discipline). Cohesive, premium and unmistakably Shipsy, with no rainbow of category colors to police.
Glyph #1E45E0 (blue-600) · chip #EAF0FF (blue-50). On dark sections the chip becomes rgba(47,91,255,.18) with a white glyph. For more depth on key moments we can later promote any icon to Phosphor's duotone weight — still entirely blue, never a second hue.
Our own scroll mechanic — not a borrowed one. A shipment physically travels a route as you scroll; each stop reveals what Shipsy does there. Scroll to advance, or click any stop to glide to it.
Ingest every order and shipment across channels, portals and documents — normalized the moment it lands.
Optimize routes, modes and carriers against cost and SLA — the heavy math, solved in seconds.
Assign to the field and send — tasks, labels and instructions pushed to drivers and partners instantly.
Live visibility end-to-end — every milestone, exception and ETA on one map your team trusts.
Audit every carrier invoice against contracted rates and proof of delivery — discrepancies caught automatically.
Outcomes posted back to your ERP with a trace finance can audit — the loop closed, every time.
The exact mechanics, so it's reproducible on the real site — and clearly different from any reference.
The section pins (ScrollTrigger pin:true, start:"top top") and scroll progress drives a single timeline. The shipment token glides along the rail 1:1 with scroll (scrub) — no snapping, so it reads as continuous movement, not a slideshow.
Each rail node maps to a scroll position (start + i/5 ·(end−start)). Clicking tweens the page there with ScrollToPlugin, 0.9s · ease-out — so click and scroll stay perfectly in sync, bidirectionally.
When the active stop changes, the outgoing panel fades + blurs out (blur 0→10px, y +12), the incoming reverses. Blur is the transition medium — tying the motion to our glassmorphism, and nothing like a hard video-tab swap.
A travelling shipment is native to logistics and to our arrow logo — it tells the "end-to-end" story by literally moving end to end. It's recognisably Shipsy, not an echo of a competitor's tab-video pattern.
Token travel: linear-to-scroll. Node snap & hover: spring. Panel swap: ease-out 0.45s. Progress fill glows (box-shadow) so the eye follows the front of the shipment.
Below 820px and under prefers-reduced-motion, the pin is dropped and stages render as a clean vertical stack — full content, zero hijack. The signature is desktop-only flourish, never a barrier.
The Shipment Journey is the centrepiece — but interaction shouldn't stop there. Here's a menu of smaller, reusable motions, each tied to a job. Hover and scroll the tiles; they're live.
A shipment card leans toward the cursor in 3D — tactile and alive on hover.
Use for · tracking & feature cardsA glow sweeps the live fleet map as the pointer moves — feels responsive.
Use for · dark map / network bandsVolume ticks up as it scrolls into view — proof that feels earned.
Use for · stats & outcomesA claim fades in word-by-word as you read it — calm, editorial emphasis.
Use for · section intros & quotesA shipment route draws itself across cities on scroll — on-brand with our motif.
Use for · how-it-works, maps, timelinesCarriers & systems drift past — breadth without a wall of logos.
Use for · integrations & trustAlso in the kit (deploy as needed): pinned card-stack (stacking "how it works") · horizontal scroll-pan (product tour) · parallax layers (hero depth) · accordion step-reveal (FAQ / process) · hover-zoom bento (imagery). Rule from §10 — every motion needs a job; if you can't name it in a sentence, cut it. All respect prefers-reduced-motion.
Real logistics photography, arranged in an asymmetric bento — one hero tile anchors, supporting tiles vary in size for rhythm. Each carries a small glass label (not a heavy banner) so the photo stays the hero.
Placeholders shown. Drop your real photos into images/ as lastmile.jpg, warehouse.jpg, handoff.jpg, freight.jpg and they slot straight in. Rules: warm/neutral grade to match the canvas · subtle zoom on hover (1.05, 0.8s) · gradient scrim only behind the label · vary tile sizes, never a flat equal grid.
Used for overlays, floating panels and the Journey mocks — never on everything. Real glass needs a light source: a 1px bright border and an inset top highlight for edge refraction.
On light/photo backgrounds. 55% white, blur 16px, bright hairline + inset highlight.
On navy/dark scenes. Low-opacity fill, blur 18px, faint white border & highlight.
Under prefers-reduced-transparency glass becomes a solid fill. Text always meets 4.5:1.
Guardrails: apply backdrop-filter only to fixed/overlay elements (never large scrolling areas — it tanks mobile FPS) · keep contrast on the glass, not relying on the blur · max two glass layers stacked.
The depth in the hero and the "north star" card comes from soft radial glows plus a fine film grain over the color. Here's the reusable set — pick one surface per section so the site has atmosphere, not noise.
Grain is a fixed SVG-noise overlay (~16%, mix-blend: overlay) — the premium "film" texture with zero image weight. Keep it on dark / gradient surfaces and subtle. Rule: one atmospheric surface per section, and never stack glows so heavily that text drops below 4.5:1 contrast.
Three levels of emphasis, one shape language. Hover lifts gently; focus is always visible. (They're live — hover them.)
One primary per view. Blue 500 fill, lift on hover, press to 700.
Outline on the warm canvas; fills white + blue border on hover.
| State | Treatment | Token |
|---|---|---|
| Default | Blue 500 fill, soft shadow | --blue-500 |
| Hover | Darken 600 + translateY(-2px) + shadow-2 | --blue-600 · --ease-out |
| Active | Darken 700, drop the lift | --blue-700 |
| Focus | 3px blue-200 outline, 2px offset | --blue-200 |
| Disabled | 40% opacity, no pointer events | opacity .4 |
A soft shimmer sweeps the label to draw the eye without shouting — for awards, launches and recognition. A single blue dot signals "new" (no emoji). One per page, in the hero or atop a section; the shimmer pauses under prefers-reduced-motion.
Calm, physics-based, standardised so motion feels like one hand made it. (Hover a card to preview its easing.)
Entrances, hovers, reveals.
Color & state transitions.
Node snaps, modals, confirms.
| Micro (hover, toggle) | 150ms |
| Default (transitions) | 250ms |
| Entrance (reveal) | 450ms |
| Cinematic (hero, journey) | 800ms+ |
Always honour prefers-reduced-motion — disable transforms, keep content instantly visible. Animate only transform & opacity.