---
version: alpha
name: Locomotive
description: 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.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f2f0eb"
  ink-strong: "#ffffff"
  ink-secondary: "#a3a097"
  ink-muted: "#6b6960"

  # Accent — interaction + highlight, reserved
  primary: "#e8442a"
  accent-hover: "#ff5a3d"
  accent-soft: "#2a1410"   # accent flattened low over canvas, hover wash

  # Neutral scale (warm-grey, flattened opaque over canvas)
  gray-900: "#0a0a0a"
  gray-800: "#141414"
  gray-700: "#1c1c1c"
  gray-600: "#2b2b2b"
  gray-500: "#3d3d3a"
  gray-400: "#6b6960"
  gray-300: "#a3a097"
  gray-200: "#cfcdc5"

  # Lines + chrome
  border: "#2b2b2b"
  border-strong: "#3d3d3a"
  divider: "#1c1c1c"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"
  on-surface: "#f2f0eb"

  # Status / utility
  focus: "#e8442a"
  selection-bg: "#e8442a"
  selection-text: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Archivo, Arial Narrow, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -3.5px
  display-large:
    fontFamily: "Archivo, Arial Narrow, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.5px
  caption-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.4px
  micro:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-work:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 20px 32px
    borderColor: "{colors.divider}"

  mono-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"

  link-accent:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Locomotive Design System

## Overview

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 canvas is near-black (`{colors.background}`) — not pure `#000000`, but a warm graphite that lets oversized type breathe without harshness. Against it sits a slightly off-white ink (`{colors.ink}`), a paper-warm tone that signals "editorial" rather than "terminal." The result is a gallery in negative: dark, generous, and confident.

The typographic identity is built on compression and scale. Display headlines run enormous (up to 88px) with aggressive negative tracking (-3.5px at hero), so the words feel set in metal type and squeezed into the column. This is a studio that animates scroll for a living, so the type scale is intentionally rhythmic — big jumps between display and body, lots of air, headlines that earn full-bleed real estate. A monospace voice (`{typography.label-mono}`) handles section numbers, project indices, and technical labels, acting as the studio's "console" register that contrasts with the grand sans display.

Color discipline is the third pillar. A single electric accent (`{colors.primary}`, a saturated vermilion-red) is the only chromatic note in an otherwise achromatic warm-grey system. It is reserved for interaction — hovered links, primary CTAs, focus rings, text selection — never sprayed decoratively. Everything else is a warm-grey scale running from the graphite canvas up through `{colors.surface}` cards to off-white ink. Depth comes from subtle surface lifts and 1px hairline borders, not shadows.

**Key Characteristics:**
- Warm near-black canvas (`{colors.background}`) with paper-warm off-white ink (`{colors.ink}`) — editorial darkness, not terminal black
- Oversized display type (up to 88px) with extreme negative tracking (-3.5px at hero)
- Single reserved accent (`{colors.primary}`, electric vermilion) for interaction only
- Monospace labels (`{typography.label-mono}`) as the "studio console" register for indices and technical copy
- Warm-grey achromatic scale; depth from surface lifts + hairline borders, never shadows
- Pill-shaped CTAs; sharp-to-soft radii (work cards stay nearly square)
- Motion-native rhythm — generous vertical air, big scale jumps

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): Warm near-black page background. Not pure black.
- **Surface** (`{colors.surface}`): Card and panel background, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Work tiles, hovered rows.
- **Ink** (`{colors.ink}`): Primary text — warm off-white, paper-toned.
- **Ink Strong** (`{colors.ink-strong}`): Pure white for max-emphasis headlines.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, mono labels.
- **Ink Muted** (`{colors.ink-muted}`): Disabled, timestamps, faint metadata.

### Accent
- **Vermilion** (`{colors.primary}`): The single accent — CTAs, hovered links, focus, selection.
- **Vermilion Hover** (`{colors.accent-hover}`): Brighter accent on hover.
- **Accent Soft** (`{colors.accent-soft}`): Low accent wash flattened over canvas.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Equals canvas.
- **Gray 800–600** (`{colors.gray-800}`, `{colors.gray-700}`, `{colors.gray-600}`): Surface tiers.
- **Gray 500** (`{colors.gray-500}`): Strong hairlines.
- **Gray 400–200** (`{colors.gray-400}`, `{colors.gray-300}`, `{colors.gray-200}`): Muted to bright text greys.

### Lines & Chrome
- **Border** (`{colors.border}`): Default hairline on cards and dividers.
- **Border Strong** (`{colors.border-strong}`): Inputs, ghost buttons.
- **Divider** (`{colors.divider}`): Faint section separators.

## Typography

### Font Family
- **Display / Body**: `Archivo` — a grotesque with a condensed-feeling cut that compresses beautifully at scale, with fallbacks `Arial Narrow, Arial, sans-serif`.
- **Monospace**: `Space Mono` — the studio-console voice for indices, labels, and technical captions, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 88px hero — full-bleed billboard headline |
| `display-large` | 64px major section openers |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, lead-ins |
| `card-title` | Work and feature cards |
| `body-large` | Intros, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, inline actions |
| `label-mono` | Section numbers, indices, technical labels |
| `caption-mono` | Fine print, timestamps |
| `micro` | Tiny uppercase tags |

### Principles
- **Compression at scale**: Display type uses extreme negative tracking (-3.5px at 88px), relaxing progressively toward zero at body sizes.
- **Two voices**: Archivo sans for everything expressive; Space Mono for the studio's technical/index register.
- **Weight discipline**: 400 (read), 500–600 (interact/announce), 700 (display only).
- **Air as rhythm**: Big scale jumps and generous leading mirror the studio's scroll-motion DNA.

## Layout

