Shipsy · Website Design Language v2.0

01 — Design Principles

Five rules that make it feel expensive

Every decision in this guide traces back to one of these.

Principle 01

Space is the luxury

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.

The north star

Expensive in three seconds

A senior enterprise buyer should feel they're dealing with a serious, modern, expensive-to-build platform — within three seconds of landing.

One confident voice

Blue leads; white and warm neutrals support. One palette, one type system — intentional, not decorated.

Motion with purpose

Nothing animates to show off. Motion explains the product or adds calm life — physics easing, never linear.

Show the product, real

Believable product UI and crisp, tabular data beat stock photography and abstract blobs — it signals we do the hard things.

Consistent to the pixel

Same tokens, components and spacing on every page. The system is the brand; deviations cheapen it instantly.

02 — The core idea

Blue brand. White cards. Warm paper underneath.

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".

White / glass surface

Recover 2,000 hrs / month

Surfaces lift off the warm canvas; glass adds depth without clutter.

Book a demo

03 — Color

Color system

Blue is the brand and the only saturated color used at scale. Warm neutrals carry the page; ink carries the words.

Primary — Shipsy Blue

100

200

300

400

500★

600

700

800

900

Blue 500 (#2F5BFF) = primary action / brand. 600–700 hover & press. 50–200 tints, fills, focus rings. 800–900 + Navy for dark sections.

Paper / Canvas

#FAF8F4

Paper Alt (bands)

#F4F0E8

White (surfaces)

#FFFFFF

Hairline border

#E8E2D6

Ink (text)

#0B1424

Navy (dark band)

#0A1734

Spark (≤5% use)

#FF6A3D

Semantic set

15A35B·D98309·DD3434

04 — Typography

Type system

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.)

Display & Body

Satoshi

Headings, UI and body copy. Weights 400 / 500 / 700 / 900; tight tracking on large headings; generous line-height for body.

Labels & Data

2,000 Hrs · Saved

Same Satoshi — set UPPERCASE with wide tracking for eyebrows, and tabular figures for metrics & tables. One typeface, no exceptions.

Type scale

DisplaySatoshi 700 · 60/63 · -3.5%

Heading 1Satoshi 700 · 46/50 · -2.8%

Heading 2Satoshi 700 · 36/40 · -2.2%

Heading 3Satoshi 700 · 24/29 · -1.8%

Lead paragraph — sets up a sectionSatoshi 400 · 22/34

Body — the default reading size.Satoshi 400 · 17/27

EYEBROW · SECTION LABELSatoshi 500 · UPPERCASE · +16%

05 — Iconography

The Shipsy icon set

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.

Route

Package

Dispatch

Warehouse

Scan

Send

Analytics

Audit

Integrate

Global

SLA / time

Resolved

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.

Icon color identity — locked: single blue wash

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.

Plan

on #EAF0FF

Track

on #EAF0FF

Insights

on #EAF0FF

SLA

on #EAF0FF

Audit

on #EAF0FF

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.

06 — Signature interaction

The Shipment Journey

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.

STOP 01 / 06

Capture

Ingest every order and shipment across channels, portals and documents — normalized the moment it lands.

12+source systems unified

Order #SHP-48201ingested · 0.4s

EDI 856 ASNparsed · normalized

STOP 02 / 06

Plan

Optimize routes, modes and carriers against cost and SLA — the heavy math, solved in seconds.

14%avg freight cost saved

Route ATL → DAL3 options · best $2.18/mi

Carrier assignedSLA 98.6% · on-net

STOP 03 / 06

Dispatch

Assign to the field and send — tasks, labels and instructions pushed to drivers and partners instantly.

52%less planning time

Dispatched to 7 ridersauto-sequenced

First mile picked up11:04 · on time

STOP 04 / 06

Track

Live visibility end-to-end — every milestone, exception and ETA on one map your team trusts.

100%shipment visibility

In transit · 34 activeETA confidence 96%

Exception flaggedauto-rerouted

STOP 05 / 06

Reconcile

Audit every carrier invoice against contracted rates and proof of delivery — discrepancies caught automatically.

5–10%spend recovered

Invoice vs contract3 overcharges found

Dispute draftedevidence attached

STOP 06 / 06

Settle

Outcomes posted back to your ERP with a trace finance can audit — the loop closed, every time.

