Design & Experience

Is this pleasant to use?

Review design system adherence, interaction patterns, and responsive behavior. Ensure your app feels polished and consistent.

Stage expectations

POC

Skip check

Rough is fine at this stage
Focus on functionality
Polish comes later

MVP

Light check

Core flows feel intentional
Basic loading states exist
Not obviously broken on mobile

MMP

Full check

Design system fully applied
All states handled gracefully
Polished responsive experience

PROD

Complete check

Production-grade across viewports
Micro-interactions refined
Consistent with brand guidelines

Design Tokens

MVP+

Colors use CSS variables from design system (not hardcoded hex)
Spacing uses token values (gap-sm, gap-md, gap-lg)
Border radius consistent (uses design tokens)
Shadows use defined shadow tokens
No magic numbers for colors, spacing, or sizes
Dark mode uses inverted tokens correctly

Typography

MVP+

Font family matches brand guidelines
Font sizes follow type scale (Text, Title components)
Font weights used consistently (regular, medium, semibold, bold)
Line heights appropriate for text size and context
No inline font styling that bypasses system
Heading hierarchy visually distinct

Spacing & Layout

MMP+

Stack/Row/Grid primitives used for layout
Consistent gaps between sections
Padding consistent within similar components
Alignment is intentional (not default browser)
Visual rhythm maintained across pages
Whitespace used purposefully

Color Usage

MMP+

Primary color used consistently for actions
Secondary colors have clear purpose
Semantic colors used correctly (success, warning, error)
Neutral colors for backgrounds and borders
Color palette not exceeded (no random colors)
Dark mode colors intentionally designed

Component Consistency

MMP+

Buttons use consistent variants (primary, secondary, ghost)
Form inputs styled consistently
Cards have consistent border, shadow, padding
Icons from single icon set (Lucide)
Icon sizes consistent with context (16px, 20px, 24px)
No component style divergence between pages

Common Issues & Quick Fixes

Hardcoded color values in components: Replace with CSS variables: var(--color-primary)

Inconsistent spacing between sections: Use Stack with gap-xl or consistent section spacing

Mixed icon sets: Standardize on Lucide icons, replace outliers

Typography sizes not from scale: Use Text size prop: sm, default, lg

Custom one-off component styling: Extract to shared component or use existing UI component

Tools & Resources

Design System Tools

Storybook — Component documentation and testing
Figma — Design collaboration platform
Chromatic — Visual regression testing
Style Dictionary — Design token management

Responsive Testing

Chrome DevTools — Device simulation and debugging
Responsively — Multi-device preview tool
BrowserStack — Real device testing
Polypane — Developer browser for responsive

UX Patterns

UI Patterns — Common UI pattern library
Mobbin — Mobile design patterns
Page Flows — User flow inspiration
Laws of UX — UX psychology principles

Component Libraries

shadcn/ui — Catalyst's UI component system
Radix Primitives — Accessible component primitives
Headless UI — Unstyled accessible components
Base UI — Unstyled components from MUI

AI Agent Commands

Use these prompts with your AI coding agent to check design quality:

Run the Design & Experience audit at MVP level
Check for hardcoded colors in components
Find components missing loading states
Audit empty states across the app
Check mobile responsiveness at 320px viewport

Related audits

Accessibility & Inclusion

UX for users with diverse abilities

Speed & Performance

Performance impacts experience

Content & SEO

Content quality and clarity