---
version: alpha
name: Field Survey
description: Olive drab with an electric survey blue that could not occur in nature, and a grid reference on every panel.
meta:
  id: "theme-field-survey"
  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: Every panel knows its grid square.
  bestFor: Field operations, logistics and dispatch, mapping and GIS, inspection tooling, incident command
  avoidFor: Consumer apps, editorial, anything warm or informal
  defaultMode: dark
  surfaceStyle: outline
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: grayscale
  motion:
    intensity: 1
    duration: 120ms
    ease: "cubic-bezier(0.4, 0, 1, 1)"
    signature: "State changes are instant and stepped. Nothing eases; things either are or are not."
  displayFont: Big Shoulders Display
  displayKind: sans
  bodyFont: Work Sans
  monoFont: Noto Sans Mono
colors:
  background: "#AFB099"
  foreground: "#000000"
  card: "#A1A298"
  card-foreground: "#000000"
  popover: "#A1A298"
  popover-foreground: "#000000"
  primary: "#005A97"
  primary-foreground: "#FAFBF2"
  secondary: "#939487"
  secondary-foreground: "#000000"
  muted: "#939487"
  muted-foreground: "#232E17"
  accent: "#005320"
  accent-foreground: "#FAFBF2"
  destructive: "#A1191A"
  destructive-foreground: "#FAFBF2"
  border: "#898A7E"
  input: "#898A7E"
  ring: "#005A97"
  chart-1: "#0063A6"
  chart-2: "#8A38BA"
  chart-3: "#A70029"
  chart-4: "#866D00"
  chart-5: "#006050"
colorsDark:
  background: "#272714"
  foreground: "#FFFFFF"
  card: "#32322C"
  card-foreground: "#FFFFFF"
  popover: "#32322C"
  popover-foreground: "#FFFFFF"
  primary: "#009BFE"
  primary-foreground: "#0E0E06"
  secondary: "#404137"
  secondary-foreground: "#FFFFFF"
  muted: "#404137"
  muted-foreground: "#ABAEA7"
  accent: "#6DEF8C"
  accent-foreground: "#0E0E06"
  destructive: "#EC655A"
  destructive-foreground: "#0E0E06"
  border: "#515249"
  input: "#515249"
  ring: "#009BFE"
  chart-1: "#27A0FF"
  chart-2: "#B667EA"
  chart-3: "#FF6E75"
  chart-4: "#A48600"
  chart-5: "#00C6A7"
typography:
  display-lg:
    fontFamily: Big Shoulders Display
    fontSize: 76px
    fontWeight: 700
    lineHeight: 0.96
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Big Shoulders Display
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.06
  headline-md:
    fontFamily: Big Shoulders Display
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.2
  body-lg:
    fontFamily: Work Sans
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Work Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.56
  body-sm:
    fontFamily: Work Sans
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.44
  label-caps:
    fontFamily: Work Sans
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.2em
  label-mono:
    fontFamily: Noto Sans Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Noto Sans Mono
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 1px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 16px
  margin: 24px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 12px
  panel-grid:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 16px
  ref-tag:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Field Survey

## Overview

Field Survey is built for people coordinating things that are physically
somewhere. Its organising idea is the grid reference: every panel carries a
two-letter, two-digit tag in its top-left corner, and those tags are referred to
in text, in logs and out loud. A person can say "check DK-07" and mean an exact
region of the screen.

The palette is olive drab with a survey blue that could not occur in a landscape
— the same trick as high-visibility marking paint, where the point of the colour
is that nothing natural is that colour.

It suits dispatch, inspection and incident command. It is deliberately cold and
formal, and it is the wrong system for anything a consumer touches.

## Colors

Drab, survey blue, and a marking green.

- **Ground (olive drab):** mid-tone in light mode, mid-dark in dark mode.
  Neither is comfortable, which is correct; this is equipment.
- **Primary (survey blue):** every interactive thing and every selection. Its
  chroma is very high against a very low-chroma page, so a single selected cell
  is visible across the room.
- **Accent (marking green):** the annotation. Notes, flags, hand-added marks —
  as a 3px bar at the left of whatever was marked.
- **Neutrals** carry almost no chroma; the drab is in the ground alone.
- Charts are polychrome with 1px strokes and no fills.

## Typography

Big Shoulders Display for headings, Work Sans for body, Noto Sans Mono for
references.

- **Display:** Big Shoulders Display at 76px, uppercase. Extremely condensed —
  it will take a long place name across a header without wrapping, which is the
  only reason to use a face this narrow.
- **Headings:** uppercase at every level.
- **Body:** Work Sans at 14px, 1.56. Plain and unfussy; the display face is
  already doing something extreme.
- **References:** Noto Sans Mono at 12px, 0.02em. Grid squares, coordinates,
  unit numbers, times.

## Layout

A 12-column grid at 1440px with tight 16px gutters and a 24px margin. The
signature structure is the **reference grid**: the working area is divided into
labelled cells by 1px rules, each cell tagged in its top-left with a mono grid
reference, so the layout itself is addressable.

Rows in a dispatch list are 30px. Vertical rhythm is 4px throughout.

## Elevation & Depth

Outline, with a heavy 2px frame on anything active and 1px on everything else.
There are no shadows and no fills except on selection, where the survey blue
fills the whole cell.

State changes are instant — 120ms, linear-out. Nothing in this system eases,
because eased motion suggests something is being considered and here things
either are or are not.

## Shapes

Zero radius everywhere, including badges, inputs and avatars. 1px on modals only
so their corners do not disappear into the frame.

Photography is grayscale, always inside a referenced cell, and always of a
place.

## Components

- **Reference cell:** the signature component. 1px ruled cell with a mono grid
  tag top-left; selected cells fill with survey blue.
- **Grid tag:** two letters, a hyphen, two digits. Present on every panel in a
  full view.
- **Dispatch row:** 30px, mono unit number in a fixed 72px column, status in
  uppercase, green bar if annotated.
- **Buttons:** blue fill, zero radius, 12px padding, uppercase.
- **Inputs:** 2px border, zero radius, blue fill on focus rather than a ring.

## Do's and Don'ts

- Do give every panel a grid reference and use those references in copy.
- Do keep the blue at maximum chroma against the drab.
- Do use instant, stepped state changes.
- Do set every reference and coordinate in the mono face.
- Don't round anything.
- Don't use the green for anything except human annotation.
- Don't ease transitions.