UI Design Guidelines
A practical UI rulebook with numbers, tokens, and rules you can copy. Prioritizes speed, clarity, accessibility, and measurable performance. Use these as defaults, then test with real traffic.
Chapters
Sweetspot Defaults
The baseline numbers every UI should ship with.
Design Tokens
Copy-paste CSS custom properties for colors, spacing, type, and radii.
Layout & Grid
Max-widths, grid systems, margins, and breakpoints.
Spacing & Rhythm
Padding scales, vertical rhythm, and section spacing.
Typography
Font stacks, sizes, line-height, and recommended pairings.
Color & Contrast
Palette rules, contrast ratios, backgrounds, and state colors.
Buttons & Tap Targets
Sizing, padding, hierarchy, and link styling.
Forms & Validation
Input sizing, labels, error handling, and validation UX.
Core Components
Cards, modals, tooltips, toasts, and tables.
Feedback States
Loading, empty, error, and success patterns.
Motion
Animation timing, easing, and micro-interaction guidelines.
Accessibility
WCAG 2.2 baselines, focus management, and ARIA patterns.
CRO Rules
Conversion rate optimization rules that move CTR.
Pre-Ship Checklist
Final review checklist before pushing to production.
Sources
Research and references behind these guidelines.