unified-design-system · format check
One component, every decision named, one sentence of why each. This is the format for the exhaustive design doc — confirm it before the remaining components (card, input, chip, dialog, switch, divider, checkbox, snack bar) get written the same way.
Radius: radius-sm, 8px.
Same token as inputs and chips — reads as one family of
interactive elements, not a size picked for buttons alone.
Padding: 24px / 12px. Horizontal is exactly 2× vertical (rule 22) — never tuned per component.
Label: 16px, body.
A button is read, not decorative chrome, so it never drops
below the 16px floor.
Fill only, no shadow. Dark surfaces never carry a shadow — weight comes from the accent fill itself.
Fill vs. border-only is the only weight distinction — never two
filled buttons on one screen, so Log meal
(primary action) and Add item
(secondary) read as different weight at a glance.
on-fill
(#211d1b, dark), not
near-white — near-white measured ≈3.2:1 on this fill, below the 4.5:1
body-text target (true for every semantic fill, not just accent: all
four cluster in the same mid-light band). Dark text passes 5.8–9.7:1
on all four; it's a closed rule, not a per-color pick. on-fill
is distinct from the near-white used on dark scrim overlays — see
tokens.md.
| Property | Value | Rule |
|---|---|---|
| Corner radius | 8px | shared with inputs/chips |
| Padding | 12px 24px | rule 22 — 2× ratio |
| Label size | 16px | rule 20 — body floor |
| Depth | fill / border only | shadow policy |
| Primary fill | accent #b8862e | tokens.md |
| Primary label | on-fill #211d1b | 4.5:1+ on all 4 fills |
| Secondary | surface-1 + 1px border | tokens.md |
| Disabled | opacity 0.5 | no separate muted token |