Visual Hierarchy
One clear focal point per section (headline → subtext → primary CTA)
Encode importance with size/weight/spacing (not extra colors)
Use consistent scan pattern and alignment; avoid competing highlights
Whitespace
Space is structure: use spacing scale consistently (py-16, gap-6, space-y-8)
Increase spacing before adding borders/shadows/colors
Keep line length readable (max-w-prose) and avoid cramped blocks
Typography Scale
Limit to 3–5 text sizes total (hero, section title, body, caption)
Use consistent weights (font-bold for titles, font-medium for labels)
Maintain readable leading (leading-tight for headings, leading-7 for body)
1 Primary CTA
Per section: 1 dominant CTA button; everything else is secondary link/button
Primary CTA uses strongest visual treatment; secondary is quieter (outline/link)
CTA labels are action verbs (“Get started”, “Book demo”), not vague (“Submit”)
Contrast
Contrast communicates layers and meaning (background vs card vs border)
Ensure text readability; avoid gray-on-gray and low-contrast buttons
Use contrast sparingly: if everything pops, nothing pops
Performance Budget
Above the fold: minimal heavy assets (video, carousels, large animations)
Reserve space for images to prevent layout shift (set aspect ratios)
Use skeletons/progressive loading for async blocks; ship less JS per section
