Design Rules
Logo & Brand
Simple enough to work at 16px favicon — complexity disappears at small scale
Recognizable in one color — gradients are enhancements, not crutches
Test on dark and light backgrounds — logos need both versions
3-5 brand colors maximum — primary, secondary, accent, plus neutrals
Consistency builds recognition — every touchpoint reinforces or dilutes brand
Visual Hierarchy
Size and weight guide attention — most important element most prominent
One focal point per screen — competing elements confuse users
Whitespace groups, separates, and elevates — it's not empty space
Alignment creates invisible order — grids make everything feel intentional
Contrast for emphasis, similarity for grouping — break patterns deliberately
Typography
Two typefaces maximum — heading and body is enough
Body text 16px minimum on web — smaller is unreadable
Line height 1.4-1.6, line length 45-75 characters — readability basics
Pair fonts with contrast — serif with sans-serif, not two similar fonts
Color
60-30-10 rule: dominant, secondary, accent — prevents chaos
Warm colors advance, cool recede — use for depth and emphasis
Contrast ratio 4.5:1 for text — accessibility isn't optional
Test with colorblind simulators — 8% of men have color vision deficiency
Layout
8px grid for spacing — consistency without overthinking
Rule of thirds for visual interest — off-center is more dynamic
Negative space is active design — crowded layouts feel cheap
Mobile first, then scale up — constraints breed creativity
Touch targets 44px minimum — fingers are imprecise
Icons & Illustration
Consistent stroke weight across icon set — mixing weights looks broken
Meaning clear without labels — ambiguous icons need text
Simple illustrations scale better — detail gets lost small
Style matches brand personality — playful vs corporate look different
UX Principles
Don't make users think — obvious beats clever
Feedback for every action — users need confirmation
Error prevention over error messages — disable invalid actions
Design empty states, errors, loading first — they're most of the experience
Five users find 80% of usability issues — test early and often
Design Systems
Components, not pages — reusable library
Tokens for colors, spacing, type — change once, update everywhere
Name by function: "primary-action" not "blue-button"
Document when to use, not just how it looks
Presenting & Handoff
Show work in context — mockups in devices, logos on cards
Explain why, not just what — tell the decision story
All states: hover, active, disabled, error, loading — devs will ask
Specs in relative units — responsive needs flexibility
Review the build — implementation is the real design