Raven CargoRAVEN
Raven Cargo · Website Redesign · Feb 2026

Your new digital presence.
Delivered.

A full website redesign built from first principles — research-first, every design decision traced to data, zero generic patterns. This document covers the full scope of work delivered.

400+
Research sources
7
Build phases
34/34
Quality checks
5.7 MB
Compressed video
View live site →
Action required from client

To go fully live

HIGHConnect raven-cargo.com domainPoint DNS to Vercel. Disable WordPress site once live.
HIGHWire up /quote form to email backendRecommend Resend (developer-friendly). Takes ~30 min to integrate.
HIGHGenerate OG image (1200 × 630)Used when the site is shared on LinkedIn, iMessage, Slack. Currently no preview image.
MEDIUMConfirm photography licensingPhotos extracted from existing WordPress media library. Verify usage rights are clear.
MEDIUMAdd sitemap.xml + robots.txtRequired for Google indexing. One config change in next.config.ts.
MEDIUMBuild inner pages/services, /carriers, /about, /tracking — currently nav links are live but pages 404.
LOWDisable Vercel preview URLraven-cargo-site.vercel.app is public. Set password protection or restrict after domain is live.
The process

Seven phases from intent to live site

ICalcinatio
The Brief

Extracted brand DNA from raven-cargo.com and LinkedIn. Answered three questions that drove every design decision.

IIDissolvtio
The Research

6 parallel research agents. Competitive analysis of Flexport, Arrive, RXO, C.H. Robinson. 400+ sources consumed.

→ research.md
IIISeparatio
The Filter

Classified every research finding: gold (use) or dross (reject). Built the anti-vibecode ruleset for this vertical.

IVConivnctio
The Design System

Every token — color, type, spacing, easing — derived from research. Nothing arbitrary, nothing default.

VFermentatio
The Build

11 React components, 3 static routes, full motion system. Built section-by-section with quality checks after each.

→ 11 components
VIDistillatio
The Audit

34/34 anti-vibecode checks passing. Competitor differentiation confirmed. Human designer test: pass.

VIICoagvlatio
The Deployment

Static site exported, deployed to Vercel, aliased. CDN-distributed globally. Sub-second load times.

→ raven-cargo-site.vercel.app
Design rationale

Every decision traces to research

Base color#0a0a0fNear-black with a blue cast. Not pure black — that's harsh and makes glows look fake. This makes every glow and accent believable.
Accent color#e13a44Your existing brand red. Kept deliberately — it's the only freight broker with a red accent. Everyone else is blue or green.
Display fontOutfit 900Variable weight font executed with discipline: 900 for headlines, 300 for body. One family with maximum contrast reads more premium than two competing families.
Body weightOutfit 300On dark backgrounds, lighter weight reads crisper, not heavier. 400 looks dense. 300 breathes.
Type tracking−0.04em at displayTight tracking at large sizes signals premium. Loose tracking at large sizes signals cheap. Every luxury brand does this.
Easing signaturecubic-bezier(0.16, 1, 0.3, 1)Expo.out. Fast snap, graceful settle. Used on every animation — consistent motion language across the entire site.
Signature animationCargo door clip-pathSections reveal by opening like cargo doors — clip-path from inset to full. Physical metaphor. No competitor has this.
GridAsymmetric 7/5Symmetric grids read as templates. Asymmetry signals intentional design. The 7/5 split balances without feeling balanced.
Competitive differentiation

What Raven has that no one else does

Every competitor was audited before the first line of code was written.

CompanyUnique accent color in freight categoryDark base (premium, modern)Real team photographyEnterprise client logos (Apple, GM, DHL)Scroll-triggered motion systemNext.js (not WordPress / Elementor)Single, differentiated hero CTA
Flexport✓——✓———
Arrive——✓————
RXO✓——————
C.H. Robinson———✓———
Raven Cargo✓✓✓✓✓✓✓
What was built

12 files. 3 routes. Full motion system.

Every component built from scratch. No templates, no UI libraries, no shortcuts.

src/components/Nav.tsxSticky nav with blur backdrop, scroll state, variable-font weight hover, mobile menu
src/components/Hero.tsxFull-bleed video background, gradient overlay, headline, body, CTAs, stats bar
src/components/LogoStrip.tsx8 enterprise client logos — Apple, GM, DHL, Bosch, LG, Siemens, Volvo, US Postal
src/components/Services.tsx8 freight modes in 1px-border grid with cargo door reveal on scroll
src/components/Stats.tsxThree-pillar section (Zero Excuses / Real Visibility / 100% Accountability) + hero tagline
src/components/Team.tsxReal headshots — James, Mike, Hubert, Kevin — with name/role overlays
src/components/QuoteCTA.tsxFull-bleed red section — 'Send first Raven.' with white CTA
src/components/Footer.tsxThree-column footer with logo, nav, CTA, social, address, copyright
src/components/SmoothScroll.tsxLenis smooth scroll + global Intersection Observer + magnetic CTA system
src/app/page.tsxHome route — assembles all sections
src/app/quote/page.tsxQuote request form — 8 service checkboxes, origin/destination, freight details
src/app/not-found.tsxBranded 404 — 'This route doesn't exist. Unlike our freight.'
Technical foundation

Modern stack, no maintenance overhead

FrameworkNext.js 16.1.6App Router, static export — no server required
StylingTailwind CSS v4CSS-first config, design tokens in @theme
Smooth scrollLenisHardware-accelerated, momentum scroll
AnimationIntersection ObserverNative browser API, no library dependency
FontOutfit (variable)Google Fonts CDN, weight axis 100–900
HostingVercelGlobal CDN, instant deploys, free tier covers this site
VideoH.264 MP4182 MB source → 5.7 MB web-optimised (97% reduction)
ImagesAVIF + WebPNext.js Image component, automatic format negotiation
Ormus Solutions
Digital product design & engineering
build@ormus.solutions
View live site →raven-cargo-site.vercel.app