UI Design Guidelines

Practical design rules for modern web interfaces.

Instructions

1. Define Constraints

• Capture audience, brand tone, and platform targets.

• Note accessibility requirements and performance constraints.

• Identify key content types and critical user flows.

2. Layout and Hierarchy

• Use a clear grid and spacing scale (4pt or 8pt).

• Limit content width for readability; define breakpoints.

• Make primary actions and key data visually dominant.

3. Typography System

• Define a type scale (e.g., 12/14/16/20/24/32/40).

• Keep body text at 16px or higher with 1.4 to 1.6 line height.

• Use weight and size to encode hierarchy, not color alone.

4. Color and Contrast

• Use semantic tokens (primary, success, warning, danger).

• Ensure text contrast meets WCAG AA (4.5:1 for normal text).

• Keep the palette small; rely on neutrals for backgrounds.

5. Spacing and Rhythm

• Apply consistent padding and margin rules across components.

• Align baselines and edges to reduce visual noise.

• Avoid mixing unrelated spacing values.

6. Components and States

• Define default, hover, active, focus, disabled, and error states.

• Make focus indicators visible and consistent.

• Ensure forms have clear labels and error messages.

7. Responsive Behavior

• Stack columns on small screens.

• Keep tap targets at least 44px.

• Avoid horizontal scroll and layout shifts.

8. Motion (Optional)

• Use motion for feedback and continuity, not decoration.

• Keep durations short (150 to 250ms) and easing consistent.

Deliverables Checklist

• Color palette and semantic tokens

• Typography scale and usage rules

• Spacing scale and layout grid

• Component list with states

• Accessibility checklist

References

• WCAG Contrast Guidelines

• Material Design Typography

• Apple Human Interface Guidelines