States
Every interactive element in RAPIDA has clearly defined states. In crisis contexts, a user must always know: What can I do? What just happened? What is the system doing?
Interaction States
All interactive elements cycle through these states. Each must be visually distinct.
| State | Visual Treatment | Example |
|---|---|---|
| Default | Base styling with clear affordance | |
| Hover | Lightened or darkened background (150ms transition) | Hover over the button above |
| Focus | ring-2 ring-rapida-blue-700 ring-offset-2 |
Tab to the button above |
| Active / Pressed | scale-[0.98] micro-scale |
Click and hold |
| Disabled | opacity-40 cursor-not-allowed |
|
| Loading | Spinner icon + disabled + aria-live="polite" |
Validation States
Validation errors must be clear and non-punishing. Use role="alert" for screen reader announcements.
Default — No Errors
Error State
Please enter the infrastructure name.
Success / Valid
No explicit success state on inputs — absence of error is confirmation. Use badges or toasts for submission success.
Data & Sync States
Reports move through sync states. Field workers often have intermittent connectivity.
| State | Color | Meaning |
|---|---|---|
| Draft | Slate | Report saved locally, not submitted |
| Synced | Green | Successfully uploaded to server |
| Pending | Amber | Queued for upload, waiting for connection |
| Failed | Red | Upload failed, will retry automatically |
| Verified | RAPIDA Blue | Coordinator has reviewed and confirmed |
Damage Level States
Damage classification uses a three-level scale with color-coded badges and radio cards.
| Level | Color | Dot | Meaning |
|---|---|---|---|
| Minimal | Green | Infrastructure usable, cosmetic damage only | |
| Partial | Amber | Significant damage, limited functionality | |
| Complete | Red | Fully destroyed or impassable |
Loading States
Always show loading feedback. Never leave the user guessing whether the app is working.
Reduced Motion
- All animated components use
motion-reduce:variants. - Spinners switch to
animate-pulsewhen reduced motion is preferred. - Skeleton loaders stop pulsing and show static placeholder blocks.
- Transitions reduce to 0ms — state changes are instant.
- Progress bars still show position but do not animate the fill transition.