Design

Locomotive

Bold editorial darkness — a near-black canvas with off-white ink, oversized display headlines at tight negative tracking, monospace technical labels as the "agency console" voice, and a single electric accent reserved for interaction. Built by the studio behind Locomotive Scroll, so motion and rhythm are baked into the type scale.

Color Palette27 tokens

background#0a0a0a

surface#141414

surface-soft#1c1c1c

ink#f2f0eb

ink-strong#ffffff

ink-secondary#a3a097

ink-muted#6b6960

primary#e8442a

accent-hover#ff5a3d

accent-soft#2a1410

gray-900#0a0a0a

gray-800#141414

gray-700#1c1c1c

gray-600#2b2b2b

gray-500#3d3d3a

gray-400#6b6960

gray-300#a3a097

gray-200#cfcdc5

border#2b2b2b

border-strong#3d3d3a

divider#1c1c1c

on-primary#0a0a0a

on-ink#0a0a0a

on-surface#f2f0eb

focus#e8442a

selection-bg#e8442a

selection-text#0a0a0a

Buttons

TypographyGoogle Font

Archivo

display-hero

The quick brown fox

88px · 700 · -3.5px

display-large

The quick brown fox

64px · 700 · -2.4px

section-heading

The quick brown fox

44px · 600 · -1.6px

sub-heading

The quick brown fox

28px · 500 · -0.8px

card-title

The quick brown fox

22px · 600 · -0.6px

IconsLucide

Set: Lucide · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Locomotive

Bold editorial darkness — a near-black canvas with off-white ink, oversized display headlines at tight negative tracking…

Design

none

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Locomotive

Bold editorial darkness — a near-black canvas with off-white ink, oversized display headlines at tight negative tracking, monospace technical labels as the "agency consol…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesignLocomotive

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Locomotive.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Locomotive tokens
export const theme = {
  primary: "#e8442a",
  radius: "8px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Locomotive is the Montreal digital design studio behind the ubiquitous Locomotive Scroll library, and its own website reads like a manifesto for motion-first editorial design. The…

Locomotive · Design