B. Interaction states
The button family stays closed (desk-button*). Every variant keeps min-h-11 and
focus-visible:outline-2 outline-offset-2 outline-focus. The family drops hover:-translate-y-0.5,
hover:shadow-* and disabled:opacity-50. Disabled is explicit: bg-surface text-muted border-line
(light 4.99, dark 8.67).
| Variant | Rest | Hover | Active | Light r/h/a | Dark r/h/a |
|---|---|---|---|---|---|
desk-button-primary (staff main) |
bg-accent text-on-accent |
bg-accent-hover |
bg-accent-active |
5.68 / 6.24 / 6.78 | 5.68 / 6.24 / 6.78 |
desk-button-brand (ex -secondary; public/member main) |
bg-brand text-on-brand border-brand-boundary |
bg-brand-hover |
bg-brand-active |
default = primary; tenants proven by H.5 | |
desk-button (neutral; the outline “secondary”) |
bg-panel text-ink border-line |
bg-hover |
bg-line |
14.75 / 11.95 / 9.60 | 16.98 / 15.71 / 12.87 |
desk-button-ghost |
text-accent-ink, no fill |
bg-accent-soft |
bg-accent-soft text-ink |
6.16 / 5.16 / 12.37 | 7.68 / 7.19 / 15.89 |
desk-button-emphasis (new; the one bold public CTA, never in staff chrome) |
bg-emphasis text-on-emphasis |
-hover |
-active |
5.51 / 5.99 / 6.55 | same |
desk-button-danger (final confirm) |
bg-danger text-on-danger |
bg-danger-hover |
bg-danger-active |
5.96 / 7.66 / 8.80 | 7.77 / 8.99 / 10.06 |
desk-button-danger-outline (new; “Delete organisation…”) |
bg-panel text-danger border-danger |
text-danger-hover border-danger-hover |
same + bg-hover |
6.47 / 8.31 / 6.73 | 9.71 / 11.22 / 10.38 |
desk-button-success / -warn (kept in Phase 1, folded into primary/neutral in Phase 6) |
bg-success|warn text-on-* |
-hover |
-active |
13.23/10.99/8.99 · 10.37/8.66/7.11 | same |
| Element | Rest | Hover | Selected / current | Ratios (light · dark) |
|---|---|---|---|---|
| Sidebar item (text-only, D9) | text-ink on sidebar |
bg-sidebar-hover |
bg-sidebar-active text-on-accent font-semibold, aria-current="page" |
13.23 / 14.06 / 5.68 (pill vs field 5.52) · 18.14 / 15.71 / 5.68 (pill vs field 3.20) |
| Sidebar sub-item (reference org5: indented, smaller) | text-muted 14/20 |
text-ink |
text-ink font-semibold, no fill |
5.23 · 8.67 |
| Underline tab | text-muted |
text-ink |
text-ink font-semibold + 2 px accent underline |
underline 5.68 · 3.41 on bg, 2.99 on panel |
| Segmented control | track bg-surface border-line |
text-ink |
thumb bg-panel border-outline text-ink |
thumb boundary 3.55 · 4.17 |
| Table / list row | bg-panel |
bg-hover |
bg-accent-soft + checked box |
14.75 / 11.95 / 12.37 · 16.98 / 15.71 / 15.89 |
| Input | bg-panel border-outline text-ink, placeholder text-muted |
border-ink |
focus: border-accent + ring |
boundary 3.55 · 4.17 |
| Search field (p.16 citron field) | bg-sidebar border-transparent, Search icon |
bg-sidebar-hover |
ring | text 13.23, placeholder 5.23 · dark bg-surface |
| Invalid field | border-danger + message text-danger |
6.47 · 9.71 | ||
| Link | text-accent-ink, underline on hover |
5.68 · 8.76 | ||
| Theme toggle | Light / Dark only (D11) |
Counters (unread, cart): bg-emphasis text-on-emphasis (5.51), at full opacity.
Part of Space Works brand → SpaceWorks UI: design-system spec, published from docs/ui-brand-spec.md. Edit it there.
Related v2.1 references
Section titled “Related v2.1 references”Boundary-strong and state-indicator restrictions, with default/hover/active/selected pairings · Role usage