---
name: CONTRA
description: A host-blind password manager dressed as a station cloakroom's left-luggage ticket.
colors:
  stock: "light-dark(#c8dacf, #131a16)"
  stock-tint: "light-dark(#b3c9bb, #1d2621)"
  stock-manila: "light-dark(#ddc78d, #3a3018)"
  ink: "light-dark(#121512, #e6efe8)"
  ink-strong: "light-dark(#000000, #ffffff)"
  ink-soft: "light-dark(#bcd0c3, #232e28)"
  on-ink: "light-dark(#eef3ee, #101512)"
  ink-2: "light-dark(#b3301a, #ff7a5c)"
  text-muted: "light-dark(#3a4741, #a9b8ae)"
  text-faint: "light-dark(#434f49, #93a399)"
  line: "light-dark(#a3b8ab, #2c3830)"
  line-strong: "light-dark(#56655c, #7d8d83)"
  tone-negative-fg: "light-dark(#8b2310, #f0a293)"
  tone-negative-bg: "light-dark(#e3c2b6, #2a1b18)"
  tone-positive-fg: "light-dark(#1d5134, #9fc9ac)"
  tone-positive-bg: "light-dark(#b6d2be, #16241b)"
  tone-warning-fg: "light-dark(#57430f, #d6c48a)"
  tone-warning-bg: "light-dark(#d5cc9c, #24211a)"
  tone-neutral-fg: "light-dark(#33403a, #c4d2c9)"
  tone-neutral-bg: "light-dark(#b9cec2, #232e28)"
typography:
  display:
    fontFamily: "League Gothic, Oswald, Archivo Narrow, system-ui, sans-serif"
    fontSize: "clamp(2.4rem, 6vw, 3.6rem)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "0.01em"
  headline:
    fontFamily: "League Gothic, Oswald, Archivo Narrow, system-ui, sans-serif"
    fontSize: "1.9rem"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "0.04em"
  title:
    fontFamily: "League Gothic, Oswald, Archivo Narrow, system-ui, sans-serif"
    fontSize: "1.35rem"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "0.04em"
  numbering:
    fontFamily: "League Gothic, Oswald, Archivo Narrow, system-ui, sans-serif"
    fontSize: "clamp(3rem, 12vw, 5rem)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "0.14em"
    fontFeature: "tabular-nums"
  body:
    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "normal"
  label:
    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
    fontSize: "0.71875rem"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "0.12em"
  serial:
    fontFamily: "ui-monospace, SF Mono, Cascadia Mono, Menlo, Consolas, monospace"
    fontSize: "0.95em"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.06em"
    fontFeature: "tabular-nums"
rounded:
  cut: "0"
  stamp: "999px"
spacing:
  sp-1: "0.25rem"
  sp-2: "0.5rem"
  sp-3: "0.75rem"
  sp-4: "1rem"
  sp-5: "1.5rem"
  sp-6: "2.5rem"
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.cut}"
    padding: "0.5rem 1.5rem"
  button-primary-hover:
    backgroundColor: "{colors.ink-strong}"
    textColor: "{colors.on-ink}"
  button-primary-disabled:
    backgroundColor: "{colors.stock-tint}"
    textColor: "{colors.text-faint}"
  button-ruled:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.cut}"
    padding: "0.5rem 1.5rem"
  button-ruled-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.ink}"
  button-marginal:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.cut}"
    padding: "0.15rem 0.5rem"
  field-label:
    textColor: "{colors.text-muted}"
    typography: "{typography.label}"
  field-input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.cut}"
    padding: "0 0 0.1rem"
    width: "100%"
  notice-stamp:
    backgroundColor: "{colors.tone-negative-bg}"
    textColor: "{colors.ink}"
    rounded: "{rounded.cut}"
    padding: "{spacing.sp-4}"
    width: "68ch"
  counterfoil:
    backgroundColor: "{colors.stock-tint}"
    textColor: "{colors.ink}"
    rounded: "{rounded.cut}"
    padding: "{spacing.sp-4}"
  vault-shared:
    backgroundColor: "{colors.stock-manila}"
    textColor: "{colors.ink}"
    rounded: "{rounded.cut}"
    padding: "{spacing.sp-4}"
  numbering-code:
    backgroundColor: "transparent"
    textColor: "{colors.ink-2}"
    typography: "{typography.numbering}"
  step-overprint:
    backgroundColor: "transparent"
    textColor: "{colors.tone-negative-fg}"
    typography: "{typography.label}"
  status-pill:
    backgroundColor: "{colors.tone-neutral-bg}"
    textColor: "{colors.tone-neutral-fg}"
    typography: "{typography.label}"
    rounded: "{rounded.stamp}"
    padding: "0.1rem 0.6rem"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: "0.5rem 0"
  footer-overprint:
    backgroundColor: "transparent"
    textColor: "{colors.text-faint}"
    typography: "{typography.label}"
    padding: "0.75rem 0"
