E. Shape, borders, shadow, spacing, motion
Current rule (v2.0.1, 2026-11-13): The vector measurements immediately below are research provenance, not additional component defaults. The following role/token table supplies product defaults: control 10 px, card 16 px, round status tag; sidebar geometry 256/20/44/4. Cards are flat; shadow-overlay is the explicit floating-layer exception. (1A-N08) — supersedes the line above; see docs/current-rules.md#cr-scope-01.
Measured from the p.16 vector mock (the 1312 × 493 product frame):
| Element | Measurement |
|---|---|
| Window radius | 16 |
| Nav item | 205×49, r 10 |
| Primary button | 197×47, r 9 |
| Search field | 997×49, r 8, Citron |
| Status tags | 34 tall, fully round |
| Row rules | Deep Ink 1 px at opacity 0.18 |
| Shadows | none anywhere |
| Sidebar | 245 wide, 20 px inset, labels inset 19 |
| Nav | text-only |
The UX reference (org5) shows the same pattern: a text-only nav, an active item filled warm grey, sub-items indented, and danger as a white card with a red-300 border.
| Token | Value | Notes |
|---|---|---|
--radius-control |
10px (brand). Owner may switch it to 9999px for pill buttons. |
buttons, nav items, inputs, segmented thumb |
borderRadius sm / DEFAULT / md / lg / xl / 2xl / full |
6 / 8 / 10 / 12 / 16 / 20 / 9999 | xl = cards and panels (was 18). md (273 uses) 12→10. lg (93) 14→12. |
| Borders | 1px line on cards and dividers. 1px outline on form controls. 2px only for the tab underline and the focus ring. |
|
| Shadow | cards none. shadow-overlay = 0 2px 6px rgb(var(--shadow-color)/.06), 0 12px 32px rgb(var(--shadow-color)/.10) for popovers, menus, modals, drawers and toasts only. |
soft, soft-lg, brutal* and elev-* deleted |
| Spacing | 4 px grid: 4/8/12/16/20/24/32/40/48/64. Page gutter 16 / 24 / 32. Sidebar 256 wide, 20 inset, items 44 tall with a 4 px gap. Card padding 20 (24 on settings). Rows 56 (list) / 48 (table). Every control is 44 tall. | |
| Motion | Shipped 0.12.0 tokens (tokens/tokens.css, motion in tokens.json): durations --sw-dur-fast 120 ms (press, hover, exit), --sw-dur-base 180 ms (overlays, indicators), --sw-dur-slow 240 ms (route settle); curves --sw-ease-standard cubic-bezier(0.2,0,0,1), --sw-ease-enter cubic-bezier(0.16,1,0.3,1), --sw-ease-exit cubic-bezier(0.4,0,1,1); distances --sw-enter-y 8px, --sw-pop-scale 0.98, --sw-pop-offset 4px, --sw-slide-x 100%. Kiosk and TV zero the distances (fade only); prefers-reduced-motion zeroes durations and distances. Transform and opacity only; no translate or scale on hover, with one exception: the Space Works mark’s box-open (the box folds shut and opens back on hover and keyboard focus, 2200 ms, never on touch or under reduced motion; see motion.md). |
Supersedes the earlier 200 / 240 / 160 ms proposal |
Current rule (v2.0.1, 2026-11-13): No later owner switch to fully round product buttons is recorded. Keep the 10 px control and 16 px card defaults; “may switch” is conditional. The retained reference pill geometry does not authorise a switch. (1A-N09) — supersedes the line above; see docs/current-rules.md#cr-radius-01.
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”Spacing, radius, size, border, elevation, layer and breakpoint roles · Source decisions, including spec 256px versus app 264px sidebar width