# Locomotive · Design system migration spec

> Source: https://locomotive.ca  ·  Curated by OpenDesign  ·  en

> The site is worth including as a masterclass in using typography and stark contrast to create a premium, expressive agency aesthetic.

## 1. Identity DNA

Locomotive's design system is built on the principle of a premium design studio, balancing editorial elegance with bold technical precision. It is a digital-first identity that treats typography and contrast as its primary architectural materials. The result is a system that feels both monumental and meticulously crafted, like a well-conceived gallery space.

**One-liner:** A digital-first design agency showcasing work through high-contrast, typography-driven layouts.
**Keywords:** Digital-first · Design Agency · Innovative · Meaningful
**Analogy:** A premium design studio balancing editorial elegance with bold technical precision.

## 2. Color

The color system is a study in stark contrast, using a pure black and white foundation to create immediate visual impact. A single, high-chroma orange accent provides strategic punctuation without disrupting the monochromatic discipline.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--accent` | `#E05F15` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast palette using stark black and white, punctuated by a single high-chroma orange accent.

This strict palette forces all expression through form, scale, and imagery, making every color application deliberate and significant.

## 3. Typography

Typography is the system's dominant voice, built around massive didone-serif display faces that command the viewport. The scale moves from monumental headlines to precise supporting text, establishing a clear hierarchy rooted in editorial tradition.

- **Display:** didone-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 110px | 1.0 | 400 | -2px | Hero headlines and large accent typography |
| headline | 70px | 1.0 | 400 | -1px | Section headers and navigation links |
| body | 26px | 1.2 | 400 | 0 | Primary UI text and navigation |
| caption | 15px | 1.3 | 400 | 0 | Small supporting text and metadata |

## 4. Spacing

Spacing follows an open, generous rhythm, with substantial vertical padding and consistent gaps that give content room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Open and spacious layout with generous padding (40px vertical) and consistent gaps (20px) between elements.

## 5. Surfaces

Surface treatment is defined by purity and precision, rejecting decorative depth in favor of stark contrast and sharp definition. Borders are used sparingly, as deliberate 2px lines that structure information rather than merely separate it.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Minimal but precise 2px solid borders used for separators and structured labels.

## 6. Layout

The layout skeleton is asymmetric, built to accommodate large hero imagery and overlapping typographic elements. It prioritizes full-bleed visuals and expansive white space over traditional, grid-bound content blocks.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric grid layout with a strong emphasis on large hero imagery and text overlapping visual elements.

## 7. Motion & Interaction

Motion philosophy is one of refinement and purpose, using smooth transitions to guide attention and affirm interaction. Complex, immersive canvas effects likely support the background, while UI interactions rely on subtle opacity and color shifts with precise, professional easing.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Smooth transitions for opacity and background-color changes on hover.
  - Precise, fast transforms for interactive UI elements.
  - Immersive, likely complex canvas or WebGL effects for background imagery.

- **Hover:** Subtle opacity or background-color changes with precise easing curves.
- **Click:** Immediate feedback via transform or opacity shifts.
- **Transition:** Consistent use of cubic-bezier(0.215, 0.61, 0.355, 1) for a refined, professional feel.
- **Keyboard:** Standard focus management implied by standard link structures.

## 8. Voice & Don'ts

The editorial voice is professional and confident, with a touch of playfulness conveyed through bold typographic scale and spatial composition rather than overt language.

- **Tone:** Professional, innovative, and confident, with a touch of playfulness.
- **Headline style:** Bold, large-scale serif typography that feels editorial and premium.
- **CTA style:** Subtle, text-focused calls to action integrated naturally into the navigation or layout.
- **Avoid:** Avoid casual or overly friendly language. / Avoid complex gradients or drop shadows. / Avoid cluttered layouts or excessive UI components.

### Don'ts
- ❌ Don't use rounded corners on any elements — the screenshot shows sharp, 0px radius boxes and cards.
- ❌ Don't use drop shadows or complex depth effects — the screenshot relies on pure typography and color contrast.
- ❌ Don't use a multi-color palette — the screenshot is strictly black, white, and one orange accent.
- ❌ Don't use small, condensed typography for headlines — the screenshot features massive, 110px scale display text.
- ❌ Don't use standard, heavy button components — the screenshot uses text links and subtle borders for interactions.
- ❌ Don't use busy backgrounds behind text — the screenshot uses high-contrast solid backgrounds or clean imagery.

The system deliberately avoids rounded corners, drop shadows, multi-color palettes, and standard UI widgets, committing fully to its sharp, typographic, and high-contrast identity.

## System Prompt (paste into AI tool)

```
Locomotive is a premium digital-first design agency whose visual identity is defined by massive didone-serif display typography, a high-contrast monochrome palette (black #000000 and white #FFFFFF), and a single vibrant orange accent (#E05F15). The layout relies on bold typography (up to 110px) and generous whitespace. Interactions are subtle, using opacity and background-color transitions with precise cubic-bezier easing. Key constraints: avoid rounded corners (keep radius at 0px), avoid drop shadows, and never use heavy, traditional button components. The system emphasizes a clean, editorial, and highly expressive aesthetic that prioritizes large-scale imagery and typography over complex UI widgets.
```