---

🤖 Machine-authored record of CONTRA's visual system, written from the shipped
stylesheets and templates rather than from intention. Where the direction
contract in `layout.html` and the built code disagree, the code is recorded and
the divergence is noted. This file is the visual system only; the cryptographic
protocol lives in `PROTOCOL.md`, which carried the name `DESIGN.md` until
2026-09-04 and has nothing to do with anything below.

# Design System: CONTRA

## Overview

**Creative North Star: "Left Luggage"**

A station cloakroom holds your bag, never learns what is in it, and will not
release it without the stub. That is the product's argument and it is also the
material: coloured ticket stock, black ink, one vermilion spent only on the
numbering machine, ruled fields with small letterspaced caps printed above the
rule, and one perforation where the ticket tears. The world was not chosen to
look like a ticket; six of the product's mechanics — the counterfoil, the
never-repeating epoch, the coloured stock that codes a category, the expiring
claim check, the perforation between client and server — already *are* ticket
mechanics, so the visual system describes the protocol rather than costuming it.

The register is institutional, plain, and unapologetic about consequences,
which is the same voice `PRODUCT.md` records for the product. Ticket printing
as a station cloakroom would do it: every mark is doing a job. Ticket printing
as a fairground would do it — grain, distress, torn-paper shadows, rotated
stamps, fake staples, perforated GIFs used as ornament — is refused in
`contra.css` by name, because the moment the material gets texture it turns
twee and the institution stops being credible. The category default is refused
equally and explicitly: no deep navy, no rounded cards, no lock mark, no
green-for-safe.

Density is that of a printed form rather than a dashboard: one sheet of stock
edge to edge, no cards, ruled rows for line items, more space above a heading
than below it. Light is the primary scheme, and that is a decision about a
scene — a person at a desk in daylight with a printer running, holding two
sheets they were told can never be reissued. Dark is the same counter at night
and is a complete scheme, not an inversion; every token is declared once as
`light-dark(<light>, <dark>)` under a single `:root`, and
`:root[data-theme=light|dark]` setting `color-scheme` is the whole toggle.

**Key Characteristics:**
- Eau-de-nil ticket stock as the ground, emphatically not cream and never white.
- The accent is the ink: links and primary buttons are black, not coloured.
- One second colour (vermilion), spent only on counting and on what cannot be undone.
- Square-cut throughout (`0` radius); the status pill is the one round thing, and it is a rubber stamp.
- Flat by conviction: ink on paper has no depth.
- Five named devices — the field box, the numbering, the tear-line, the stamp, the stock code — and every screen is built from them.

## Colors

One stock, one ink, one second colour, plus a manila category code; ticket
printing has no third colour and neither does this.

### Primary
- **Cloakroom Ink** (`{colors.ink}`): the accent *is* the ink. Body text, headings, link colour, the primary button's fill, the 3px rule under the page title, and the top rule that opens a list. A link is black text that underlines (1px thickness, 0.18em offset, thickening to 2px on hover), never a coloured word. **Ink Strong** (`{colors.ink-strong}`) is the hover state of anything filled with ink; **On Ink** (`{colors.on-ink}`) is the label printed on it; **Ink Soft** (`{colors.ink-soft}`) is the wash a ruled button takes on hover.

