---
version: alpha
name: Herbarium Plate
description: A khaki mounting board with a specimen green brighter than the page it sits on, and hairline plate rules.
meta:
  id: "theme-herbarium-plate"
  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: Mounted, labelled, and left alone.
  bestFor: Catalogues and collections, natural science, archives, plant and food brands, museum interfaces
  avoidFor: Fast commerce, developer tooling, anything with a live feed
  defaultMode: light
  surfaceStyle: outline
  accentUse: bar
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 1
    duration: 220ms
    ease: "cubic-bezier(0.2, 0, 0.1, 1)"
    signature: "Plates cross-fade in place. Nothing enters or leaves the frame."
  displayFont: Young Serif
  displayKind: serif
  bodyFont: Literata
  monoFont: Cousine
colors:
  background: "#C5BFA9"
  foreground: "#000000"
  card: "#B7B6B4"
  card-foreground: "#000000"
  popover: "#B7B6B4"
  popover-foreground: "#000000"
  primary: "#007608"
  primary-foreground: "#FBFAF8"
  secondary: "#AEADAA"
  secondary-foreground: "#000000"
  muted: "#AEADAA"
  muted-foreground: "#414134"
  accent: "#005C74"
  accent-foreground: "#FBFAF8"
  destructive: "#AC2724"
  destructive-foreground: "#FBFAF8"
  border: "#A09F9D"
  input: "#A09F9D"
  ring: "#007608"
  chart-1: "#007D09"
  chart-2: "#008163"
  chart-3: "#006D6D"
  chart-4: "#717E00"
  chart-5: "#6B5500"
colorsDark:
  background: "#1B1601"
  foreground: "#E5E4CC"
  card: "#222018"
  card-foreground: "#E5E4CC"
  popover: "#222018"
  popover-foreground: "#E5E4CC"
  primary: "#71FF6D"
  primary-foreground: "#100D03"
  secondary: "#2E2B1F"
  secondary-foreground: "#E5E4CC"
  muted: "#2E2B1F"
  muted-foreground: "#979478"
  accent: "#00A0C8"
  accent-foreground: "#100D03"
  destructive: "#FFCDC7"
  destructive-foreground: "#100D03"
  border: "#3B392E"
  input: "#3B392E"
  ring: "#71FF6D"
  chart-1: "#61EA5E"
  chart-2: "#00DEAC"
  chart-3: "#00EEEE"
  chart-4: "#AEC200"
  chart-5: "#FFD342"
typography:
  display-lg:
    fontFamily: Young Serif
    fontSize: 58px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Young Serif
    fontSize: 31px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Young Serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.32
  body-lg:
    fontFamily: Literata
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.72
  body-md:
    fontFamily: Literata
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.68
  body-sm:
    fontFamily: Literata
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.55
  label-caps:
    fontFamily: Literata
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.22em
  label-mono:
    fontFamily: Cousine
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Cousine
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 1px
  xl: 2px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 26px
  xl: 52px
  gutter: 24px
  margin: 36px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 12px
  card-plate:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 20px
  label-tag:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Herbarium Plate

## Overview

Herbarium Plate treats every item as a specimen: mounted on a board, ruled off,
and labelled in the bottom-right corner. The ground is a khaki mid-tone —
mounting card, not paper — and the cards sitting on it are *lighter*, which
makes each one read as a sheet pinned to a board rather than a panel floating
over a page.

Against that muted board sits a green that is genuinely brighter than the page.
That inversion is the point: in a real herbarium the specimen is the only living
thing in the frame, and here it is the only saturated one.

It suits collections, catalogues and archives. It is wrong wherever things move
— nothing in this system is designed to update while you are looking at it.

## Colors

Board, specimen, and a cold determination blue.

- **Ground (khaki):** mounting card. Mid-tone, faintly warm, deliberately
  unlovely so that everything placed on it looks deliberate.
- **Card:** lighter than the ground. Sheets sit *on* the board.
- **Primary (specimen green):** the item itself — its name, its selected state,
  its call to action. High chroma against a low-chroma page.
- **Accent (blue):** determination and classification. Taxonomy, dates,
  provenance. Used as a 3px left bar, never as a fill.
- Charts are analogous in the green family, so a chart looks like a set of
  related measurements, which is what it always is here.

## Typography

Young Serif for display, Literata for reading, Cousine for the label.

- **Display:** Young Serif at 58px. Heavy, blunt, slightly archaic — a species
  name at the top of a plate.
- **Body:** Literata at 15px, 1.68, 64ch. It was drawn for long reading on
  screens and this system asks for exactly that.
- **The label:** Cousine at 12px with 0.02em tracking, always in the lower right
  of a plate, always carrying accession number, collector and date.
- **Labels elsewhere:** uppercase at 0.22em — very wide, very small. They read
  as printed captions.

## Layout

A 12-column grid at 1340px with 24px gutters and a generous 36px margin. The
signature structure is the **plate**: a bordered rectangle with the image
occupying the upper two-thirds, a hairline rule, and a three-part caption block
beneath — common name, Latin name, accession label.

Plates tile in a 3-up grid and never reflow into a masonry; a herbarium is
uniform by definition.

## Elevation & Depth

Outline only. Every plate is a 1px border on a lighter card, with no shadow
anywhere in the system. Depth comes from the card being lighter than the board.

Transitions cross-fade in place. A plate never slides — it is pinned.

## Shapes

Zero radius everywhere except 1px on the plate itself. Squareness is doing real
work: a rounded corner would make the plate look like a card in a feed.

Photography is warm-treated and always full-width inside the plate, never
cropped to a circle and never bled off the edge.

## Components

- **Plate:** 1px bordered card, image top, hairline rule, caption block with
  common name in display, Latin name in body italic, accession in mono.
- **Accession label:** mono, lower right, 12px. Present on every plate. It is
  the component that makes the system legible as a collection.
- **Buttons:** green fill, zero radius, 12px padding. Secondary is a 1px border
  with no fill.
- **Taxonomy rail:** left bar in accent blue, 3px, with indented mono levels.
- **Inputs:** square, 1px, green focus ring.

## Do's and Don'ts

- Do keep cards lighter than the board.
- Do give every plate an accession label in mono.
- Do let the green be the brightest thing on the page.
- Do use the blue as a bar and nowhere else.
- Don't round anything above 1px.
- Don't use a masonry grid; plates are uniform.
- Don't add a shadow to lift a plate — lift it with lightness.