---
version: alpha
name: Rust Freight
description: Stone mid-tone ground, oxidised iron, one cold slate. Weathering rather than branding, with condensed caps and hard rules.
meta:
  id: "theme-rust-freight"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Stone, iron and a slate blue that came from somewhere else
  bestFor: Logistics and shipping, manufacturing, inventory, trades and field service
  avoidFor: Consumer wellness, luxury, anything that should feel new
  defaultMode: light
  surfaceStyle: outline
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: grayscale
  motion:
    intensity: 2
    duration: 130ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Short and mechanical. Rows shift by exactly their own height."
  displayFont: Oswald
  displayKind: sans
  bodyFont: Barlow
  monoFont: Courier Prime
colors:
  background: "#AEAAA5"
  foreground: "#000000"
  card: "#9F9B95"
  card-foreground: "#000000"
  popover: "#9F9B95"
  popover-foreground: "#000000"
  primary: "#631B13"
  primary-foreground: "#FEF9F3"
  secondary: "#8F8A82"
  secondary-foreground: "#000000"
  muted: "#8F8A82"
  muted-foreground: "#2D2017"
  accent: "#295171"
  accent-foreground: "#FEF9F3"
  destructive: "#6F0007"
  destructive-foreground: "#FEF9F3"
  border: "#837E77"
  input: "#837E77"
  ring: "#631B13"
  chart-1: "#76342B"
  chart-2: "#005D69"
  chart-3: "#693303"
  chart-4: "#006283"
  chart-5: "#652432"
colorsDark:
  background: "#201914"
  foreground: "#F6E9E0"
  card: "#2A231E"
  card-foreground: "#F6E9E0"
  popover: "#2A231E"
  popover-foreground: "#F6E9E0"
  primary: "#CF7667"
  primary-foreground: "#140B05"
  secondary: "#382F27"
  secondary-foreground: "#F6E9E0"
  muted: "#382F27"
  muted-foreground: "#A5978B"
  accent: "#77A4CA"
  accent-foreground: "#140B05"
  destructive: "#E86156"
  destructive-foreground: "#140B05"
  border: "#473E37"
  input: "#473E37"
  ring: "#CF7667"
  chart-1: "#D17F72"
  chart-2: "#27A0B2"
  chart-3: "#D48F61"
  chart-4: "#3592B9"
  chart-5: "#E08C99"
typography:
  display-lg:
    fontFamily: Oswald
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Oswald
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Oswald
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Barlow
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Barlow
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Barlow
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Barlow
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Courier Prime
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Courier Prime
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 0px
  md: 2px
  lg: 2px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 18px
  margin: 24px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 18px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Rust Freight

## Overview

Rust Freight stands on stone — a neutral mid-tone at 74% lightness that is
neither paper nor panel. Against it, oxidised iron does the work of a primary and
a cold slate blue does the work of everything imported from outside the yard:
system messages, links, anything not physical.

The type is condensed uppercase over a workhorse sans, quantities are set in a
typewriter mono, and every region is outlined at 2px. It is built for screens
that are read standing up, in bad light, by someone holding something.

Personality: worn, practical, legible at arm's length.

## Colors

Stone, iron, slate.

- **Ground (#AEAAA5):** Stone mid-tone. Nothing is lighter than this except
  paper labels, which are a card fill one step up.
- **Primary (#631B13):** Oxidised iron. Deep, low-chroma, and used as a fill for
  the single most consequential action and as the 4px bar on an active row.
- **Accent (#295171):** Slate blue. Anything that came from a system rather than
  from the yard — timestamps, sync state, links.
- **Ink:** near-black, warm.
- Charts are duotone: iron and slate, and nothing in between. Physical versus
  informational is the only distinction this product makes.

## Typography

Oswald for headings, Barlow for body, Courier Prime for every identifier.

- **Display:** Oswald at 72px, uppercase, condensed. It fits a long
  facility name in a narrow column, which is the actual reason it is here.
- **Headings:** uppercase Oswald at every level.
- **Body:** Barlow at 15px, 1.58, 64ch. Barlow's slightly squared terminals keep
  it readable at low contrast.
- **Identifiers:** Courier Prime. Container numbers, order IDs and weights are
  typewriter mono, because they get transcribed onto paper.

## Layout

A 12-column grid at 1400px with 18px gutters. Lists dominate: a manifest is a
full-width table with a fixed left rail of 220px holding filters, and rows are
44px tall so they can be tapped with a glove on.

Vertical rhythm is 4px. Groups are separated by a 2px rule and a 24px gap.

## Elevation & Depth

No shadows. Every region is a 2px outlined box on the stone. A card is one tonal
step up from the ground — a paper label on concrete — with the same 2px outline.
Hover darkens the outline; it never lifts.

## Shapes

Effectively square: 2px on cards and buttons, 0 on badges and inputs, 4px on
modals. The 2px border is the dominant shape signal.

Images are grayscale and hard-cropped. Photographs of objects are shown against
the stone with no border; photographs of documents get a 2px outline.

## Components

- **Buttons:** iron fill, stone-white text, 2px radius, 12px padding, 2px
  border. Secondary buttons are a card fill with an iron border.
- **Manifest rows:** 44px tall, mono identifier on the left, description in
  Barlow, slate timestamp on the right, 4px iron bar when active.
- **Status pills:** square, 2px border, no fill, uppercase Oswald at 10.5px.
- **Inputs:** zero radius, 2px border, card fill, iron focus outline.
- **Tables:** 2px rules between groups and 1px inside, mono right-aligned
  numerics, no zebra.

## Do's and Don'ts

- Do keep rows at least 44px tall.
- Do set every identifier in the typewriter mono.
- Do use slate for anything the system said and iron for anything a person did.
- Don't put a shadow on the stone.
- Don't use colour photography.
- Don't reduce the border below 2px.
- Don't use a third hue for status — use the two you have plus the word.