Skip to content
Portfolio / Studio

Locomotive

A studio portfolio that pairs a high-contrast editorial serif with a neutral grotesque, over wide compositions and buttery-smooth scroll animations (their own smooth-scroll library) that turn navigation into a cinematic experience. The hierarchy is immaculate, and typographic detail is the main character.

EditorialLarge typeAnimationMinimal
locomotive.ca Desktop
Full screenshot of locomotive.ca on desktop
Full screenshot of locomotive.ca on mobile
Mobile

Screenshots of the real site. Scroll inside each frame to go through it.

The feeling

Editorial sophistication and digital craft, with a touch of bold elegance.

Design system Extracted from the site

Colors

Background
#ffffff
Text
#000000
Accent
#007aff
Border
#000000
Palette: #007aff #ffffff #000000 #312dfb

Typography

LocomotiveNew Headlines
HelveticaNowDisplay Body text
Scale 70px26px15px

Weights: 400

Spacing, borders and layout

Spacing scale
4 · 8 · 12 · 16 · 20 px
Base unit
4px
Border
2px #000000

Third-party style reference. AIGiner is not affiliated with or sponsored by Locomotive; the brand, design and content belong to their owners. Shown for illustrative purposes. Are you the owner and would rather we remove it? Write to us.

Similar pages

See all
portorocha.com
Screenshot of Porto Rocha's website

We design websites at this level

Tell us about your brand, launch or event and we'll propose a creative website with this attention to detail and this finish.