Design
Principles
Light first. One accent. Four-pixel spacing. Components sit in a transcript, so they should read like sentences with a decision in them.
Tokens
Spacing
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
Type
Ask only when you must
Confirm before you act
Body at 15px, line height 24. The measure stays near 65 characters.
Interface text is 13px. Labels can be 12px if they are not the only instruction.
latch://catalog/v1
Color
- Ink
- Muted
- Line
- Accent
- Surface
- Confirmed
- Error
- Reroute
Radius
One principle each
If a component needs a second idea, it is probably two components.
- 1. ConfirmCard
A consequential action is a review, not a button.
- 2. ClarifyForm
Ask only for the one fact that blocks the work, then collapse it.
- 3. HandoffCard
Name who is handling the request, and log a wrong handoff.
- 4. ThinkingSteps
Show the work as quiet prose. No card, no timer.
- 5. ChoiceList
A decision is a list with one selected, not a wall of buttons.
- 6. ItemSummary
Quantity and money stay visible and editable until confirm.
- 7. StatusPill
A status is a short sentence, not a color.
- 8. Citation
A claim that depends on a source carries the source with it.
Motion
The current thinking step fades, and only that. Reduced motion removes the fade. Nothing else moves to prove that work is happening. There is no elapsed-time counter.