Web Design Guidelines Suite

Comprehensive web design standards toolkit covering responsive layout systems, typography scales, color accessibility, component patterns, and UX principles for building consistent, accessible web interfaces.

When to Use This Skill

Choose Web Design Guidelines when:

• Establishing design standards for a new web project
• Ensuring accessibility compliance (WCAG 2.1 AA/AAA)
• Building responsive layouts that work across all devices
• Defining typography, spacing, and color systems
• Reviewing existing designs for usability and consistency

Consider alternatives when:

• Need visual design tools — use Figma or Sketch
• Need a pre-built component library — use Shadcn, MUI, or Chakra
• Need brand identity design — work with a brand designer

Quick Start

Copy
# Activate web design guidelines
claude skill activate advanced-web-design-guidelines-suite

# Audit design system
claude "Audit the current design system for accessibility and consistency"

# Build responsive layout
claude "Create a responsive grid system using CSS Grid and Container Queries"

Example: Responsive Layout System

Copy
/* Container Query-based responsive components */
.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* Stack layout on small containers */
@container card (max-width: 400px) {
  .card { grid-template-columns: 1fr; }
  .card-image { aspect-ratio: 16/9; }
}

/* Side-by-side on larger containers */
@container card (min-width: 401px) {
  .card { grid-template-columns: 200px 1fr; }
  .card-image { aspect-ratio: 1; }
}

/* Fluid typography scale */
:root {
  --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --text-xl: clamp(1.56rem, 1.03vw + 1.31rem, 2.11rem);
  --text-2xl: clamp(1.95rem, 1.65vw + 1.54rem, 2.81rem);
  --text-3xl: clamp(2.44rem, 2.56vw + 1.8rem, 3.75rem);
}

Core Concepts

Design System Foundations

Foundation	Components	Standards
Typography	Font family, scale, line height, weights	Modular scale (1.25-1.333 ratio)
Color	Palette, semantic colors, contrast pairs	WCAG AA (4.5:1 text, 3:1 UI)
Spacing	Consistent spacing scale	4px base unit (4, 8, 12, 16, 24, 32, 48, 64)
Layout	Grid, container sizes, breakpoints	Mobile-first, fluid widths
Motion	Transitions, animations, timing	Reduced motion support
Elevation	Shadows, layers, z-index	Consistent depth system

Accessibility Requirements (WCAG 2.1 AA)

Requirement	Standard	Implementation
Color Contrast	4.5:1 normal text, 3:1 large text	Test with contrast checker tools
Keyboard Navigation	All interactive elements focusable	Tab order, focus indicators
Screen Reader	Semantic HTML, ARIA labels	Headings hierarchy, alt text
Motion	Respect prefers-reduced-motion	@media (prefers-reduced-motion)
Text Resize	Content readable at 200% zoom	Relative units (rem, em)
Touch Targets	Minimum 44x44px touch area	Padding/margin on interactive elements

Copy
// Accessible component patterns
// Button with proper ARIA
<button
  aria-label="Close dialog"
  aria-expanded={isOpen}
  onClick={toggle}
  className="focus-visible:ring-2 focus-visible:ring-offset-2"
>
  <CloseIcon aria-hidden="true" />
</button>

// Form with accessible labels and errors
<div role="group" aria-labelledby="name-label">
  <label id="name-label" htmlFor="name">Full Name</label>
  <input
    id="name"
    aria-describedby={error ? 'name-error' : 'name-hint'}
    aria-invalid={!!error}
  />
  {error && <p id="name-error" role="alert">{error}</p>}
  {!error && <p id="name-hint">Enter your legal name</p>}
</div>

// Skip navigation link
<a href="#main-content" className="sr-only focus:not-sr-only">
  Skip to main content
</a>

Configuration

Parameter	Description	Default
breakpoints	Responsive breakpoints	{ sm: 640, md: 768, lg: 1024, xl: 1280 }
type_scale	Typography ratio	1.25 (Major Third)
spacing_base	Base spacing unit in px	4
contrast_level	WCAG level: AA or AAA	AA
color_mode	Support: light, dark, both	both
motion_preference	Respect reduced motion	true
min_touch_target	Minimum touch target size	44px

Best Practices

1. Design mobile-first, then enhance for larger screens — Start with the smallest viewport layout and add complexity with min-width media queries. Mobile-first CSS is smaller and faster because mobile styles are the default and desktop enhancements are additive.

2. Use fluid typography with clamp() instead of fixed breakpoints — clamp(1rem, 0.5vw + 0.875rem, 1.25rem) creates smooth text scaling without jarring size jumps at breakpoints. This produces a more polished experience across the infinite range of device widths.

3. Never use color alone to convey information — Always pair color with text, icons, or patterns. Color-blind users (8% of males) cannot distinguish red/green status indicators. Add a checkmark/X icon or "Active"/"Inactive" text alongside color coding.

4. Test with real users on real devices — Browser DevTools device simulation misses touch interaction issues, actual font rendering, and real-world network conditions. Test on at least one iOS device, one Android device, and one tablet.

5. Implement a consistent 4px spacing grid — Use multiples of 4px (4, 8, 12, 16, 24, 32, 48, 64) for all margins, padding, and gaps. Consistent spacing creates visual harmony and eliminates "looks off" decisions during development.

Common Issues

Design looks great on desktop but breaks on mobile. Check for fixed widths (width: 800px), non-wrapping flex containers, and images without max-width: 100%. Use CSS Grid with minmax() and auto-fit for naturally responsive layouts that don't require breakpoint-specific overrides.

Focus indicators are invisible or distracting. Default browser focus outlines are inconsistent. Use focus-visible (not focus) to show indicators only for keyboard navigation, not mouse clicks. Style with high-contrast outlines: outline: 2px solid var(--color-primary); outline-offset: 2px.

Text is too small or too large on certain devices. Replace fixed px font sizes with fluid clamp() values or rem units. Set font-size: 100% on <html> to respect user browser font size preferences. Test with browser zoom at 200% to ensure content remains readable.