---
name: Locomotive
description: "The site is worth including as a masterclass in using typography and stark contrast to create a premium, expressive agency aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#E05F15"
  neutral: "#000000"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 110px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 70px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 26px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A digital-first design agency showcasing work through high-contrast, typography-driven layouts.

*A premium design studio balancing editorial elegance with bold technical precision.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#E05F15`)** — uses `accent` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Open and spacious layout with generous padding (40px vertical) and consistent gaps (20px) between elements.

## Elevation & Depth

- Borders: Minimal but precise 2px solid borders used for separators and structured labels.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Text-based navigation links with subtle directional arrows or custom typography, no traditional button styling.
- **card:** Minimal or non-existent in the hero; relies on large, immersive imagery instead of contained cards.
- **hero:** Full-bleed or dominant photographic/video background with overlapping large-scale serif typography.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```