Scout Motors
scoutmotors.coma brand-revival flagship built in Astro v5 with Lenis + Locomotive + Swiper + Splitting, three bespoke Scout Sans cuts (regular / medium / wide-medium) + IBM Plex Mono, signature orange #ff5432, and the most cinematic photography in the library - golden-hour Terra/Traveler EV trucks at 624 image requests.
Design tokens
- body
- scout-sans-regular, ui-sans-serif, system-ui, sans-serif
- body-medium
- scout-sans-medium, ui-sans-serif, system-ui, sans-serif
- display-wide
- scout-sans-wide-medium, ui-sans-serif, system-ui, sans-serif
- mono
- scout-ibm-plex-mono, ui-sans-serif, system-ui, sans-serif
- fallback
- Helvetica, Arial, sans-serif
Do / Don't
Reference it for
- Astro v5 + Lenis + Locomotive + Swiper + Splitting — the canonical cinematic-consumer-brand Astro stack in 2026. Worth studying as Jiffi's primary reference implementation.
- Three Scout Sans optical cuts (regular / medium / wide-medium) + IBM Plex Mono for code/legal — four-face system on one family.
- The wide-medium variant for cinematic display moments at 72-504px.
- Scout orange #ff5432 as a warm-orange brand accent that pairs naturally with golden-hour photography.
- Cinematic landscape hero photography with the headline placed at the bottom of the viewport rather than centred — lets the photograph carry the visual weight.
- The cubic-bezier(0.38, 0.005, 0.215, 1) curve at 0.6s on transform+opacity for cinematic reveals.
- 26 named keyframes including sunRise (sun-rising animation on the hero), revolver (likely a wheel-rotation), zoom-in-zoom-out-1/2 (oscillating zooms), strapMarquee (a marquee for branded straps), slide-in-fwd (forward 3D slide-in).
- A 3-letter brand mark "S" floating top-left over the photograph — small, restrained, brand-confident.
Do not copy
- Scout Sans (all three cuts) — bespoke and commissioned for Scout. Substitute with Helvetica Now Variable, Söhne, or another humanist sans with multiple optical cuts.
- The exact Scout orange #ff5432 — strongly Scout-coded by now.
- 624 image requests unless the brand has the photography library to justify it. Most Jiffi builds should ship 30-80 images on the hero / homepage.
- Lenis AND Locomotive both — usually pick one smooth-scroll library, not both. Scout's stack is over-specified.
- The 504px display sizes unless the brand wordmark genuinely needs that scale.
- Reservation-pricing footnotes — automotive-launch convention; doesn't apply elsewhere.
- 781 total network requests — Scout ships heavy analytics (Amplitude, Bing, Facebook, Google Ads, TVSquared TV-attribution, Casalemedia, OneTrust). Most Jiffi builds should ship 50-150 requests.
Signature moves
bottom-anchored cinematic photo hero
a cinematic landscape photograph carries the hero with the headline placed at the bottom of the viewport (not centred) and a small restrained brand mark floating top-left, letting the image hold the visual weight
Scout-signature cinematic reveal curve
transform+opacity reveals run on cubic-bezier(0.38, 0.005, 0.215, 1) at 0.6s, with named keyframes (sunRise, zoom-in-zoom-out, strapMarquee, slide-in-fwd) for cinematic section moments
four-face single-family optical system
three optical cuts of one sans (regular / medium / wide-medium) plus a mono for code/legal form a four-face system on one family, with the wide-medium variant reserved for display at 72-504px
Related references
Murdock London
flagshipBeauty
a heritage British barbershop and grooming brand run as a polished Shopify storefront, deep ink-navy on warm off-white, Montserrat throughout, a hand-script accent for warmth, and a calm 0.3s ease-in-out motion language that keeps the commerce furniture quiet.
Pacaso
flagshipReal Estate
a proptech site that sells second-home co-ownership as an aspirational lifestyle, leading with a full-bleed cinematic landscape, a freight-display serif headline with one italic word, and a calm ink-on-cream palette warmed by a single sage green.
Aesop
flagshipConsumer Brand
an editorial e-commerce reference where Suisse Intl on warm-cream `#fffef2`, a modular 1.13 type ratio, and full-bleed photography do all the work - no display face, no accent colour, no motion of consequence.
Belyi Ostrov House
flagshipOther
A premium St Petersburg residential development ("Белый Остров" / White Island) that sells aspiration through cinematic craft - a gold-and-navy luxury palette, a full-screen architectural hero, GSAP page-transition wipes and a Three.js/WebGL layer, with calm cream glass cards promising "a place of rest and strength".