/frontend-engineer

Design Quality Checklist

Visual QA checklist to run before delivering any frontend work. Read this reference when finalizing UI for delivery.

Spacing

• Consistent spacing scale used throughout (4px / 8px / 12px / 16px / 24px / 32px / 48px / 64px)
• No mismatched gaps between similar elements
• Adequate padding inside containers — content never touches edges
• Vertical rhythm maintained between sections
• Spacing between form labels and inputs is uniform
• Card content has consistent internal padding

Typography

• Clear heading hierarchy: h1 > h2 > h3 distinct in size, weight, or both
• Body text readable at 14–16px minimum
• Line height 1.4–1.6 for body text, tighter (1.1–1.3) for headings
• Maximum line length 60–80 characters for readability
• No more than 2–3 font families per project
• Font weights used intentionally: regular for body, medium/semibold for labels, bold for headings
• Text truncation with ellipsis where overflow is possible
• No orphaned single words on their own line in headings (when controllable)

Color and Contrast

• WCAG AA contrast minimum: 4.5:1 for body text, 3:1 for large text and UI controls
• Interactive elements visually distinct from static text
• Color not used as sole indicator of state (add icons, text, or patterns)
• Hover/focus/active states use distinct color shifts
• Dark mode (if present) has proper contrast, not just inverted colors
• Backgrounds don't wash out text in any theme

Interaction States

• Every interactive element has: default, hover, focus, active, and disabled states
• Focus ring visible and follows logical tab order
• Loading states shown during async operations (skeleton, spinner, or progress)
• Disabled controls visually muted and non-interactive
• Buttons show pressed/active feedback
• Links visually distinct from buttons

Empty, Loading, and Error States

• Empty states designed with helpful message and call-to-action
• Loading states prevent layout shift (use skeletons or fixed-size placeholders)
• Error states show clear message with recovery path
• Form validation errors appear inline next to the relevant field
• Network error states offer retry option
• No raw error messages or stack traces shown to users

Content Overflow

• Long text truncates or wraps gracefully — no horizontal scrollbar on body
• Tables scroll horizontally in a container on mobile, not the entire page
• Images constrained with max-width: 100% and height: auto
• User-generated content (names, descriptions) tested with long strings
• Dropdown menus and popovers stay within viewport bounds
• Modals scroll internally when content exceeds viewport height

Visual Consistency

• Border radius consistent across similar elements
• Shadow depth consistent for same elevation level
• Icon size consistent within same context (16px inline, 20px buttons, 24px features)
• Alignment grid respected — no off-by-1px misalignment
• Color palette limited and consistent — no one-off hex values
• Component patterns reused — same thing looks the same everywhere

Screenshot QA Checklist

Before marking frontend work complete:

1. Desktop (1440px) — Full layout, no overflow, alignment correct
2. Tablet (768px) — Layout adapts, no overlapping elements
3. Mobile (375px) — Stack layout, touch targets ≥44px, no horizontal scroll
4. Dark mode (if applicable) — All text readable, no missing backgrounds
5. Empty state — Component shown with no data
6. Full state — Component shown with maximum realistic data
7. Error state — At least one error scenario visible
8. Keyboard only — Tab through all interactive elements, focus visible