# UI Law

> rule for designing user interfaces and user experience

- Skill: `naufaldi/ui-law` (Agent Skill)
- Install (CLI): `npx skillmds@latest add naufaldi/ui-law`
- Raw SKILL.md: https://api.skillmd.com/api/skills/naufaldi/ui-law/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: naufaldi (https://skillmd.com/u/naufaldi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/naufaldi/ui-law

---


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