---
version: alpha
name: Depot Red
description: Mid concrete with signal red and amber, arranged as wayfinding: arrow plates, distances, and a fixed sign band.
meta:
  id: "theme-depot-red"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Which way, how far, how long.
  bestFor: Wayfinding and station displays, warehouse and depot systems, venue navigation, transit information
  avoidFor: Editorial, commerce, anything that needs a soft or premium voice
  defaultMode: light
  surfaceStyle: filled
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: grayscale
  motion:
    intensity: 2
    duration: 240ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Sign panels flip vertically on change, like a split-flap board."
  displayFont: Antonio
  displayKind: sans
  bodyFont: Lexend
  monoFont: Victor Mono
colors:
  background: "#ADACB6"
  foreground: "#000000"
  card: "#A6A5AE"
  card-foreground: "#000000"
  popover: "#A6A5AE"
  popover-foreground: "#000000"
  primary: "#780019"
  primary-foreground: "#FAF9FF"
  secondary: "#9E9CA8"
  secondary-foreground: "#000000"
  muted: "#9E9CA8"
  muted-foreground: "#3A3040"
  accent: "#813C00"
  accent-foreground: "#FAF9FF"
  destructive: "#790008"
  destructive-foreground: "#FAF9FF"
  border: "#908F99"
  input: "#908F99"
  ring: "#780019"
  chart-1: "#970022"
  chart-2: "#006368"
  chart-3: "#772E00"
  chart-4: "#006981"
  chart-5: "#7B003C"
colorsDark:
  background: "#29253E"
  foreground: "#FFFFFF"
  card: "#333239"
  card-foreground: "#FFFFFF"
  popover: "#333239"
  popover-foreground: "#FFFFFF"
  primary: "#E64954"
  primary-foreground: "#0D0C14"
  secondary: "#3E3D47"
  secondary-foreground: "#FFFFFF"
  muted: "#3E3D47"
  muted-foreground: "#B1A6BA"
  accent: "#EC8136"
  accent-foreground: "#0D0C14"
  destructive: "#DD574E"
  destructive-foreground: "#0D0C14"
  border: "#4C4B54"
  input: "#4C4B54"
  ring: "#E64954"
  chart-1: "#EA5E63"
  chart-2: "#009CA4"
  chart-3: "#EF712E"
  chart-4: "#008FAF"
  chart-5: "#F56C9B"
typography:
  display-lg:
    fontFamily: Antonio
    fontSize: 86px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Antonio
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.06
  headline-md:
    fontFamily: Antonio
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.18
  body-lg:
    fontFamily: Lexend
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Lexend
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.56
  body-sm:
    fontFamily: Lexend
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.44
  label-caps:
    fontFamily: Lexend
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: Victor Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
  numeral-xl:
    fontFamily: Victor Mono
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 0px
  md: 2px
  lg: 3px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 20px
  margin: 28px
  measure: 60ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 14px
  sign-plate:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 18px
  distance-row:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    typography: "{typography.headline-md}"
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Depot Red

## Overview

Depot Red is a wayfinding system rendered as software. Its unit is the sign
plate: a solid red rectangle carrying an arrow, a destination in condensed caps,
and a distance in mono. Plates stack into bands, and a band is fixed to the top
of the view the way a sign gantry is fixed above a concourse.

The ground is mid concrete — neither paper nor dark — which is what lets a red
plate read as an object mounted on a wall rather than a coloured div. The amber
is a service state: delayed, diverted, closed. It appears as a bar across the
plate and is the only thing permitted to interrupt one.

It suits stations, depots, warehouses and venues. It is emphatically not a
system for reading.

## Colors

Concrete, signal red, service amber.

- **Ground (concrete):** a mid neutral with the faintest violet cast. It is a
  wall.
- **Primary (signal red):** the sign plate. It fills large solid areas — this is
  a system where the primary is meant to occupy space, not to accent it.
- **Accent (burnt amber):** service disruption. A bar across a plate, plus the plate's
  text moving to amber. Nothing else in the system is amber.
- **Neutrals** are nearly achromatic so the red and amber stay unambiguous.
- Charts are duotone red and amber; the only quantities here are counts and
  delays.

## Typography

Antonio for display, Lexend for body, Victor Mono for distances and times.

- **Display:** Antonio at 86px, uppercase. Very condensed — a destination has to
  fit a plate at a readable size and condensed type is how signage has always
  solved that.
- **Headings:** uppercase everywhere. Body is sentence case.
- **Body:** Lexend at 15px, 1.56. It was designed for reading proficiency, and
  in a system this loud the body text needs to be the calmest thing on screen.
- **Distances and times:** Victor Mono, always with a unit, always right-aligned
  on a plate.

## Layout

A 12-column grid at 1360px with 20px gutters. The signature structure is the
**sign band**: a fixed 96px full-width strip of plates at the top of the view,
each plate carrying arrow, destination and distance, with the band scrolling
horizontally if there are more plates than fit.

Below the band, content sits in a plain two-column arrangement. Vertical rhythm
is 4px, and plates are exactly 96px or 48px tall — no other heights exist.

## Elevation & Depth

Filled and flat. Plates are solid colour with a 2px border in the foreground;
nothing casts a shadow because a sign is mounted flush.

Plates flip vertically when their content changes, which is the split-flap
behaviour real departure boards have and the only animation in the system.

## Shapes

Square plates — zero radius, always. Cards and modals get 2–4px so they are
distinguishable from plates, which is the only reason they have any radius at
all.

Photography is grayscale and used only as a full-bleed backdrop behind a band.

## Components

- **Sign plate:** the signature component. Red fill, 2px border, arrow glyph,
  uppercase destination in Antonio, mono distance right-aligned.
- **Sign band:** fixed 96px strip of plates at the top of a view, horizontally
  scrollable.
- **Service bar:** amber bar across a plate plus amber text. Reserved for
  disruption.
- **Distance row:** 48px, destination in headline-md, mono distance right.
- **Buttons:** red fill, zero radius, 14px padding, uppercase.

## Do's and Don'ts

- Do let the red fill large solid areas.
- Do keep plates at exactly 96px or 48px.
- Do put an arrow, a destination and a distance on every plate.
- Do reserve amber for service disruption.
- Don't round a plate.
- Don't set long text in this system.
- Don't add shadows; plates are mounted flush.