Product Design

What design decision are you making right now?

These checklists give you pass/fail thresholds for every decision. No subjective advice. Every check has a number and a method to measure it.

The Audit Sequence

Run these four on everything, in order:

1. RENDERING     → Does it exist in the browser?
2. VISUAL        → Can humans read and navigate it?
3. RESPONSIVE    → Does it work at every viewport?
4. INTERACTION   → Can everyone use it?

Then pick the situation-specific checklist.

Situation Router

You're doing this	Use this
Deployed but something looks wrong	Rendering Verification
Making it look professional	Visual Design
Testing on phones or checking speed	Responsive + Performance
Ensuring everyone can use it	Interaction + Accessibility
Building a page that needs to convert	Landing Page
Building reusable UI components	Component Design
Building admin/data management UI	Data Interfaces
Reviewing someone's work	Design Review
Setting up Tailwind v4 theme tokens	Tailwind Theme
Looking for the style guide	Design System

Five Universal Checks

Run these on every page, every time:

#	Check	Threshold	Method
1	Text readable	4.5:1 contrast ratio	Chrome DevTools color picker
2	Touch targets	44x44px minimum	DevTools element inspector
3	Primary action visible	Above fold, unique color	Squint test at arm's length
4	Load speed	LCP under 2.5s	Lighthouse audit
5	Keyboard navigable	All actions reachable via Tab	Unplug mouse, navigate

Context

• Dreamineering Design System
• Process Optimisation -- Checklists as expert tools
• Value Speed -- Speed as a design principle
• Standards -- Why measurable thresholds matter