98%touchless settlement

Posted to ERPSAP · GL 60410

Audit trail sealedimmutable · traced

Scroll to move the shipment · click any stop to jump

06.1 — Interaction spec

How the Journey behaves

The exact mechanics, so it's reproducible on the real site — and clearly different from any reference.

Scroll → travel (scrubbed)

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.

Click a stop → glide

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.

Switch stages → glass blur

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.

Why a route, not tabs

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.

Easing & rhythm

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.

Responsible by default

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.

06.2 — Interaction playbook

More ways to bring it alive

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.

SHP-48201In transit

ATLDAL

ETA 14:20 · 98.6% on-time

Magnetic tilt

A shipment card leans toward the cursor in 3D — tactile and alive on hover.

Use for · tracking & feature cards

Live network · 34 active

Scan the fleet map

Cursor spotlight

A glow sweeps the live fleet map as the pointer moves — feels responsive.

Use for · dark map / network bands

shipments tracked today

Count-up metrics

Volume ticks up as it scrolls into view — proof that feels earned.

Use for · stats & outcomes

Word reveal on scroll

A claim fades in word-by-word as you read it — calm, editorial emphasis.

Use for · section intros & quotes

MUMDXBHAM

Route line-draw

A shipment route draws itself across cities on scroll — on-brand with our motif.

Use for · how-it-works, maps, timelines

CARGOWISE · SAP · MAERSK · FEDEX · DHL · ORACLE · BLUE DART · CARGOWISE · SAP · MAERSK · FEDEX · DHL · ORACLE · BLUE DART

Continuous marquee

Carriers & systems drift past — breadth without a wall of logos.

Use for · integrations & trust

Open each interaction as its own demo — a focused full-page demo per interaction, for stakeholder walkthroughs

Also 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.

07 — Imagery

Image cards & bento

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.

Last-mile delivery

Warehouse & 3PL

Courier & parcel

Freight & dispatch

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.

08 — Material: glass

Glassmorphism, with restraint

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.

Light glass

On light/photo backgrounds. 55% white, blur 16px, bright hairline + inset highlight.

Dark glass

On navy/dark scenes. Low-opacity fill, blur 18px, faint white border & highlight.

Accessible fallback

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.

08.1 — Surfaces & atmosphere

Backgrounds, gradients & grain

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.

Warm paper · base canvas

#FAF8F4 — the default page background

Blue mesh · hero

paper + two blue radial glows + grain

Spotlight · feature focus

single top radial glow on white

Navy glow · dark sections

navy + blue radial + grain

Aurora · statement & CTA

navy + blue & warm-spark glows + grain

Glass panel

overlays float on the gradient

Glass on aurora · overlays

glass card + grain backdrop

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.

09 — Buttons

Buttons & controls

Three levels of emphasis, one shape language. Hover lifts gently; focus is always visible. (They're live — hover them.)

Primary

Book a demo
Large primary
Small

One primary per view. Blue 500 fill, lift on hover, press to 700.

Secondary

See how it works
Large secondary

Outline on the warm canvas; fills white + blue border on hover.

Tertiary / link

Read the case study
Disabled state

Text + animated caret for inline navigation.

States — every interactive element ships all five

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

Announcement pill

Shipsy recognized as a Niche Player for TMS by Gartner

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.

10 — Motion

Motion tokens

Calm, physics-based, standardised so motion feels like one hand made it. (Hover a card to preview its easing.)

Ease-out · default

Entrances, hovers, reveals.

cubic-bezier(.22,1,.36,1)

Ease-in-out

Color & state transitions.

cubic-bezier(.65,0,.35,1)

Spring · special

Node snaps, modals, confirms.

cubic-bezier(.34,1.56,.64,1)

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.

11 — Guardrails

Do & Don't

Let sections breathe — more whitespace, not less.
Keep blue the only saturated color at scale.
Use the custom icon pack at one stroke weight.
Float white / glass surfaces on warm paper.
Reserve glass for overlays & the Journey.
Show real product UI and hard numbers.

Don't

Crowd content or shrink section padding.
Add a second brand color or AI-gradient.
Use pure cold white as the page background.
Mix font families or add a display serif.
Put glass on everything or on scrolling areas.
Copy a competitor's signature — we have our own.