### Spacing System
Base unit is 8px. The scale jumps hard from `{spacing.xl}` (40px) to `{spacing.2xl}` (64px) to `{spacing.4xl}` (160px) — section gaps are cinematic.

### Grid & Container
- Max content width approximately 1440px with wide gutters
- Hero: full-bleed single column, headline pinned left
- Work grid: 2-column asymmetric tiles, often staggered
- Mono section numbers anchor the left margin as scroll markers

### Whitespace Philosophy
- **Cinematic air**: Massive vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections.
- **Compressed text, expanded space**: Tight headline tracking is offset by huge surrounding whitespace.
- **Dark gallery**: Separation comes from surface tiers and hairline borders, not boxes.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas color | Page background, text blocks |
| Surface (Level 1) | `{colors.surface}` + 1px `{colors.border}` | Cards, panels |
| Lifted (Level 2) | `{colors.surface-soft}` + 1px `{colors.border-strong}` | Hovered tiles, active rows |
| Focus | 2px `{colors.focus}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Locomotive avoids shadows almost entirely. On a near-black canvas, depth reads through subtle surface-tier shifts and crisp 1px hairlines. Hovered work tiles lift by changing surface tone and revealing the accent, not by casting a shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, work tiles |
| `xs` | 2px | Inline chips |
| `sm` | 4px | Inputs, small containers |
| `md` | 8px | Cards, list items |
| `lg` | 16px | Feature panels |
| `pill` | 9999px | CTAs, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly.

### Buttons
- **`button-primary`** — Vermilion fill, dark text, full pill. The default CTA.
- **`button-secondary`** — Transparent on canvas, off-white text, strong hairline border; border brightens to ink on hover.

### Badges & Labels
- **`badge`** — Surface chip, mono text, full pill, hairline border. Used for filters and meta tags.
- **`mono-label`** — Standalone Space Mono label in `{colors.ink-secondary}` for section indices.

### Cards
- **`card`** — Surface background, 1px border, 16px radius.
- **`card-work`** — Nearly square work tile (`{rounded.md}`), full-bleed image, zero padding. Hovers to `{colors.surface-soft}` with accent reveal.

### Inputs
- **`input`** — Surface background, strong hairline border; focus switches border to `{colors.focus}`.

### Navigation
- **`nav-bar`** — Canvas background, mono-label links, faint bottom divider. Accent CTA at right.

### Distinctive Components
- **Mono Section Index**: Space Mono numbers (e.g. `(01)`) pinned to the left margin as scroll markers.
- **Work Tile Hover**: Tile shifts surface tone and surfaces the vermilion accent on hover — motion, not shadow.

## Do's and Don'ts

### Do
- Use the warm near-black canvas (`{colors.background}`), not pure `#000000`
- Pair it with warm off-white ink (`{colors.ink}`) for the editorial feel
- Run display type huge with extreme negative tracking (-3.5px at 88px)
- Reserve `{colors.primary}` strictly for interaction — links, CTAs, focus, selection
- Use Space Mono for indices and technical labels
- Express depth through surface tiers and 1px hairlines

### Don't
- Don't use pure black for the canvas — the warmth is the point
- Don't spray the vermilion accent decoratively
- Don't add drop shadows for depth — use surface tiers
- Don't use positive tracking on display headlines
- Don't mix the mono voice into expressive body copy
- Don't soften work tiles into rounded cards — they stay nearly square

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales to ~44px, tight gutters |
| Tablet | 600–1024px | 2-column work grid begins, expanded padding |
| Desktop | 1024–1440px | Full asymmetric layout, max content width |
| Large Desktop | >1440px | Centered, generous margins, cinematic air |

### Touch Targets
- Pill CTAs use comfortable 14px vertical padding
- Mono nav links spaced for tap comfort
- Work tiles are large full-bleed tap zones

### Collapsing Strategy
- Hero: 88px → ~44px, negative tracking scales proportionally
- Navigation: mono links → hamburger overlay
- Work grid: asymmetric 2-column → single stacked column
- Section spacing: 160px → ~64px on mobile
- Mono section indices: left-margin → inline above headings

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: warm near-black `{colors.background}`
- Body text: off-white `{colors.ink}`
- Heading text: off-white `{colors.ink}` (or `{colors.ink-strong}` for max emphasis)
- Accent / CTA: vermilion `{colors.primary}`
- Border: hairline `{colors.border}`
- Focus ring: `{colors.focus}`

### Example Component Prompts
- "Create a hero on warm near-black `{colors.background}`. Headline at 88px Archivo weight 700, line-height 0.95, letter-spacing -3.5px, color `{colors.ink}`. A Space Mono section label `(01)` at 13px `{colors.ink-secondary}` above it. Vermilion pill CTA (`{colors.primary}`, dark text, 14px 28px padding)."
- "Design a work tile: `{colors.surface-soft}` background, 8px radius, full-bleed image, zero padding. On hover shift to a lifted surface and reveal a vermilion `{colors.primary}` label. Title at 22px Archivo weight 600, letter-spacing -0.6px."
- "Build a ghost button: transparent on canvas, off-white `{colors.ink}` text, 1px `{colors.border-strong}` border, full pill, 14px 28px padding; border brightens to `{colors.ink}` on hover."

### Iteration Guide
1. Keep the canvas warm — near-black, never pure black
2. Letter-spacing scales with size: -3.5px at 88px, -2.4px at 64px, -1.6px at 44px, 0 at body
3. The vermilion accent is interaction-only — if it's decorative, remove it
4. Depth = surface tiers + 1px hairlines, never shadows
5. Space Mono for indices and technical labels; Archivo for everything expressive

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Locomotive. Brand names and trademarks belong to their respective owners.