---
version: alpha
name: Reed Bed
description: Mid slate-blue water with two greens — one for the bank, one for the reading — and every measurement drawn against its band.
meta:
  id: "theme-reed-bed"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:15+09:00"
  updatedAt: "2026-09-02T00:58:15+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: A number without its band is not a reading.
  bestFor: Water quality and catchment monitoring, environmental reporting, conservation trusts, field science, regulatory returns
  avoidFor: Commerce, consumer apps, anything that needs a bright first impression
  defaultMode: light
  surfaceStyle: ruled
  accentUse: bar
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 1
    duration: 240ms
    ease: "cubic-bezier(0.33, 1, 0.68, 1)"
    signature: "Bands grow from their own baseline outward. A level never slides in from the side, because that implies a direction the data does not have."
  displayFont: Petrona
  displayKind: serif
  bodyFont: Asap
  monoFont: Cousine
colors:
  background: "#9DADBC"
  foreground: "#000000"
  card: "#9C9D9E"
  card-foreground: "#000000"
  popover: "#9C9D9E"
  popover-foreground: "#000000"
  primary: "#395531"
  primary-foreground: "#F9FAFB"
  secondary: "#8D8F90"
  secondary-foreground: "#000000"
  muted: "#8D8F90"
  muted-foreground: "#1A2832"
  accent: "#174D00"
  accent-foreground: "#F9FAFB"
  destructive: "#B6312D"
  destructive-foreground: "#F9FAFB"
  border: "#838486"
  input: "#838486"
  ring: "#395531"
  chart-1: "#537749"
  chart-2: "#2B8186"
  chart-3: "#536191"
  chart-4: "#9D6786"
  chart-5: "#7B5327"
colorsDark:
  background: "#122739"
  foreground: "#FBFEFF"
  card: "#2D3033"
  card-foreground: "#FBFEFF"
  popover: "#2D3033"
  popover-foreground: "#FBFEFF"
  primary: "#84A47C"
  primary-foreground: "#0A0E12"
  secondary: "#373C40"
  secondary-foreground: "#FBFEFF"
  muted: "#373C40"
  muted-foreground: "#91AABA"
  accent: "#6DC652"
  accent-foreground: "#0A0E12"
  destructive: "#F0685D"
  destructive-foreground: "#0A0E12"
  border: "#464A4D"
  input: "#464A4D"
  ring: "#84A47C"
  chart-1: "#84AA79"
  chart-2: "#51A2A8"
  chart-3: "#93A4D9"
  chart-4: "#AE7897"
  chart-5: "#CFA375"
typography:
  display-lg:
    fontFamily: Petrona
    fontSize: 50px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Petrona
    fontSize: 29px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Petrona
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.34
  body-lg:
    fontFamily: Asap
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Asap
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Asap
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Asap
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.15em
  label-mono:
    fontFamily: Cousine
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.45
  numeral-xl:
    fontFamily: Cousine
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  xl: 8px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 18px
  margin: 28px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 11px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 11px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 20px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Reed Bed

## Overview

Reed Bed reports on water. Catchments, outfalls, bathing beaches, boreholes —
places where a number has a legal threshold attached and the interesting
question is never the number alone but where it sits against that threshold.

So the system's rule is that **a reading is always drawn against its band**.
There is no bare figure anywhere in this library: every value renders as a
horizontal level with the permitted range marked behind it. A table of numbers
without bands is faster to build and it is the thing this system exists not to
produce, because it makes a reader do the comparison in their head and they get
it wrong.

The ground is a mid slate-blue that does not pretend to be paper. It suits
environmental reporting and field science. It is wrong for commerce.

## Colors

A mid ground so levels can be lighter *and* darker than the page.

- **Ground:** mid slate-blue. Cards go up toward the light, wells and footers
  go down. Because the ground is not white, a filled band can be paler than the
  page and still read as a mark.
- **Primary (deep green):** the bank — structure, navigation, submit. Muted on
  purpose; it is the frame, not the subject.
- **Accent (bright green):** the **reading**. It appears as a bar: the filled
  portion of a level, the trace on a chart, the mark on a strip. Solved to 3:1
  against ground and card.
- **Destructive:** exceedance. A value outside its band switches its bar to
  destructive and nothing else on the row changes.
- Charts are polychrome, because a catchment genuinely measures unrelated
  quantities — nitrate, phosphate, turbidity, flow — and pretending they are one
  family would be a lie.

## Typography

Petrona for headings, Asap for body, Cousine for every measured value.

- **Display:** Petrona at 600, 50px. A quiet transitional serif; it gives the
  reports a published feel without becoming decorative.
- **Body:** Asap at 14.5px, 1.6, 68ch. It has slightly narrow forms, which is
  useful in a system with a lot of column-heavy pages.
- **Cousine** for readings, grid references, sample IDs and dates. It is metric-
  compatible with Courier and its figures are unambiguous at 12.5px in a table.
- Units are always set in body-sm next to the mono figure, never inside it. The
  figure is data; the unit is a label.

## Layout

**The level, everywhere.** The atomic component is a 220px horizontal strip: a
neutral track, the permitted band drawn as a filled region, a 3px mark for the
current value, and the figure in Cousine to its right. Every screen — dashboard,
table, report, detail, print — is built from this one thing at three sizes.

Pages are ruled, not carded. Sections separate with 1px hairlines and 24px of
space; the boxed card is reserved for a single site's summary and appears at
most once per screen.

A 12-column grid at 1360px with 18px gutters. Reports print: every layout
degrades to a two-column A4 with the bands intact.

## Elevation & Depth

Tonal, both directions, because the ground is a mid-tone. A card is lighter than
the page; a well, a comparison strip or a disabled site is darker. Shadows are
soft and appear on exactly one element at a time — the open filter panel.

Bands grow outward from their own baseline. A level never slides in from the
left edge, because sliding implies a direction, and a concentration does not
arrive from anywhere.

## Shapes

Small radii — 2px on controls, 4px on cards, 6px on panels. Rules at 1px are
the main structural device.

Photography is cool-graded: reed beds, weirs, gauge boards, grey estuary light.
Never a stock scientist in a lab coat holding a beaker.

## Components

- **Level strip:** neutral track, accent-filled band region at 30% alpha, 3px
  current mark, figure in Cousine at the right, unit in body-sm. This is the
  component; everything else arranges it.
- **Site row:** name, grid reference in mono, three level strips inline (the
  three determinands that matter for that site class), last-sampled date.
- **Exceedance:** the mark and the figure both go destructive. The band region
  stays accent, because the band did not change.
- **Report header:** Petrona title, mono catchment code, date range, and a
  ruled metadata block of four label/value pairs.
- **Buttons:** deep green fill, 2px radius. Ghost buttons are foreground text
  with a 1px bottom rule.

## Do's and Don'ts

- Do draw every reading against its band, on every surface including print.
- Do keep the ground a mid-tone and move surfaces in both directions from it.
- Do set measured values in Cousine and units in the body face.
- Don't render a bare number in a table without its level strip.
- Don't use the accent as text; it is a 3:1 bar.
- Don't animate a level in from the side.
- Don't box everything — this system is ruled, and the card is rationed.