Spacing & Layout
Consistent spacing reduces cognitive load. RAPIDA uses a 4px base grid with named tokens for every level of visual hierarchy.
Spacing Scale
All spacing values derive from a 4px base unit. Named tokens map to Tailwind utility classes.
nano
4px
micro
8px
element
12px
inner
16px
padding-card
20px
gap-component
24px
gap-section
32px
section
40px
padding-page-x-mob
16px
padding-page-x-tab
24px
48px
48px
64px
64px
96px
96px
Touch Targets
Minimum 48px for all interactive elements. Crisis users often have shaking hands, wet fingers, or broken screens.
48
Minimum
56
Comfortable
64
Large / Primary
Border Radius System
Rounded corners signal safety and approachability.
2px
Small — tags
4px
Default — inputs
8px
Cards, buttons
12px
Modals, upload zones
9999px
Badges, dots, avatars
Shadow System
Subtle shadows create depth hierarchy. Use sparingly in field conditions where screens may be dimmed.
shadow-xs
XS
shadow-sm
SM
shadow
Default
shadow-md
MD
shadow-lg
LG
Focus Shadow
ring-2 ring-rapida-blue-700
Motion Tokens
All motion respects prefers-reduced-motion. Keep transitions short — users are under time pressure.
| Token | Duration | Easing | Usage |
|---|---|---|---|
| duration-100 | 100ms | ease-out | Button active press |
| duration-150 | 150ms | ease-in-out | Color transitions, hover states |
| duration-200 | 200ms | ease-in-out | Toggle switch, sidebar slide |
| duration-300 | 300ms | ease-out | Progress bar fill, skeleton pulse |