# Web Dev Design Systems
> Premium UI/UX standards including design tokens, responsive layouts, dark mode, micro-animations, typography, accessibility, and component architecture for all web projects.
- Skill: `mayurrathi/web-dev-design-systems` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mayurrathi/web-dev-design-systems`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mayurrathi/web-dev-design-systems/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: mayurrathi (https://skillmd.com/u/mayurrathi)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/mayurrathi/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 `` 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.
* **Slots & Projection:** Design components with content slots so they can wrap arbitrary children.
* **State Management:** Visual state (hover, focus, disabled, loading, error) must be visually distinct and programmatically accessible via `aria-*` attributes.
## 7. Accessibility (WCAG 2.1 AA)
**Goal:** Every project must be usable by everyone.
* **Semantic HTML:** Use `