### Secondary
- **Numbering Vermilion** (`{colors.ink-2}`, `--contra-ink-2`): the numbering machine's ink, and the only colour on the page. It prints the handoff claim code, the device ladder's rung counters, and the caret in every text field. Its hue also carries the negative tone, so the second colour lands exactly where the product's consequences are: something being counted, or something that cannot be undone.

### Tertiary
- **Manila Stock** (`{colors.stock-manila}`, `--contra-stock-2`): the category code, coding exactly one thing — a vault that belongs to somebody else and you are on the list. `vault.js` sets `data-shared` on the open vault's root, so the whole sheet changes stock the way a cloakroom prints luggage tickets on different stock from coat tickets. It is also the `::selection` background. Never a badge, never decoration.

### Neutral
- **Eau-de-Nil Stock** (`{colors.stock}`): the page. `--rst-bg` and `--rst-surface` are the same value on purpose — the page is one sheet, and a card would be a second sheet on a counter that only ever holds one.
- **Printed Tint Block** (`{colors.stock-tint}`): the darker band a ticket uses to group a field. Carries the counterfoil and disabled controls. A flatter surface, never a raised one.
- **Muted / Faint Text** (`{colors.text-muted}`, `{colors.text-faint}`): field labels, secondary list text and status lines take muted; the tear-line caption, placeholders and the footer overprint take faint.
- **Hairline** (`{colors.line}`) and **Rule** (`{colors.line-strong}`): the hairline divides rows and closes the footer; the rule is the control boundary — field underlines, the perforation's holes, the serial's underline.
- **Status tones** (`{colors.tone-neutral-fg}` … `{colors.tone-negative-bg}`): the rubber stamps, held at low chroma so the page still reads as stock and ink at a glance. Negative is the exception, because that is the second colour doing its other job.

### Named Rules

**The One Stock, One Ink, One Second Colour Rule.** A screen has a ground, a
black ink, and at most one vermilion mark. If a new element seems to need a
fourth colour, it does not need a colour; it needs a rule, a case change, or a
position.

**The Colour Means A Category Rule.** Manila codes a vault owned by somebody
else, and nothing else, ever. A colour that does not carry a category does not
get used.

**The Large-Only Rule.** `--contra-ink-2` measures 4.29:1 on the stock in
light. It is a **large-text colour only**: 24px and up, or 18.66px bold. Small
red text is `--rst-tone-negative-fg`, which clears 4.5:1 on its own tint. Never
reach for the numbering ink at body size — darkening it until it passes at 14px
turns a vermilion into a brick and costs the theme its second colour.

### Accessibility floors

WCAG 2.2 AA is binding (`PRODUCT.md`). `theme.css`'s header carries the full
measured table for both schemes, computed from the exact hex values; if a token
changes, its rows are recomputed there. Normal text needs 4.5:1; large text and
UI component boundaries need 3:1. The tightest text pair in the build is
`--rst-text-faint` on the tint block at **4.89:1** in light against a 4.5:1
floor. Text on stock measures 12.60:1 light / 15.06:1 dark; a button label on
the ink 16.37:1; the control border `--rst-line-strong` 4.22:1 light / 5.06:1
dark against a 3:1 floor; the numbering ink 4.29:1 light / 6.90:1 dark against
its large-text 3:1 floor, and 3.76:1 on manila.

- `--rst-line` is a hairline **divider**, not a control border: 1.4.11's 3:1 does not apply to it. Control borders use `--rst-line-strong`.
- `--rst-header-rule` is decorative — the ticket's rule under its title — and carries no contrast floor. It resolves to the ink, which makes it the heaviest mark on the sheet.
- The shadow tokens and the overlay paint translucent layers over unknown grounds, so no ratio applies to them.

## Typography

