Screenshot of Locomotive

Locomotive

locomotive.ca

The reference for cinematic Montreal creative studio — black preloader with serif logo, Lenis + Locomotive Scroll stack, Lisa AI assistant integration, emoji-heavy section labels.

Creative Studio Digital Design Agency flagship

Design tokens

black
white
blue
display
HelveticaNowDisplay
body
LocomotiveNew
mono

Do / Don't

Reference it for

  • Pure black + pure white + electric royal blue #312dfb accent
  • HelveticaNowDisplay + LocomotiveNew classic serif logotype + sans pair
  • Single weight (400) across both families
  • 110-115px hero display — larger than most flagship sites
  • 0 border-radius / 0 box-shadows — completely flat sharp design
  • Lenis + Locomotive Scroll smooth-scroll stack (Locomotive's own library)
  • Lisa AI assistant with named keyframe family (lisaCursor / lisaLoader / lisaDisclaimerFlash / lisaDisclaimerProcedure)
  • Emoji-bracketed section H2s (🔶 ... 🍺🔞) — distinctive Quebec/Montreal informal voice

Do not copy

  • The Locomotive logotype + serif wordmark
  • The "Lisa" AI assistant brand name
  • The HelveticaNowDisplay / LocomotiveNew bespoke licences
  • The emoji-bracketed H2 format unless brand voice supports it
  • The "Theory Verse" sub-brand
  • The Locomotive Scroll library itself (it's a published OSS library — use Lenis as alternative)
  • The royal blue #312dfb exact hue

Signature moves

black preloader with serif logotype

a pure-black preloader shows the serif logotype, then a slow 0.9s opacity cinematic transition on easeOutCubic cubic-bezier(0.215,0.61,0.355,1) reveals the page, with a featuredProjectsAllFlash flash effect for case study reveals

oversize flat sharp display headlines

110-115px hero display headlines run larger than most flagships with single 400 weight, zero border-radius and zero box-shadows for a completely flat sharp design

Related references

Screenshot of Cyphr

Cyphr

strong

Creative Studio

The reference for venture-studio portfolios that flex through monumental condensed type, a single blue I-beam cursor accent, and a venetian-blind slat hero that fragments a single image into a column-rhythmic curtain.
Screenshot of Lisovskiy

Lisovskiy

niche

Design Portfolio

Sergey Lisovskiy's personal designer site — floppy-disk hero illustration + intentionally scrambled-letter headlines + single 43.2px Apfel Grotezk + SvelteKit.
Screenshot of Alche

Alche

strong

Creative Studio

The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.
Screenshot of Analogue

Analogue

strong

Creative Studio

a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.