Spacing
The spacing scale, read live from ui-core.
The spacing scale is global — it doesn't shift per brand. Parsed from
packages/ui-core/src/styles/tokens/spacing.css at render time.
| Preview | Token | Value |
|---|---|---|
--space-0 | 0 | |
--space-1 | 0.25rem | |
--space-2 | 0.5rem | |
--space-3 | 0.75rem | |
--space-4 | 1rem | |
--space-5 | 1.5rem | |
--space-6 | 2rem | |
--space-7 | 3rem | |
--space-8 | 4rem | |
--space-9 | 6rem | |
--space-10 | 8rem |
Control height
Form controls are 44px tall (h-11). Input, Combobox, SelectTrigger and MultiSelect all
use it, so a row of mixed controls lines up rather than stepping. They share the rest of the field
shell too — w-full, rounded-sm, bg-card, a single border-input hairline, no shadow — so a
dropdown beside a text box doesn't read as a different kind of control.
44 is the figure WCAG 2.5.5 Target Size (Enhanced) (level AAA) asks for, and the same number Apple's Human Interface Guidelines use for a touch target.
This is a comfort decision, not a compliance fix. The AA requirement is WCAG 2.5.8 Target Size (Minimum), which asks for 24px — the previous 36px control already met it, with room to spare. Going to 44px buys a larger pointer target and a more even vertical rhythm; it does not move these components from failing to passing.
SelectTrigger keeps a 36px variant at size="sm" for dense contexts such as a pager or a filter
bar. Reach for it deliberately, not as the default.