---
title: "Locomotive design system"
variant: extended
source: https://locomotive.ca/en
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/locomotive-ca)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Locomotive · Design System

> Expressive typography meets cinematic digital work

**Theme:** light · **Industry:** agency · **Source:** https://locomotive.ca/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Locomotive’s homepage pairs a cinematic, red-lit opening video with an otherwise stark monochrome portfolio. Oversized display lettering, thin dividers, and unusually generous whitespace make the studio’s work and editorial content feel like a carefully composed publication.

## North star

Keep the interface monochrome and spacious, using expressive display type and cinematic color only inside the imagery.

## Overview

The page uses a restrained measured palette: White (#ffffff) is the canvas throughout the long scroll, while Black (#000000) carries almost all text, links, rules, and the occasional image field. The vivid reds visible above the fold belong to the cinematic hero video, not to the measured interface palette; keep them within media rather than turning them into UI accents. LocomotiveNew supplies tall, distinctive display lettering for the wordmark, hero statement, and featured-work names. HelveticaNowDisplay handles navigation, compact copy, and supporting links. The composition alternates full-bleed video with open white sections, then uses thin black rules to organize project names, articles, culture links, and footer columns. Layouts shift between a centered media moment, a two-column work list, and broad editorial text. Spacious vertical pauses give even small text lists room to breathe. The interface is flat: no measured shadows, gradients, or rounded corners.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary text, links, thin dividers, and occasional black media backdrops across the white page. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Continuous page canvas, creating clear contrast around editorial copy, project lists, and store imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNowDisplay | `--font-body` | webfont | 400 | Navigation, body copy, links, article lists, and supporting interface text. | Helvetica Neue |
| LocomotiveNew | `--font-display` | webfont | 400 | Display headlines, the brand wordmark, and prominent featured-project names. | Bodoni Moda |

- **HelveticaNowDisplay:** Measured regular weight; use clean sans-serif forms and natural casing for concise navigation and dense supporting copy.
- **LocomotiveNew:** Measured regular weight; preserve the distinctive high-contrast editorial character and generous, unforced letter spacing.

### Type scale — Custom (ratio ≈ 1.943, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 110px | 400 | 1 | 0 | — | LocomotiveNew | Oversized hero and brand display lettering. |
| h1 | 70px | 400 | 1.1 | 0 | — | LocomotiveNew | Prominent introductory or editorial headline. |
| h2 | 26px | 400 | 1.2 | 0 | — | HelveticaNowDisplay | Section titles and prominent supporting headings. |
| body | 15px | 400 | 1.3 | 0 | — | HelveticaNowDisplay | Compact paragraph and descriptive copy. |
| button | 26px | 400 | 1.2 | 0 | — | HelveticaNowDisplay | Large text-style actions and preferences. |
| nav | 26px | 400 | 1.2 | 0 | — | HelveticaNowDisplay | Primary navigation links across the top. |
| link | 26px | 400 | 1.2 | 0 | — | HelveticaNowDisplay | Project, article, culture, and footer links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 5, 7, 8, 10, 11, 20, 30, 40, 50, 150, 160 px.
- Section rhythm 150px · element gap 20px · card padding 147px · max content width 1360px.

A spacious, long-scroll editorial layout sits on a white canvas, with a full-bleed video opening and later sections arranged as centered media, two-column work lists, broad text passages, and footer columns. The measured page max width is 1360px. Large section pauses separate featured work, studio copy, articles, culture links, merchandise, and contact details; within sections, thin horizontal rules provide alignment and structure. Overall density stays low despite numerous links and repeated lists.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The measured interface is flat, with no shadows, gradients, or rounded component corners. Separate content with whitespace and fine black horizontal rules rather than cards. Media may create its own deep-black fields, but should not appear as raised UI panels.

## Imagery

The opening is a full-bleed cinematic video with a close, shadowed portrait and saturated red light. Project and studio moments use image or video media, often set against black, while merchandise appears as isolated product photography on pale backgrounds. Keep photographic color inside the media; the interface remains black and white. Avoid decorative illustration or interface gradients.

## Components

### Top navigation

Place the wordmark at the left, primary links across the top, and a contact link at the right; use black text on white sections and white text over the opening video.

### Featured work list

Stack large display-style project names between fine black rules, with compact labels and links supporting the work index.

### Studio introduction

Use a prominent editorial statement followed by compact explanatory copy and simple text links, with a media element alongside supporting content where appropriate.

### Editorial link lists

Organize article and culture entries in compact sans-serif rows, aligned with thin horizontal dividers and generous section spacing.

### Merchandise grid

Show products in a two-column image-led arrangement on white; keep product names and purchase links as plain text.

### Contact footer

Group menu, social, and external links into three columns, then finish with oversized editorial contact details on the white canvas.

### Measured component styles

- **Primary button** (“Cookie preferences”): transparent background · text #000000 · radius 0px · padding 0px · 400 26px HelveticaNowDisplay
- **Link** (“Locomotive x Lightship : Innovation Need”): transparent background · text #000000 · radius 0px · padding 0px 50px 0px 0px · 400 26px HelveticaNowDisplay
- **Card**: background #000000 · text #000000 · radius 0px · padding 0px 0px 586.7px 0px · 400 15px HelveticaNowDisplay
- **Navigation item** (“Work”): transparent background · text #000000 · radius 0px · padding 0px · 400 26px HelveticaNowDisplay

## Do

- Use White (#ffffff) as the continuous interface canvas.
- Set text, links, and fine dividers in Black (#000000).
- Reserve LocomotiveNew for prominent editorial display moments.
- Use HelveticaNowDisplay for navigation and supporting copy.
- Create hierarchy with whitespace and thin rules.
- Keep saturated color within cinematic or project imagery.

## Don't

- Do not introduce unmeasured interface colors.
- Do not turn the hero video's reds into global UI accents.
- Do not add card shadows or gradients.
- Do not use rounded interface panels.
- Do not compress the generous section rhythm.
- Do not make supporting links look like filled buttons.

## Agent prompt

Build a new Locomotive-style agency page as a spacious editorial canvas. Use Gallery White (#ffffff) as the page surface and Studio Ink (#000000) for text, links, and thin rules; keep vivid color confined to project media. Use LocomotiveNew or a close editorial serif substitute for display headlines and featured project names, paired with HelveticaNowDisplay or a neutral sans-serif substitute for navigation and body copy. Compose a restrained top navigation, a full-bleed cinematic media moment, prominent typographic work listings, and concise studio or editorial sections. Alternate layouts rather than repeating cards: use open text passages, simple columns, and image-led merchandise or project blocks. Preserve generous vertical pauses, low visual density, square edges, and a flat treatment without shadows or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video fills the first viewport, with navigation above and a large brand statement anchored near the bottom. | Persistent top navigation, Brand introduction | Full-bleed video, White overlay text, Display lettering |
| 2 | timeline | Open white canvas with a small centered media moment and short labels positioned around it. | Milestone framing, Project link | Black media field, Minimal labels, Large whitespace |
| 3 | feature-grid | Two-column work area with large project names arranged as a ruled editorial list. | Project browsing, All-work link | Display typography, Thin horizontal rules, Image thumbnails |
| 4 | other | A broad editorial statement spans the white canvas with minimal surrounding content. | Studio positioning | Large display copy, Open whitespace |
| 5 | feature-split | Supporting copy and text links sit beside a compact media feature on an open white background. | Agency overview, Careers link | Editorial copy, Media block, Plain text links |
| 6 | content-feed | Section heading and count sit above a compact, ruled article-link list. | Article discovery, Read-more links | Editorial heading, Thin dividers, Plain text rows |
| 7 | content-feed | Culture heading followed by a compact list of dated entries aligned in a ruled column. | Browse by year, Culture archive | Plain text list, Thin dividers |
| 8 | product-grid | Two product columns pair isolated merchandise photography with names, prices, and purchase links. | Product browsing, Purchase links | Product photography, Open white layout, Text-only actions |
| 9 | footer | Three link columns lead into a wide, oversized contact and address block. | Site navigation, Social links, Contact details | Column groups, Plain text links, Large display contact |

## Source CSS custom properties (selected)

```css
--color: #000000;
--color-bg: #FFFFFF;
--font-size: 15px;
--spacing-micro-mobile: 8;
--spacing-micro: 14;
--spacing-tiny-mobile: 20;
--spacing-tiny: 20;
--spacing-small-mobile: 30;
--spacing-small: 30;
--spacing-medium-mobile: 40;
--spacing-medium: 40;
--spacing-large-mobile: 52;
--spacing-large: 80;
--spacing-big-mobile: 80;
--spacing-big: 150;
--spacing-huge-mobile: 100;
--spacing-huge: 200;
--spacing-enormous-mobile: 140;
--spacing-enormous: 250;
--border: solid 2px;
--menu-color: #FFFFFF;
--menu-color-bg: #312DFB;
--font-size-medium: 1.7333333333rem;
--font-size-huge: 7.6388888889vw;
--font-size-h1: 4.6666666667rem;
--font-size-h2: 1.7333333333rem;
--font-size-h3: 1.4666666667rem;
--font-size-h4: 1.3333333333rem;
--font-size-h5: 1.2rem;
--font-size-h6: 1.0666666667rem;
--border-size: 2px;
--swiper-theme-color: #007aff;
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #30363c;
--cc-bg: #fff;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #30363c;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/locomotive-ca