Visual Design Systems for Web UIs

Design system patterns for consistent, accessible, responsive interfaces. Tailwind CSS v4 changes the game with CSS variables for runtime theming. Core patterns: design tokens (colors, spacing, typography), responsive breakpoints and container queries, dark mode with proper contrast, component composition, and spacing scales.

Key challenges: hardcoded values instead of tokens (unmaintainable), responsive design without mobile-first thinking, dark mode implemented post-hoc (inaccessible), container queries for component-level responsiveness (not just viewport-based).

Workflow

When implementing visual designs:

1. Define tokens — Colors, spacing, typography, shadows as CSS variables in @theme
2. Choose container — Wrap component in @container for container queries
3. Build mobile-first — Start with mobile layout, add breakpoints upward
4. Test dark mode — Use dark: variants; ensure contrast ratios
5. Validate touch targets — Min 44x44px for interactive elements
6. Measure performance — CSS-in-JS libraries impact paint time; Tailwind is zero-runtime

Rules