---
name: ui-law
description: rule for designing user interfaces and user experience
---

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