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