Herbier

# Herbier

## Philosophy

Herbier is a herbarium sheet used as an interface. The one real object is a sheet of cotton-rag board on a pale stone table: a pressed Carthusian pink strapped down with frayed, gummed linen, a tissue guard hinged over its flowers, and a label whose field names are printed and whose values are typed. Lift the tissue and the milky rose underneath comes up carmine. Everything around the sheet is small, flat and precise: names in Cormorant Garamond, copy in Instrument Sans, typed values in Cutive Mono, and one sage green for the action.

### Values

- One object is the interface: the herbarium sheet, rendered as a real thing with a use, and it is the only raised thing in a view.
- Material belongs to the object: cotton-rag board with tooth, woven linen with frayed ends and a gum halo, kozo tissue with fibres and a deckled edge. The page around it is flat colour.
- Depth is a verb. The tissue lifts only while you point at the sheet; the sheet lays down once on arrival.
- One hue family and one action green. Amber marks the one live state (in the press); carmine lives only in the plant.
- What the catalogue knows, the sheet says: accession, collector, locality and determination are real data, typed onto a printed label.
- Type is small and quiet with one big light word per view.

### Anti-Values

- Watercolour washes or pigment blooms behind modules.
- Pressed-leaf silhouettes clipped into corners as decoration.
- Cards, borders, rules and chips; states are words, not pills.
- Decorative accession codes and plate numbers as ornament (FOLIO HRB, PLATE 03).
- A second raised thing in a view, or the whole sheet twice on one page.
- Warm cream page grounds; the table is a pale green-grey stone and the sheet is white.

### Visual Character

