web-design-guidelines
Framework-agnostic rules for accessible, performant, responsive web interfaces aligned with WCAG 2.2 and modern web standards.
- Comprehensive accessibility guidance covering semantic HTML, ARIA, keyboard navigation, focus management, color contrast, forms, and error handling with specific WCAG success criteria mappings
- Mobile-first responsive design using modern CSS (clamp, container queries, logical properties) and touch-friendly targets; no horizontal scrolling at 320px width
- Performance optimization including lazy loading, explicit image dimensions, code splitting, and compositor-friendly animations (transform/opacity only)
- Dark mode and theming via CSS custom properties with support for
prefers-color-scheme,prefers-contrast, andprefers-reduced-motionmedia queries - Internationalization support with logical CSS properties, RTL layout testing, and Intl API usage for locale-aware formatting
Web Platform Design Guidelines
Framework-agnostic rules for accessible, performant, responsive web interfaces. Based on WCAG 2.2, MDN Web Docs, and modern web platform APIs.
1. Accessibility / WCAG [CRITICAL]
Accessibility is not optional. Most rules in this section map to WCAG 2.2 success criteria at Level A or AA. A small number of best-practice rules (noted inline) target Level AAA or go beyond WCAG.
1.1 Use Semantic HTML Elements
Use elements for their intended purpose. Semantic structure provides free accessibility, SEO, and reader-mode support.
| Element | Purpose |
|---|---|
<main> |
Primary page content (one per page) |
<nav> |
Navigation blocks |
<header> |
Introductory content or navigational aids |
More from ehmo/platform-design-skills
macos-design-guidelines
Apple Human Interface Guidelines for Mac. Use when building macOS apps with SwiftUI or AppKit, implementing menu bars, toolbars, window management, or keyboard shortcuts. Triggers on tasks involving Mac UI, desktop apps, or Mac Catalyst.
2.7Kios-design-guidelines
Apple Human Interface Guidelines for iPhone. Use when building, reviewing, or refactoring SwiftUI/UIKit interfaces for iOS. Triggers on tasks involving iPhone UI, iOS components, accessibility, Dynamic Type, Dark Mode, or HIG compliance.
919android-design-guidelines
Material Design 3 and Android platform guidelines. Use when building Android apps with Jetpack Compose or XML layouts, implementing Material You, navigation, or accessibility. Triggers on tasks involving Android UI, Compose components, dynamic color, or Material Design compliance.
702ipados-design-guidelines
Apple Human Interface Guidelines for iPad. Use when building iPad-optimized interfaces, implementing multitasking, pointer support, keyboard shortcuts, or responsive layouts. Triggers on tasks involving iPad, Split View, Stage Manager, sidebar navigation, or trackpad support.
526watchos-design-guidelines
Apple Human Interface Guidelines for Apple Watch. Use when building watchOS apps, complications, or workout features. Triggers on tasks involving Watch UI, Digital Crown, glanceable interfaces, or wrist-based interactions.
464tvos-design-guidelines
Apple Human Interface Guidelines for Apple TV. Use when building tvOS apps with focus-based navigation, Siri Remote input, or living room viewing experiences. Triggers on tasks involving Apple TV, tvOS, 10-foot UI, or media playback.
439