UI Health Check
Manual QA checklist for UI consistency, contrast, and responsiveness
Responsive Breakpoints
375px
Mobile
iPhone SE / small phones
768px
Tablet
iPad portrait / medium tablets
1280px
Desktop
Standard desktop screens
1920px
Large
HD displays
Use browser DevTools responsive mode to test each breakpoint. Verify cards wrap properly and text remains readable.
Contrast Verification Checklist
Payment Terms
White text on dark panel with borders
Status Badges
Colored text with colored backgrounds (10% opacity)
Select Inputs
White text on dark input with light borders
Table Headers
Muted text (white/40) on panel background
Card Text
Primary text (white/95), secondary (white/70)
Buttons
White/80 text on white/08 background
Modal Content
Same as card standards
Form Labels
White/50 for labels, white/80 for inputs
UI Design Tokens
Text Colors
Primary (95%)
Secondary (70%)
Muted (50%)
Disabled (30%)
Status Colors
Success
Warning
Danger
Info
Neutral