These are the real component styles, not a redraw — this card loads
ui_kits/app/app.css. Every control is mono, uppercase, .07em,
4px radius. Hover to see the 1px lift; press to see the inset.
.btn.solid is the primary on light — forest fill, white text (7.13:1). .ghost drops to a --border outline and only turns --sage on hover. Volt never appears on the light canvas.
.btn.volt is the primary on dark and the only place volt is spent as a fill — 15.01:1 for its ink. .ondark is a 50%-white outline that inverts to a white fill.
The live dot pulses exactly three times, then stops.
| State | Transform | Fill / border | Elevation |
|---|---|---|---|
| Rest | none | Per variant | --shadow-sm on .solid only |
| Hover | translateY(-1px) | Inverts to forest / white | --shadow |
| Active | translateY(0) | unchanged | --shadow-in (inset press) |
| Focus | none | unchanged | 2px --forest outline, 3px offset (--volt on dark) |
| Disabled | none | opacity .45 | none |
All transitions .18s cubic-bezier(.2,.7,.2,1).
Padding is 12px 18px — a 42px control, sitting inside 44px touch rows.
Only two exist in the source, and they encode a specific distinction: we have the records versus the records are on the public record but not yet obtainable. Never invent a third color for a third state — write a clearer label instead.
.stamp.live — --forest on #e9f2e8 (6.22:1) · .stamp.prep — --amber-ink on #f8f2e4 (5.05:1). 10px mono, .11em, 1px currentColor border — 10px is the system's size floor.
Real <button> elements bound to hover, focus and click.
Click locks the isolate and sets aria-pressed; Escape clears it.
This is the one 999px shape in the system.
Second chip shows the locked state. Live behaviour on preview/components-data.html.
Not present in index.html — derived from the system's posture for
the corrections/records-request flows the remaining pages need. Quiet and official: mono uppercase labels,
no decorative chrome, --sage hover, forest focus ring.