**Display Font:** League Gothic (self-hosted WOFF2, ~10KB, OFL 1.1, `font-display: swap`), falling back to Oswald, Archivo Narrow, then the UI stack.
**Body / Label Font:** the machine's own UI stack (`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial`).
**Serial Font:** `ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas`.

**Character:** an Alternate Gothic revival — the condensed face poster and
ticket printing has been set in for a century — over a workhorse UI sans. The
display face does the ticket's shouting; the sans does the ticket's work. The
webfont is same-origin because this app fetches nothing from anywhere, and a
CDN font would be one more party the browser trusts on a page holding vault
keys.

### Hierarchy
- **Display / h1** (League Gothic 400, `clamp(2.4rem, 6vw, 3.6rem)`, line-height 1, 0.01em): the page title, in **sentence case**, over a 3px ink rule with `0.5rem` of clearance and `1.5rem` beneath. One per screen.
- **Headline / h2** (League Gothic 400, 1.9rem, line-height 1, 0.04em, uppercase): section labels. `2.5rem` above, `0.75rem` below.
- **Title / h3** (League Gothic 400, 1.35rem, line-height 1, 0.04em, uppercase): sub-sections and the device ladder's rung headings.
- **Numbering** (League Gothic 400, `clamp(3rem, 12vw, 5rem)`, tabular, 0.14em, in `{colors.ink-2}`): the handoff claim code, printed at the size a cloakroom prints a stub number, because a person reads it off one screen and types it into another. Rung counters are the same voice at 2.6rem.
- **Brand overprint** (League Gothic, 1.5rem, 0.14em, uppercase): the issuing office's name in the shell bar.
- **Body** (UI stack 400, 0.875rem/14px, line-height 1.5): prose is capped at **68ch**; the column itself is sized for forms and lists.
- **Label** (UI stack 600, 0.71875rem/11.5px, 0.12em, uppercase): field names, disclosure summaries, the tear-line caption, the footer overprint. Buttons are the same voice at 0.78125rem/700/0.14em; nav links at 0.78125rem/600/0.08em; the status line at 0.78125rem/0.06em.
- **Serial** (mono, 0.95em, tabular figures, 0.06em, underlined with `{colors.line-strong}`, `word-break: break-all`): opaque ids, build stamps, handoff codes — values a person transcribes by hand. Monospace here is measurement, not costume, and a serial sits on a ruled line rather than in a grey box.

### Named Rules

**The Caps Are For Labels Rule.** Capitals name things; they do not speak
sentences. `h2` and `h3` are section labels and are uppercased; `h1` keeps
sentence case and takes its character from the face and the rule under it,
because this app's title is sometimes a whole sentence, and a whole sentence in
condensed capitals is a poster nobody reads and a screen reader may spell out.

**The Overprint Prints What It Is Rule.** Uppercasing stops at a serial. A
build hash the reader will paste and compare renders in its own case
(`[data-overprint] code`), because a page that exists to report a value must
not restyle the value into a lie.

**The Display Face Stays Big Rule.** League Gothic is a poster face. At 11.5px
with 0.12em tracking it goes spindly and its condensed forms stop being
legible, so none of the caps furniture — labels, buttons, nav, status, the
overprint — uses it. That furniture is set in the UI stack and takes its ticket
character from case, tracking, weight and the rule it sits on. **Recorded cost,
accepted in the build:** the small caps render in a different typeface per
operating system while the display line does not.

## Layout

One centred column, one sheet of stock. The framework's `tokens.css` declares
the column at `64rem`; **CONTRA narrows it to `60rem`** in `contra.css` and
gives it `min-block-size: calc(100vh - 8rem)` so the sheet reaches the fold on
a short page. Column padding is `1.5rem 1rem 2.5rem`. The shell footer matches
the column at `60rem`.

The sheet has **no border of its own**. It had cut edges for one round and they
were wrong: the console shell already rules the side of the navigation rail,
and the page's own border landed about 55px inboard of it, showing two
competing sheet edges with a dead strip between them. The rail's rule is the
structural one; the sheet is defined by its ground and its rules, which is how
a ticket is actually printed.

