| name | web-design-guidelines |
| description | Web interface design guidelines for building polished, accessible, and intuitive user interfaces. |
Web Design Guidelines
Refer to the official documentation for comprehensive guidance:
Key Points
- Design with spatial consistency: use a fixed spacing scale (4px/8px grid), consistent border radii, and predictable padding so the interface feels cohesive rather than ad hoc
- Prioritize accessibility from the start: use semantic HTML elements, ensure sufficient color contrast (WCAG AA minimum), provide visible focus indicators, and support keyboard navigation for all interactive elements
- Respect motion preferences: wrap animations in
prefers-reduced-motion media queries, keep transitions under 200ms for micro-interactions, and avoid layout shifts that disrupt reading flow
- Use progressive disclosure: show only essential information by default and reveal details on demand through expandable sections, tooltips, or drill-down views rather than overwhelming the user upfront
- Maintain typographic hierarchy: limit to 2-3 font sizes per view, use weight and color (not just size) to establish importance, and ensure body text has a comfortable line height (1.5-1.75) and line length (45-75 characters)
