Purpose
To capture and validate all interaction states for UI elements across screens — Default, Hover, Active, Disabled, Error, Success, etc.
Table – UI State Variants
| Component / Element | Screen ID | State | Visual Reference (Wireframe/UI link) | Behavior / System Response | Notes |
| Primary Button | UI-01 (Landing Page) | Default | [Figma link] | CTA visible, high contrast | Use Color-Primary token |
| Primary Button | UI-01 | Hover | [Figma link] | Background darkens 10% | Must meet WCAG AA |
| Primary Button | UI-01 | Disabled | [Figma link] | Greyed out, non-clickable | Cursor = not-allowed |
| Form Input | UI-02 (Signup) | Default | [Figma link] | Empty field with placeholder | Base border color |
| Form Input | UI-02 | Focus/Active | [Figma link] | Blue border highlight | Inline helper text visible |
| Form Input | UI-02 | Error | [Figma link] | Red border, error message inline | Show accessible error icon |
| Notification Banner | UI-03 (Dashboard) | Success | [Figma link] | Green background, check icon | Auto-dismiss after 5s |
| Notification Banner | UI-03 | Error | [Figma link] | Red background, alert icon | Sticky until dismissed |
Usage Notes
- Each component/screen must have a state variant entry.
- Always link to visual references (Figma frame, UI screenshot).
- Behavior notes are critical for dev handoff → don’t skip.
- Keep this sheet updated during design reviews.