Spacing is the framework's six-step rhythm — `0.25 / 0.5 / 0.75 / 1 / 1.5 /
2.5rem` — and the build uses all six. Vertical rhythm is asymmetric on purpose:
more space above a heading than below it. Form rows carry no top margin and
`1rem` beneath.

The shell is a top bar plus a side rail. Below 800px both fold behind **one**
`<details>` disclosure with two reveals — the bar's tail via the
adjacent-sibling combinator, the rail from the shell root via `:has()` —
written as hide-when-closed, so an engine without `:has()` degrades to
everything visible rather than to nothing. The summary control is drawn at
390px.

Reading measures: prose `68ch`, notices `68ch`, checkbox and radio sentence
labels `68ch`, text inputs `32rem`.

The `@media print` block strips the bar, rail, footer and skip link and removes
the column cap, so a printed screen comes out black on white with no chrome.

**The One Sheet Rule.** There are no cards. A card is a second sheet of paper
on a counter that only ever holds one. Grouping is done with a rule, a tint
block, or a change of stock.

## Elevation & Depth

Flat by conviction. Ink on paper has no depth and nothing in this app floats.
The shadow tokens exist only because the framework's stylesheet paints with
`var(--rst-shadow-*)` unconditionally and a theme cannot opt out of a property
it must declare, so they are set to the least a theme can declare and still be
declaring something: a single hairline layer, `0 1px 0`. You get an edge, not a
lift. Depth, where it is needed at all, is carried by tonal layering — the tint
block behind a counterfoil, manila behind a shared vault — and by rules.

### Shadow Vocabulary
- **Pop edge** (`box-shadow: 0 1px 0 light-dark(rgba(18,21,18,0.22), rgba(0,0,0,0.55))`): the framework's popovers and menus.
- **Knob edge** (`box-shadow: 0 1px 0 light-dark(rgba(18,21,18,0.30), rgba(0,0,0,0.5))`): switch and slider knobs.
- **Lift edge** (`box-shadow: 0 1px 0 light-dark(rgba(18,21,18,0.12), rgba(0,0,0,0.35))`): the framework's lightest lift.
- **Overlay** (`light-dark(rgba(18,21,18,0.55), rgba(0,0,0,0.68))`): the only real darkening in the app, because a modal genuinely is a second sheet laid over the first.

**The No Lift Rule.** Never add a shadow to make something look raised. If an
element must separate from the sheet, give it a rule, a tint, or a perforation.
The three shadow tokens are inherited obligations held at their minimum, not an
elevation ramp to climb.

## Shapes

Cut, not moulded. `--rst-radius` and `--rst-radius-sm` are `0`, and every
control CONTRA draws is a square rectangle: buttons, inputs, the notice stamp,
the counterfoil, the manila block. The pill radius (`999px`) survives only
because `tokens.css` paints status pills and row actions with it; in this world
a pill is a rubber stamp, and a stamp is the one round thing on a ticket.

The recurring geometry is **the rule**: 3px in the ink under the page title,
2px under every field, 1px in the ink over a list, 1px hairlines between rows
and above the footer, 3px in the negative foreground across the top of a stamp.
Weight encodes rank — title, control, boundary, divider — and the build never
substitutes a box for a rule.

The one non-rectilinear mark in the app is the perforation, and it is drawn as
real holes rather than as a dashed border.

## Components

### Buttons
- **Shape:** square-cut (`0` radius), 2px border in the ink.
- **Primary:** a solid rectangle of ink (`{colors.ink}` fill, `{colors.on-ink}` label), 0.78125rem/700 uppercase at 0.14em tracking, padded `0.5rem 1.5rem`. What a ticket office rubber-stamps.
- **Hover:** fill and border shift to `{colors.ink-strong}`. No transition, no lift, no transform.
- **Focus:** `outline: 2px solid {colors.ink}` at `3px` offset. The same ring everywhere in the app.
- **Ruled (secondary):** the same rectangle ruled rather than filled — transparent fill, ink label and border; hover washes to `{colors.ink-soft}`. Used for `type="button"`, cancel, edit, delete.
- **Marginal:** row-level edit and delete drop to a 1px border and `0.15rem 0.5rem` of padding. They are marginal notes on a line item, not stamps.
- **Disabled:** tint-block fill, faint text, `{colors.line-strong}` border, `cursor: not-allowed`.

### Inputs / Fields — Device 1, THE FIELD BOX
- **Style:** no box. A small letterspaced cap label sits directly on a 2px `{colors.line-strong}` rule, with the value on the rule. Transparent background, no border but the underline, `line-height: 1.2` and `padding: 0 0 0.1rem` so the value sits close under its label — the label names the rule beneath it rather than heading an empty line. Width 100%, capped at `32rem`.
- **Focus:** the underline turns to the numbering vermilion and the 2px ink outline appears at 3px offset. The caret is vermilion in every field, always.
- **Placeholder:** `{colors.text-faint}`.
- **Checkbox / radio:** opt out of the caps entirely — a checkbox label is a sentence, so it takes body size, normal tracking, sentence case, and a `68ch` measure. `accent-color` is the vermilion; the control is `1.1rem` square.
- **Textarea:** `6rem` minimum block size, vertical resize only.

### Lists
Ruled rows, never cards. A 1px ink rule opens the list, 1px hairlines separate
rows, rows are baseline-aligned and wrap from a `12rem` flex basis with
`0.75rem` of vertical padding. Secondary text in the row is muted.

### Navigation
Rail links are uppercase 0.78125rem/600 at 0.08em, undecorated, with `0.5rem`
of vertical padding, underlining on hover. The shell's disclosure summaries
take the label voice (0.71875rem/700/0.12em uppercase, square) so a control
never arrives in the framework's title case.

### Status
The live region reads as a printed endorsement rather than a toast: muted,
0.78125rem, 0.06em, uppercase, with `1.4em` of reserved height so a message
appearing does not shift the sheet.

### Signature components

**Device 2 — THE NUMBERING.** Anything counted prints tabular in the second
colour. Three live instances and no others: `[data-code]`, the handoff claim
code, in the display face at `clamp(3rem, 12vw, 5rem)`; `[data-rungs]`
counters, the device ladder, at 2.6rem in the display face, absolutely
positioned in a 3.5rem gutter beside each rung; and `[rst-steps]`, the signup
step overprint, which is *small* and therefore prints in
`{colors.tone-negative-fg}`, never in the numbering ink. Section numbers are
usually decoration; these carry meaning — the rungs are ordered by what works
with the least, and the last one always works.

**Device 3 — THE TEAR-LINE.** A real perforation: `radial-gradient` holes,
1.7px solid to 1.8px transparent, repeated at a fixed 12px pitch
(`--contra-perf`, declared once so every tear-line in the app is the same
machine), 9px tall, flanking a centred uppercase caption. **Exactly one per
screen, and only on a genuine client/server boundary** — sign-in, where it runs
through the middle of the form because that is where the boundary genuinely is,
and the vault. Above it what the server holds; below it what only this browser
knows. Never decoration, never twice.

**Device 4 — THE STAMP.** `[data-notice]` and `[data-kind="warning"]`: a block
on the negative tint with a **3px rule across the top** in the negative
foreground, `1rem` padding, a `68ch` measure, and strong text in the negative
foreground. This is how a ticket prints a condition of carriage. Never a
coloured left border.

**Device 5 — THE STOCK CODE.** `[data-vault][data-shared]` prints the entire
open vault on manila with `1rem` of padding, set from `vault.js` when the vault
is not owned. The whole sheet changes stock; there is no "shared" badge.

**The counterfoil.** `[data-counterfoil]` is the tint block above the tear-line
carrying the server's half of the ticket — opaque ids, counts, times. It is the
only place in the app that changes colour without changing meaning, and the
meaning it carries is "this side is theirs".

**The overprint.** `[data-overprint]` ends the sheet: small, faint,
letterspaced caps under a hairline, aligned to the start, carrying the build
serial. A sheet with nothing at the foot is a sheet that just stops.

### Motion

**The One Authored Moment Rule.** The world's native motion is the tear, so
there is exactly one animation in the app: the vault opening. The sealed half
below the line is revealed once on unlock — `clip-path: inset(0 0 100% 0)` to
`inset(0 0 0 0)` with opacity, `620ms`, `cubic-bezier(0.16, 1, 0.3, 1)`, `both`
— easing the way paper separates, fast at the start and settling at the end.
Nothing else animates; there is not one hover transition in `contra.css`. The
keyframes' end state is the visible one, so an engine that ignores the
animation shows the content immediately, and `prefers-reduced-motion: reduce`
removes it outright.

### Browser surfaces

The parts nobody drew still carry the design: selection is manila under ink,
scrollbars are thin in `{colors.line-strong}` on the tint block, and the caret
is the numbering vermilion. On a page whose whole argument is deliberateness, a
default that belongs to no design system shows.

## Do's and Don'ts

### Do:
- **Do** print the page on one sheet: `{colors.stock}` edge to edge, the column at `60rem`, no border, no card.
- **Do** build every input as the field box — cap label, 2px rule, value sitting on the rule.
- **Do** keep the second colour large: 24px up, or 18.66px bold. Small red is `{colors.tone-negative-fg}`.
- **Do** draw the tear-line only where a real client/server boundary exists, once per screen, at the shared 12px pitch.
- **Do** group with a rule, a tint block, or a change of stock.
- **Do** set headings in the display face and keep `h1` in sentence case over its 3px ink rule.
- **Do** recompute the contrast rows in `theme.css`'s header whenever a colour token changes; the table is the record and 4.5:1 / 3:1 are binding.
- **Do** let `code` print its own case and its own tabular figures — a serial is transcribed, not styled.
- **Do** declare any new token once as `light-dark(<light>, <dark>)` under the single `:root`, so both schemes stay complete and the toggle keeps working.

### Don't:
- **Don't** edit `internal/contra/static/tokens.css`. It is vendored from the rastrillo framework and pinned byte-identical by a test; it contributes the spacing steps, the type scale, the framework component rules and the `64rem` column default. CONTRA's overrides go in `theme.css` (colour, type, shape) and `contra.css` (grammar and components), which loads last and wins.
- **Don't** add a card, a rounded corner, or a shadow that reads as a lift. Radius is `0` except the status pill, which is a rubber stamp.
- **Don't** add texture: no distress, no paper grain, no torn-paper shadows, no rotated stamps, no fake staples, no perforated GIFs as decoration. That is a fairground; this is a station cloakroom.
- **Don't** reach for the category default — deep navy, rounded cards, a lock mark, green-for-safe.
- **Don't** colour a link or a primary button. The accent is the ink.
- **Don't** spend manila on anything but a vault owned by somebody else, or vermilion on anything but counting and the irreversible.
- **Don't** set a sentence in condensed capitals, and don't set caps furniture in League Gothic — it is a poster face and goes spindly at label size.
- **Don't** add hover transitions or a second animation. One authored moment; everything else is instant.
- **Don't** put a notice behind a coloured left border; it is a top-ruled stamped block.

## Known gaps in the shipped build

Recorded so the next pass inherits the truth rather than rediscovering it.
These are defects or accepted costs the build carries; none of them is a rule
for a new surface to imitate.

- **The caps furniture is in the system UI stack, not the display face.** The reasoning is written above the `label` rule in `contra.css` and is a legibility argument, not an omission. The accepted cost: the small caps render in a different typeface per operating system while the display line does not.
- **The Emergency Kit PDFs** (`internal/contra/static/crypto/kit.js`, `pdf.js`) still use PDF base-14 fonts and have not been brought into this world. It is the product's only printed artefact and the largest outstanding item. Do not read its current typography as a system decision.
- **`index.html`'s prose** carries two stale sentences awaiting a copy review. Copy, not visual system; out of scope for this file.