Web Dev Design Systems

# 2.1.3 Web Dev Design Systems

This skill defines the mandatory visual and architectural standards for every web-facing project. Every screen, component, and interaction must feel premium and state-of-the-art.

1. Design Token Architecture

**Goal:** Maintain a single source of truth for all visual properties.

* **CSS Custom Properties:** Define all colors, spacing, typography, shadows, border-radii, and animation durations as CSS custom properties in a root `:root` block.

* **Semantic Naming:** Use semantic token names (`--color-surface-primary`, `--spacing-md`, `--shadow-elevated`) rather than raw values (`#1a1a2e`, `16px`).

* **Dark Mode:** Implement a complete dark palette using `[data-theme="dark"]` or `@media (prefers-color-scheme: dark)` selector overrides on the same token names. Never hardcode light-only colors.

2. Color & Visual Identity

**Goal:** Every project must have a curated, harmonious color palette.

* **Palette Construction:** Use HSL-based color systems. Define a primary hue, then derive accent, surface, and semantic colors (success, warning, error, info) mathematically.

* **Gradients:** Use multi-stop linear or radial gradients for hero sections, cards, and CTAs. Avoid flat, single-color backgrounds on major surfaces.

* **Glassmorphism:** Apply `backdrop-filter: blur()` with semi-transparent backgrounds on overlay elements (modals, floating cards, navigation). Always include a fallback for browsers without support.

* **Contrast Ratios:** Enforce WCAG 2.1 AA minimum (4.5:1 for body text, 3:1 for large text). Use tools like `color-contrast()` or manual checks.

3. Typography System

**Goal:** Professional, readable typography that scales across devices.

* **Font Stack:** Load a primary font from Google Fonts (Inter, Outfit, Roboto, or Poppins) via `<link>` with `display=swap`. Define a monospace font for code (JetBrains Mono, Fira Code).

* **Type Scale:** Use a modular scale (1.25 ratio recommended). Define `--font-size-xs` through `--font-size-4xl` as tokens. Use `clamp()` for fluid typography on headings.

* **Line Height & Letter Spacing:** Body text: `1.5–1.6` line-height. Headings: `1.1–1.3`. Add subtle negative letter-spacing on large headings (`-0.02em`).

4. Responsive Layout Architecture

**Goal:** Every layout must be mobile-first and fluid.

* **Breakpoints:** Define standard breakpoints as tokens: `--bp-sm: 640px`, `--bp-md: 768px`, `--bp-lg: 1024px`, `--bp-xl: 1280px`.

* **Grid System:** Use CSS Grid for page-level layouts. Use Flexbox for component-level alignment. Avoid fixed pixel widths on containers.

* **Container Queries:** Use `@container` queries for truly modular, context-aware components where browser support allows.

* **Touch Targets:** All interactive elements must have a minimum of `44px × 44px` touch target area on mobile (Apple HIG / Material Design standard).

5. Micro-Animations & Transitions

**Goal:** Interfaces must feel alive and responsive to user interaction.

* **Hover Effects:** Every clickable element must have a defined `:hover` and `:active` state. Use `transform: scale()`, `box-shadow` changes, or color transitions.

* **Page Transitions:** Animate route changes with fade-in/slide-up using CSS `@keyframes` or `View Transitions API`.

* **Loading States:** Use skeleton screens (pulsing placeholder shapes) instead of spinners for content loading. Implement shimmer animations with CSS gradients.

* **Performance:** Use `transform` and `opacity` for animations (GPU-composited). Never animate `width`, `height`, `top`, or `left`. Respect `prefers-reduced-motion` media query.

6. Component Architecture

**Goal:** Build reusable, self-contained UI components.

* **Naming Convention:** Use BEM-style naming for CSS classes (`block__element--modifier`) or scoped component styles.

* **Composition:** Components should accept props/attributes for variants (size, color, state) rather than creating separate components for each variation