Foundations
Tokens & layout
BR-UI now exposes spacing, stacking, motion, focus, opacity, blur, and status tokens as first-class CSS vars. Use them before inventing local values.
Spacing
| Token | Value | Use |
|---|---|---|
| --space-1 | 4px | Fine offsets, icon gaps |
| --space-2 | 8px | Compact inline gaps |
| --space-3 | 12px | Control internals |
| --space-4 | 16px | Default cluster gap |
| --space-5 | 24px | Card and form rhythm |
| --space-6 | 32px | Panel padding |
| --space-7 | 48px | Section groups |
| --space-8 | 64px | Major page breaks |
Stacking
| Token | Value | Use |
|---|---|---|
| --z-sticky | 40 | Topbar |
| --z-menu | 50 | Tooltip, popover, dropdown |
| --z-overlay | 60 | Scrim |
| --z-modal | 70 | Dialog, sheet, drawer |
| --z-toast | 80 | Toast host |
| --z-tweaks | 90 | Tweaks panel |
Motion
| Token | Value | Use |
|---|---|---|
| --duration-fast | 120ms | Small state changes |
| --duration-base | 220ms | Default interaction |
| --duration-slow | 420ms | Entrances and large shifts |
| --ease-standard | cubic-bezier(.2,.8,.2,1) | Default |
| --ease-out-quart | cubic-bezier(.16,1,.3,1) | Entrances |
Responsive strategy
Breakpoints are exposed in Tailwind v4 as br-sm, br-md, br-lg, br-xl, and br-2xl. Prefer grids that collapse 4 → 2 → 1 and keep tables horizontally scrollable below dashboard width.
Reduced motion
Global animations and transitions respect prefers-reduced-motion. Keep local animation code on --duration-* and --ease-*so that system override remains effective.