| name |
items |
| Typography |
| Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios) |
| Pair a distinctive display font with a refined body font |
| Set body text at 16-18px minimum for readability |
| Use proper line heights (1.4-1.6 for body, tighter for headings) |
|
|
| name |
items |
| Color & Contrast |
| Build palettes from a dominant color with intentional accents |
| Use off-whites and near-blacks for softer, sophisticated feel |
|
|
| name |
items |
| Layout & Space |
| Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96) |
| Create visual rhythm through varied spacing |
| Use asymmetry and unexpected compositions |
| Break the grid intentionally for emphasis |
|
|
| name |
items |
| Motion |
| Use 150-300ms for micro-interactions |
| Prefer transform and opacity (GPU-accelerated) |
| Stagger reveals for orchestrated page loads |
|
|
| name |
items |
| Interaction |
| Write specific, helpful error messages |
|
|
| name |
items |
| Responsive |
| Use fluid typography (clamp for smooth scaling) |
| Test landscape orientation on mobile |
| Consider device capabilities (not just screen size) |
|
|
|
| name |
items |
| Typography |
| Don't implement arbitrary font sizes without a scale |
|
|
| name |
items |
| Color & Contrast |
| Don't use gray text on colored backgrounds |
| Don't use pure gray, pure black (#000), or pure white (#fff) - add subtle color tint |
| Don't create palettes with arbitrary color choices |
|
|
| name |
items |
| Layout & Space |
| Don't wrap everything in cards |
| Don't nest cards inside cards |
| Don't make all spacing equal (variety creates hierarchy) |
| Don't create hierarchy through size alone |
|
|
| name |
items |
| Motion |
| Don't use durations over 500ms for UI feedback |
| Don't animate layout properties (width, height, padding, margin) - use transform instead |
| Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo |
|
|
| name |
items |
| Interaction |
| Don't use placeholder text as labels |
| Don't show generic error messages |
| Don't repeat the same information (redundant headers, intro restating heading, etc.) |
|
|
| name |
items |
| Responsive |
| Don't hide critical functionality on mobile |
| Don't use device detection over feature detection |
| Don't forget about landscape orientation |
|
|
|
Paul BakausandClaude Opus 4.5
8e4f48566f