---
version: alpha
name: Harbour Crane
description: Teal water under amber steel: a hard tile field where every tile is one of exactly three heights and nothing spans a fraction.
meta:
  id: "theme-harbour-crane"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:16+09:00"
  updatedAt: "2026-09-02T00:58:16+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: A container yard, not a masonry wall.
  bestFor: Port and terminal operations, freight and yard management, fleet dispatch, warehouse control rooms
  avoidFor: Editorial, marketing sites, anything with variable-length content that must not be truncated
  defaultMode: dark
  surfaceStyle: filled
  accentUse: fill
  caseStyle: all-upper
  borderWidth: 2px
  imageTreatment: cool
  motion:
    intensity: 2
    duration: 180ms
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "Tiles snap between the three heights. There is no intermediate height, so there is no easing through one."
  displayFont: Archivo Narrow
  displayKind: sans
  bodyFont: Barlow
  monoFont: Source Code Pro
colors:
  background: "#ABCECC"
  foreground: "#000000"
  card: "#A3BCBA"
  card-foreground: "#000000"
  popover: "#A3BCBA"
  popover-foreground: "#000000"
  primary: "#855900"
  primary-foreground: "#F2FDFC"
  secondary: "#8BADAA"
  secondary-foreground: "#000000"
  muted: "#8BADAA"
  muted-foreground: "#2E3E41"
  accent: "#A66F00"
  accent-foreground: "#001110"
  destructive: "#B6322D"
  destructive-foreground: "#F2FDFC"
  border: "#829F9D"
  input: "#829F9D"
  ring: "#855900"
  chart-1: "#A56E00"
  chart-2: "#2F82E3"
  chart-3: "#847300"
  chart-4: "#6F7EED"
  chart-5: "#A35300"
colorsDark:
  background: "#001E1D"
  foreground: "#D9EFF2"
  card: "#122826"
  card-foreground: "#D9EFF2"
  popover: "#122826"
  popover-foreground: "#D9EFF2"
  primary: "#D99300"
  primary-foreground: "#001110"
  secondary: "#153533"
  secondary-foreground: "#D9EFF2"
  muted: "#153533"
  muted-foreground: "#839DA2"
  accent: "#B37900"
  accent-foreground: "#001110"
  destructive: "#FB7267"
  destructive-foreground: "#001110"
  border: "#274341"
  input: "#274341"
  ring: "#D99300"
  chart-1: "#DA9300"
  chart-2: "#4A9BFE"
  chart-3: "#C5AD00"
  chart-4: "#7685F5"
  chart-5: "#FF9440"
typography:
  display-lg:
    fontFamily: Archivo Narrow
    fontSize: 54px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Archivo Narrow
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.14
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Archivo Narrow
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.005em
  body-lg:
    fontFamily: Barlow
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Barlow
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.52
  body-sm:
    fontFamily: Barlow
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.45
  label-caps:
    fontFamily: Barlow
    fontSize: 10.5px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: Source Code Pro
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Source Code Pro
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 2px
  md: 2px
  lg: 3px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  gutter: 12px
  margin: 20px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 10px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 10px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 14px
  badge-label:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Harbour Crane

## Overview

Harbour Crane runs a yard. Its structural rule is stolen directly from one: the
whole interface is a four-column tile field where **every tile is exactly one of
three heights** — 1u, 2u or 4u, where u is 88px — and nothing occupies a
fraction of a unit.

That constraint is doing real work. A masonry dashboard where every card is as
tall as its content produces a page that reflows whenever a number gets longer,
and operators lose spatial memory of where things are. Quantising the heights
means a tile's position is stable across shifts. Content that will not fit its
unit gets truncated with a mono ellipsis, and that is a deliberate trade: a
predictable layout is worth more here than a complete sentence.

Teal ground, amber steel. It suits terminals, freight and dispatch. It is wrong
for editorial, where truncation is an insult.

## Colors

Two lightnesses of one hue for the machinery, and a teal room to put it in.

- **Ground:** teal. Cool, mid-dark in the default mode, deliberately reminiscent
  of water at a quay under sodium light.
- **Primary (amber):** steel — cranes, gantries, the moving parts. Every action
  button is amber because in this system the actions are all "move something".
- **Accent:** the same amber, a little darker, used as a **fill** on status
  tiles and count badges. Primary and accent being one hue is the point: the
  yard is one colour and the water is another.
- **Neutrals** are teal-tinted. There is no true grey anywhere.
- Charts are duotone: amber against teal, one series and one reference. A
  terminal chart with five series is a report, and reports live elsewhere.

## Typography

Archivo Narrow for headings, Barlow for body, Source Code Pro for every code.

- **Display:** Archivo Narrow at 700. Condensed, because a tile is 300px wide and
  a vessel name is long. This is the only theme in the library using a condensed
  display face and it is doing so for a measurable reason.
- **Body:** Barlow at 14px, 1.52. Slightly narrow, grotesque, built for signage.
- **Source Code Pro** carries container numbers, ISO codes, bay-row-tier
  positions and ETAs. Container numbers are eleven characters with a check digit
  and they must be monospaced or they cannot be checked by eye.
- **caseStyle is all-upper** — every label, tab, button and column header in
  this system is uppercase. It is a control room; it shouts.

## Layout

**Four columns, three heights.** A 4-column tile field at 1440px with 12px
gutters. Tiles are 1u (88px), 2u (184px) or 4u (376px) tall — never anything
else, never auto. A tile spans 1, 2 or 4 columns.

The yard map is a 4u tile and is always in the top-left position on the
operations screen. Its position is fixed across every configuration, because an
operator reaches for it without looking.

Density is high: 14px padding, 12px gutters, 20px margins, 32px rows in tables.
This system is allowed to be tighter than anything else in the library.

## Elevation & Depth

Filled tiles with 2px borders — the thickest border weight in the library. The
border is the structure; shadows appear only on the dispatch drawer.

Tiles snap between heights on state change with a 180ms hard-out ease. Because
there is no intermediate height, there is nothing to ease through — the tile is
1u and then it is 2u.

## Shapes

Almost square: 2px throughout. Borders at 2px in the primary or accent for
selected state, in border for everything else.

Photography is cool-graded and industrial: gantry cranes, stacked boxes at
night, wet quayside concrete. It appears on marketing and auth screens only —
the operations screens have no images at all.

## Components

- **Tile:** 2px border, 14px padding, uppercase label-caps header, one numeral-xl
  figure or one small table. Content that overflows its unit truncates with a
  mono ellipsis; it does not scroll and it does not grow.
- **Container ID:** Source Code Pro, 11 characters, with the check digit in
  accent. Never wrapped, never abbreviated.
- **Yard position:** bay-row-tier as three mono groups separated by thin spaces,
  in a bordered chip.
- **Move queue:** 32px rows, uppercase, amber left border on the active move.
- **Buttons:** amber fill, 2px radius, uppercase label at 10.5px. Ghost buttons
  carry a 2px border rather than none.

## Do's and Don'ts

- Do quantise every tile to 1u, 2u or 4u.
- Do keep the yard map in the fixed top-left position.
- Do set container numbers in Source Code Pro and highlight the check digit.
- Don't let a tile size itself to its content.
- Don't use a third hue; the yard is amber and the water is teal.
- Don't put a photograph on an operations screen.
- Don't use sentence case for a label.