Locator + label
Verification active07 / Reference
02 / System
Components.
A small vocabulary of labels, rules, records, ledgers, controls, and fields. Every component has a communication job.
- Shape
- Square
- Border
- 1px current color
- Type
- Inter + Plex Mono
- State
- Text + shape + signal
02.1 / Primitives
Utility is visible, but never theatrical.
The interface is precise enough to feel instrumental without drifting into dashboard theater. Labels orient; controls act; status marks report.
Actions
Status
LivePendingArchived
Text field
02.2 / Editorial records
Most information belongs in rows, not cards.
Receipts show a compact state. Records pair an index with a claim. Ledgers handle comparable work. Borders reveal the shared structure.
Receipt / readout
- Date
- 2026-08-15
- Lens
- Vision
- Status
- Reviewed
Indexed records
Name what changed
State the material shift in one complete sentence.
Show what follows
Connect the change to a decision or operating move.
Operational ledger
01Opening answer
02System proof
03Release standard
02.3 / Media + proof
Media sits inside a deliberate field.
The frame separates a film, source visual, or interactive specimen from the reading surface. It does not imitate a device or add ornamental chrome.
Frame zero is complete. 16:9 semantic field
Use native media controls
A packet embeds the film directly. A separate decorative video viewer is a retired pattern.
Preserve the poster
The opening frame is an authored artifact, not whatever state the player happens to expose.
Keep the surround quiet
No rounded device shell, drop shadow, redundant chapter rail, or custom transport unless the use case requires it.
02.4 / Composition rules
Components do not become a component zoo.
A page should feel written and composed. Repetition establishes trust; variation comes from the claim, proof, and field—not from a new container for every paragraph.
- 01
Prefer one rule to one box
If adjacency already establishes a group, do not add another border.
- 02
Preserve internal safe areas
Framed rows, ledgers, and diagram nodes keep 24–28px of optical breathing room.
- 03
Never communicate with color alone
Pair green with position, label, border, or state text.
- 04
Mono remains subordinate
Use it to orient and verify. Do not set paragraphs or personality copy in mono.
- 05
Controls retain focus
Keyboard focus is clearly visible and does not move unexpectedly after state changes.
02.5 / Required states
A component is a behavior contract.
Every applicable state is designed before release. Long copy and missing media are first-class inputs, not edge cases discovered in production.
01
Default · hover · focus · active
Clear affordance, keyboard-visible focus, and state change that does not depend on color alone.
02
Disabled · loading
Preserve the control’s place, expose programmatic state, and prevent duplicate action.
03
Error · empty
Name what happened, what remains safe, and the next available action. Empty surfaces explain purpose.
04
Long copy · localization
Allow natural wrapping and vertical growth. Never clip, shrink below the role, or turn prose into ellipsis by default.
05
Missing media
Collapse the frame or show a meaningful fallback; never leave a broken-image ornament.
06
Locked · unlocked
Keep protected content out of public output. Use green only when the threshold is actually cleared.