- The sheet stands on a pale green-grey stone table (#E7EAE3) with table on every side: cotton-rag white (#FFFFFF) with a faint tooth, turned one degree as if laid by hand, a page block of two thinner sheets along its right and bottom edges, and a three-layer shadow tinted from the forest ink and press amber that falls down and to the right.
- A pressed Carthusian pink, photographed and cut out with its own alpha, is strapped to the sheet with three strips of woven linen (#EDE4CF) with frayed ends and an amber gum halo (#C4A05C).
- A kozo tissue guard, hinged on a linen strip at the left, lies over the flower heads at 46% milky white with long fibres, three soft wrinkles, a deckled lower edge that casts a hairline shadow across the flowers, and a free corner that curls up on a diagonal.
- The label sits in the lower right of the sheet: the binomial in sage-green italic Cormorant (#3F6448), a note in Instrument Sans, then italic printed field names with values typed in Cutive Mono over a printed rule.
- Around the object everything is flat: one green pill action per view, state words in colour instead of chips, lists and ledgers straight on the table, and one big light Cormorant word.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#E7EAE3` |
| surface | `#FFFFFF` |
| surface_2 | `#DBDFD8` |
| text | `#26322B` |
| copy | `#3B473F` |
| muted | `#556057` |
| border | `#CDD3C8` |
| accent | `#3F6448` |
| on_accent | `#FFFFFF` |
| success | `#2F6B45` |
| warning | `#735619` |
| error | `#9B3A34` |
| info | `#2F5F6B` |
| linen | `#EDE4CF` |
| gum | `#C4A05C` |
| shade | `#3D3D26` |

### Derived

- **Surface 2**: color-mix(in srgb, var(--bg) 94%, var(--text))
- **Copy**: color-mix(in srgb, var(--text) 55%, var(--muted))
- **Shade**: color-mix(in srgb, var(--text) 70%, var(--warning))
- **Note**: Only the eleven role colours and the two strap materials (linen, gum) are literal. surface_2, copy and shade are mixed from the roles in CSS, so a palette swap carries the quiet pill, the copy and every shadow with it. Carmine is never a token: it lives only in the pressed plant.

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Instrument Sans
- **Mono Font**: Cutive Mono
- **Heading Weight**: 300
- **Body Weight**: 400
- **Button Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on Cormorant display; 0 on body and mono
- **Line Height**: 1.6
- **Base Size**: 17px
- **Scale**: ["14.5px","17px","21px","28px","44px","72px","96px"]
- **Roles**: {"display":"Cormorant Garamond 300 for the one big light word of a view (72 or 96px hero, 44px section titles); 500 italic for Latin binomials; 500 roman for families; 600 for the wordmark and small serif titles (21 to 28px)","body":"Instrument Sans 400 at 17px for copy and control labels, 500 on buttons and link words, 14.5px for captions","mono":"Cutive Mono 400 only for values typed onto a label: accession numbers, dates, collector numbers, days in the press"}
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,600;1,500&family=Instrument+Sans:wght@400;500&family=Cutive+Mono&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 9999px

### Shadows

- **Sheet**: inset -.17cqi -.17cqi 0 shade 10%, .37cqi .5cqi 0 -.03cqi (page-block sheet), .4cqi .57cqi .1cqi -.03cqi shade 22%, .77cqi 1.03cqi 0 -.07cqi (second sheet), .8cqi 1.1cqi .13cqi -.07cqi shade 20%, 0 .13cqi .2cqi shade 22%, .67cqi 1.33cqi 2cqi shade 13%, 3cqi 5.33cqi 9cqi -1.67cqi shade 22%
- **Lift**: 0 1px 2px color-mix(in srgb, var(--shade) 20%, transparent), 6px 12px 30px -10px color-mix(in srgb, var(--shade) 28%, transparent)
- **Strap**: drop-shadow(0 0 .2cqi gum 50%) drop-shadow(0 .12cqi .08cqi shade 32%)
- **Note**: One light from the top left. Shadows fall down and to the right in two layers (a tight contact shadow and a soft ambient one), tinted from the forest ink and the press amber, never grey. Only the object of a view, or an open overlay, carries them.

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96,128]

### Surfaces

- **Treatment**: flat-stone-table-one-paper-object
- **Card Style**: No cards. Content sits straight on the pale stone table, parted by space and type value. The one raised thing is the herbarium sheet (cotton-rag white with a faint tooth, a page block of two thinner sheets, a three-layer tinted shadow). A white surface otherwise appears only as a form well or an open overlay, one per view.
- **Bg Pattern**: none on the page; the hero is a photographed stone table

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: No borders, rules or outlines in the interface. The only line is the printed rule on a herbarium label, which is part of the object. The border token colours tracks (progress, slider, switch off) and is never drawn as a line.

### Motion

- **Duration**: 750ms
- **Easing**: linear(0,.42 12%,.86 26%,1.04 40%,1.01 56%,.995 72%,1)
- **Settle**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: One verb: lift the tissue. Hovering or focusing the sheet swings the tissue guard up 103 degrees on its linen hinge with a small overshoot, and the milky rose under it comes up carmine. On arrival the sheet lays down onto the table once; sections rise as they enter. The settled state renders with no JavaScript; an inline script adds .anim to html to gate start states, and prefers-reduced-motion changes state at once.

## Rules

### Composition

- Give every view one object moment: the whole sheet in the hero, then parts of it (the label close up, a strap, a painted plate) in later views. Everything else in the view stays flat.
- Lay the sheet on the table with air on every side and never frame it in a card or panel.
- Put the headline, a short lede and one green action beside the object on the ground, never on a scrim or panel over it.
- Separate by space and value, never by boxes: ledgers, lists, hours and forms sit straight on the table. At most one white surface per view besides the object: a form's wells, an open record or an overlay.
- Show the whole sheet once per page.
- Keep one green pill per view; a second action is a quiet pill or a linen link.

### Hierarchy

- One big light word per view in Cormorant Garamond 300: 72px (96px from 1800px wide) in a hero, 44px for section titles, -0.02em tracking.
- Latin binomials in Cormorant 500 italic, families in 500 roman, both 21 to 28px; the binomial on a label is sage green.
- Instrument Sans 400 at 17px for copy and labels, 14.5px for captions and table heads, 500 on buttons and link words.
- Cutive Mono 400 only for typed values: accessions, dates, collector numbers, days in the press.
- Status is a coloured word (in the press in amber, ready to mount in green, beetle damage in madder, on loan in quiet ink), never a chip or pill.

### Density

Calm catalogue density: one object and one light word per view, 128 to 136px between sections on desktop and 96px on phones, 48px controls, ledger rows around 60px parted by space, prose held to about 50 characters beside the object.

### Signature Patterns

- The herbarium sheet: cotton-rag white on the stone table, 60:87, turned -1 degree, a page block of two thinner sheets and a three-layer tinted shadow, drawn in CSS around a photographed pressed plant (assets/specimen.webp).
- Gummed linen straps: woven linen with frayed ends through an SVG mask, a gum halo and a contact shadow; three across the stems and one as the tissue's hinge.
- The tissue guard: kozo fibres (assets/tissue-fibre.webp), three soft wrinkles, a deckled edge, a curled free corner and a ghost of the plant under it (assets/specimen-ghost.webp) that reads as milky rose.
- Lift the tissue: hover or focus on the sheet swings the tissue up 103 degrees about its left hinge over 750ms with a small overshoot; the ghost fades, the carmine comes up sharp, and the standing tissue throws a soft shadow beside the hinge.
- The printed and typed label: italic printed field names and Cutive Mono values under a printed rule, used on the sheet and, close up, as a later view.
- The linen link: a strip of linen is laid under the word on hover or focus, and the chosen tab keeps its strip.

## Layout

### Grid

- **Type**: object-first catalogue page
- **Max Width**: 1180px content on the landing and 1240px on the embodiment, 1320 to 1360px from 1800px wide; the landing hero stage caps at 1560px (2100px from 1800px)
- **Gutter**: 40px desktop, 20px phone
- **Column Behavior**: The landing hero runs three columns (copy, the sheet, this week) on minmax(0,1fr) auto minmax(0,1fr), two below 1100px and one below 760px. Section rows use minmax(0,6fr) minmax(0,5fr) splits, a ledger table and a four-column family index. Every track is minmax(0,1fr) and every grid child min-width:0.

### Whitespace

- **Section Gap**: 128 to 136px desktop, 96px phone
- **Card Gap**: no cards; ledger rows padded 18px, list items 22 to 26px apart, groups 44 to 96px apart
- **Content Padding**: content sits on the table aligned to the grid edge; overlays and the open record pad 28 to 32px
- **Approach**: The table is empty space by design: the sheet needs air on every side, and each view has one focal point.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"48px","row_height":"about 60px ledger rows with 18px padding"}

### Responsive

Phones (390px) stack to one column in the order name, sheet, lede and action, this week; hide non-essential nav links and ledger columns; the sheet takes 78% of the width. Tablets (768 to 1100px) put the copy beside the sheet with this week under the copy. Ultra-wide caps and centres content; only the landing hero spans the full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Stack**: 760px
- **Tablet**: 1100px
- **Desktop**: 1280px
- **Ultrawide**: 1800px and 2560px

## Guidance

### Do

- Put the sheet at the centre of the first view, on the flat stone table with air all round.
- Let the tissue lift on hover and on keyboard focus, and make the sheet a focusable button with a label that says so.
- Use later views for parts of the sheet: the label close up, a strap, the painted plate.
- Write in the herbarium's own words: accession, determined, collected, days in the press, drawer, on loan.
- Spend green on one action per view and on binomials; amber only on in the press.
- Style every control: white square wells on the table, a 2px ink focus ring, green when chosen, pills for buttons.

### Don't

- Don't put watercolour washes, blooms or leaf silhouettes behind the interface.
- Don't frame content in cards, borders or rules, or turn states into chips.
- Don't show the whole sheet twice on a page or raise a second thing in the same view.
- Don't put a scrim or panel over the hero object; keep the headline beside it on the ground.
- Don't pair two green pills; make the second action quiet or a linen link.
- Don't use decorative codes, emoji or symbol glyphs; don't set numerals in Cormorant display, whose figures are old-style.

### Accessibility

WCAG AA and better on the stone table #E7EAE3: ink #26322B is 11.0:1, copy #3B473F 7.7:1, quiet ink #556057 5.4:1, green #3F6448 5.5:1, amber #735619 5.6:1, madder #9B3A34 5.7:1; white on green is 6.7:1. The sheet is a focusable button with an aria-label, and keyboard focus lifts the tissue; every control has a visible 2px ink focus ring; status is always a word, never colour alone. prefers-reduced-motion changes the tissue's state at once and skips the lay-down and reveals.

## Imagery Direction

### Pairs With

pigment-wash

### Summary

Two kinds of image. The sheet and its parts are photographic: a real pressed plant scanned flat and cut out with its own alpha, and a pale green-grey stone table photographed from above under one soft light from the top left. The paired art style, Pigment Wash, paints the plates the herbarium makes from its sheets: the same plant at life size in translucent watercolour and fine ink on white paper.

### Subjects

- pressed Carthusian pink, roots and all
- pale honed stone table from above
- a strip of gummed linen tape
- kozo tissue fibres
- watercolour plate of the pressed plant
- flower heads at life size

### Usage

Landing hero: the empty stone table (assets/hero.jpg) through var(--hero-image), with the live CSS sheet lying on it and the headline beside it; no text, no objects in the photograph. Inside pages: the cut-out plant on the sheet, and one Pigment Wash plate per page as a flat print on the table. Use Pigment Wash for plates, posters and prints only, never as a wash behind modules; keep its saturated translucent pigment and fine ink, and set the subject to the pressed plant with carmine, sap green, olive and straw on white.

---
version: "alpha"
name: "Herbier"
description: "Herbier is a herbarium sheet used as an interface. The one real object is a sheet of cotton-rag board on a pale stone table: a pressed Carthusian pink strapped down with frayed, gummed linen, a tissue guard hinged over its flowers, and a..."
colors:
  bg: "#E7EAE3"
  surface: "#FFFFFF"
  surface_2: "#DBDFD8"
  text: "#26322B"
  copy: "#3B473F"
  muted: "#556057"
  border: "#CDD3C8"
  accent: "#3F6448"
  on_accent: "#FFFFFF"
  success: "#2F6B45"
  warning: "#735619"
  error: "#9B3A34"
  info: "#2F5F6B"
  linen: "#EDE4CF"
  gum: "#C4A05C"
  shade: "#3D3D26"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Cutive Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-copy:
    backgroundColor: "{colors.copy}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-linen:
    backgroundColor: "{colors.linen}"
  color-reference-gum:
    backgroundColor: "{colors.gum}"
  color-reference-shade:
    backgroundColor: "{colors.shade}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Herbier

## Overview

Herbier is a herbarium sheet used as an interface. The one real object is a sheet of cotton-rag board on a pale stone table: a pressed Carthusian pink strapped down with frayed, gummed linen, a tissue guard hinged over its flowers, and a label whose field names are printed and whose values are typed. Lift the tissue and the milky rose underneath comes up carmine. Everything around the sheet is small, flat and precise: names in Cormorant Garamond, copy in Instrument Sans, typed values in Cutive Mono, and one sage green for the action.

### Values

- One object is the interface: the herbarium sheet, rendered as a real thing with a use, and it is the only raised thing in a view.
- Material belongs to the object: cotton-rag board with tooth, woven linen with frayed ends and a gum halo, kozo tissue with fibres and a deckled edge. The page around it is flat colour.
- Depth is a verb. The tissue lifts only while you point at the sheet; the sheet lays down once on arrival.
- One hue family and one action green. Amber marks the one live state (in the press); carmine lives only in the plant.
- What the catalogue knows, the sheet says: accession, collector, locality and determination are real data, typed onto a printed label.
- Type is small and quiet with one big light word per view.

### Anti-Values

- Watercolour washes or pigment blooms behind modules.
- Pressed-leaf silhouettes clipped into corners as decoration.
- Cards, borders, rules and chips; states are words, not pills.
- Decorative accession codes and plate numbers as ornament (FOLIO HRB, PLATE 03).
- A second raised thing in a view, or the whole sheet twice on one page.
- Warm cream page grounds; the table is a pale green-grey stone and the sheet is white.

### Visual Character

- The sheet stands on a pale green-grey stone table (#E7EAE3) with table on every side: cotton-rag white (#FFFFFF) with a faint tooth, turned one degree as if laid by hand, a page block of two thinner sheets along its right and bottom edges, and a three-layer shadow tinted from the forest ink and press amber that falls down and to the right.
- A pressed Carthusian pink, photographed and cut out with its own alpha, is strapped to the sheet with three strips of woven linen (#EDE4CF) with frayed ends and an amber gum halo (#C4A05C).
- A kozo tissue guard, hinged on a linen strip at the left, lies over the flower heads at 46% milky white with long fibres, three soft wrinkles, a deckled lower edge that casts a hairline shadow across the flowers, and a free corner that curls up on a diagonal.
- The label sits in the lower right of the sheet: the binomial in sage-green italic Cormorant (#3F6448), a note in Instrument Sans, then italic printed field names with values typed in Cutive Mono over a printed rule.
- Around the object everything is flat: one green pill action per view, state words in colour instead of chips, lists and ledgers straight on the table, and one big light Cormorant word.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#E7EAE3` |
| surface | `#FFFFFF` |
| surface_2 | `#DBDFD8` |
| text | `#26322B` |
| copy | `#3B473F` |
| muted | `#556057` |
| border | `#CDD3C8` |
| accent | `#3F6448` |
| on_accent | `#FFFFFF` |
| success | `#2F6B45` |
| warning | `#735619` |
| error | `#9B3A34` |
| info | `#2F5F6B` |
| linen | `#EDE4CF` |
| gum | `#C4A05C` |
| shade | `#3D3D26` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,600;1,500&family=Instrument+Sans:wght@400;500&family=Cutive+Mono&display=swap

- **Headline-Lg**: Cormorant Garamond, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Instrument Sans, 17px, weight 400, line-height 1.6.
- **Label-Md**: Cutive Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `128px`

### Grid

- **Type**: object-first catalogue page
- **Max Width**: 1180px content on the landing and 1240px on the embodiment, 1320 to 1360px from 1800px wide; the landing hero stage caps at 1560px (2100px from 1800px)
- **Gutter**: 40px desktop, 20px phone
- **Column Behavior**: The landing hero runs three columns (copy, the sheet, this week) on minmax(0,1fr) auto minmax(0,1fr), two below 1100px and one below 760px. Section rows use minmax(0,6fr) minmax(0,5fr) splits, a ledger table and a four-column family index. Every track is minmax(0,1fr) and every grid child min-width:0.

### Whitespace

- **Section Gap**: 128 to 136px desktop, 96px phone
- **Card Gap**: no cards; ledger rows padded 18px, list items 22 to 26px apart, groups 44 to 96px apart
- **Content Padding**: content sits on the table aligned to the grid edge; overlays and the open record pad 28 to 32px
- **Approach**: The table is empty space by design: the sheet needs air on every side, and each view has one focal point.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"48px","row_height":"about 60px ledger rows with 18px padding"}

### Responsive

Phones (390px) stack to one column in the order name, sheet, lede and action, this week; hide non-essential nav links and ledger columns; the sheet takes 78% of the width. Tablets (768 to 1100px) put the copy beside the sheet with this week under the copy. Ultra-wide caps and centres content; only the landing hero spans the full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Stack**: 760px
- **Tablet**: 1100px
- **Desktop**: 1280px
- **Ultrawide**: 1800px and 2560px

## Elevation & Depth

### Shadows

- **Sheet**: inset -.17cqi -.17cqi 0 shade 10%, .37cqi .5cqi 0 -.03cqi (page-block sheet), .4cqi .57cqi .1cqi -.03cqi shade 22%, .77cqi 1.03cqi 0 -.07cqi (second sheet), .8cqi 1.1cqi .13cqi -.07cqi shade 20%, 0 .13cqi .2cqi shade 22%, .67cqi 1.33cqi 2cqi shade 13%, 3cqi 5.33cqi 9cqi -1.67cqi shade 22%
- **Lift**: 0 1px 2px color-mix(in srgb, var(--shade) 20%, transparent), 6px 12px 30px -10px color-mix(in srgb, var(--shade) 28%, transparent)
- **Strap**: drop-shadow(0 0 .2cqi gum 50%) drop-shadow(0 .12cqi .08cqi shade 32%)
- **Note**: One light from the top left. Shadows fall down and to the right in two layers (a tight contact shadow and a soft ambient one), tinted from the forest ink and the press amber, never grey. Only the object of a view, or an open overlay, carries them.

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: flat-stone-table-one-paper-object
- **Card Style**: No cards. Content sits straight on the pale stone table, parted by space and type value. The one raised thing is the herbarium sheet (cotton-rag white with a faint tooth, a page block of two thinner sheets, a three-layer tinted shadow). A white surface otherwise appears only as a form well or an open overlay, one per view.
- **Bg Pattern**: none on the page; the hero is a photographed stone table

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: No borders, rules or outlines in the interface. The only line is the printed rule on a herbarium label, which is part of the object. The border token colours tracks (progress, slider, switch off) and is never drawn as a line.

## Components

### Composition

- Give every view one object moment: the whole sheet in the hero, then parts of it (the label close up, a strap, a painted plate) in later views. Everything else in the view stays flat.
- Lay the sheet on the table with air on every side and never frame it in a card or panel.
- Put the headline, a short lede and one green action beside the object on the ground, never on a scrim or panel over it.
- Separate by space and value, never by boxes: ledgers, lists, hours and forms sit straight on the table. At most one white surface per view besides the object: a form's wells, an open record or an overlay.
- Show the whole sheet once per page.
- Keep one green pill per view; a second action is a quiet pill or a linen link.

### Hierarchy

- One big light word per view in Cormorant Garamond 300: 72px (96px from 1800px wide) in a hero, 44px for section titles, -0.02em tracking.
- Latin binomials in Cormorant 500 italic, families in 500 roman, both 21 to 28px; the binomial on a label is sage green.
- Instrument Sans 400 at 17px for copy and labels, 14.5px for captions and table heads, 500 on buttons and link words.
- Cutive Mono 400 only for typed values: accessions, dates, collector numbers, days in the press.
- Status is a coloured word (in the press in amber, ready to mount in green, beetle damage in madder, on loan in quiet ink), never a chip or pill.

### Density

Calm catalogue density: one object and one light word per view, 128 to 136px between sections on desktop and 96px on phones, 48px controls, ledger rows around 60px parted by space, prose held to about 50 characters beside the object.

### Signature Patterns

- The herbarium sheet: cotton-rag white on the stone table, 60:87, turned -1 degree, a page block of two thinner sheets and a three-layer tinted shadow, drawn in CSS around a photographed pressed plant (assets/specimen.webp).
- Gummed linen straps: woven linen with frayed ends through an SVG mask, a gum halo and a contact shadow; three across the stems and one as the tissue's hinge.
- The tissue guard: kozo fibres (assets/tissue-fibre.webp), three soft wrinkles, a deckled edge, a curled free corner and a ghost of the plant under it (assets/specimen-ghost.webp) that reads as milky rose.
- Lift the tissue: hover or focus on the sheet swings the tissue up 103 degrees about its left hinge over 750ms with a small overshoot; the ghost fades, the carmine comes up sharp, and the standing tissue throws a soft shadow beside the hinge.
- The printed and typed label: italic printed field names and Cutive Mono values under a printed rule, used on the sheet and, close up, as a later view.
- The linen link: a strip of linen is laid under the word on hover or focus, and the chosen tab keeps its strip.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a0ecaf-149b-7383-be3c-eead7b7645c4/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ecaf-149b-7383-be3c-eead7b7645c4/shadcn.json` (registry theme), `/language/en-01a0ecaf-149b-7383-be3c-eead7b7645c4/shadcn-components.md` (component recipes) and `/language/en-01a0ecaf-149b-7383-be3c-eead7b7645c4/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Put the sheet at the centre of the first view, on the flat stone table with air all round.
- Do Let the tissue lift on hover and on keyboard focus, and make the sheet a focusable button with a label that says so.
- Do Use later views for parts of the sheet: the label close up, a strap, the painted plate.
- Do Write in the herbarium's own words: accession, determined, collected, days in the press, drawer, on loan.
- Do Spend green on one action per view and on binomials; amber only on in the press.
- Do Style every control: white square wells on the table, a 2px ink focus ring, green when chosen, pills for buttons.
- Don't Don't put watercolour washes, blooms or leaf silhouettes behind the interface.
- Don't Don't frame content in cards, borders or rules, or turn states into chips.
- Don't Don't show the whole sheet twice on a page or raise a second thing in the same view.
- Don't Don't put a scrim or panel over the hero object; keep the headline beside it on the ground.
- Don't Don't pair two green pills; make the second action quiet or a linen link.
- Don't Don't use decorative codes, emoji or symbol glyphs; don't set numerals in Cormorant display, whose figures are old-style.

### Accessibility

WCAG AA and better on the stone table #E7EAE3: ink #26322B is 11.0:1, copy #3B473F 7.7:1, quiet ink #556057 5.4:1, green #3F6448 5.5:1, amber #735619 5.6:1, madder #9B3A34 5.7:1; white on green is 6.7:1. The sheet is a focusable button with an aria-label, and keyboard focus lifts the tissue; every control has a visible 2px ink focus ring; status is always a word, never colour alone. prefers-reduced-motion changes the tissue's state at once and skips the lay-down and reveals.

## Imagery Direction

### Pairs With

pigment-wash

### Summary

Two kinds of image. The sheet and its parts are photographic: a real pressed plant scanned flat and cut out with its own alpha, and a pale green-grey stone table photographed from above under one soft light from the top left. The paired art style, Pigment Wash, paints the plates the herbarium makes from its sheets: the same plant at life size in translucent watercolour and fine ink on white paper.

### Subjects

- pressed Carthusian pink, roots and all
- pale honed stone table from above
- a strip of gummed linen tape
- kozo tissue fibres
- watercolour plate of the pressed plant
- flower heads at life size

### Usage

Landing hero: the empty stone table (assets/hero.jpg) through var(--hero-image), with the live CSS sheet lying on it and the headline beside it; no text, no objects in the photograph. Inside pages: the cut-out plant on the sheet, and one Pigment Wash plate per page as a flat print on the table. Use Pigment Wash for plates, posters and prints only, never as a wash behind modules; keep its saturated translucent pigment and fine ink, and set the subject to the pressed plant with carmine, sap green, olive and straw on white.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "herbier",
  "type": "registry:theme",
  "title": "Herbier shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#E7EAE3",
      "foreground": "#26322B",
      "card": "#FFFFFF",
      "card-foreground": "#26322B",
      "popover": "#FFFFFF",
      "popover-foreground": "#26322B",
      "primary": "#26322B",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#556057",
      "muted-foreground": "#26322B",
      "accent": "#3F6448",
      "accent-foreground": "#ffffff",
      "destructive": "#9B3A34",
      "border": "#CDD3C8",
      "input": "#CDD3C8",
      "ring": "#3F6448",
      "chart-1": "#26322B",
      "chart-2": "#f4f4f5",
      "chart-3": "#3F6448",
      "chart-4": "#2F6B45",
      "chart-5": "#735619",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#26322B",
      "sidebar-primary": "#26322B",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5F6B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CDD3C8",
      "sidebar-ring": "#3F6448",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#26322B",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3F6448",
      "accent-foreground": "#ffffff",
      "destructive": "#9B3A34",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3F6448",
      "chart-1": "#26322B",
      "chart-2": "#f4f4f5",
      "chart-3": "#3F6448",
      "chart-4": "#2F6B45",
      "chart-5": "#735619",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#26322B",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F6448",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3F6448",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ecaf-149b-7383-be3c-eead7b7645c4",
    "slug": "herbier",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "bg",
        "border",
        "copy",
        "error",
        "gum",
        "info",
        "linen",
        "muted",
        "on_accent",
        "shade",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "derived": [
        "copy",
        "note",
        "shade",
        "surface_2"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "roles",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lift",
        "note",
        "sheet",
        "strap"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy",
        "settle"
      ]
    }
  }
}
```