Design system patterns -- design tokens, component documentation, Figma-to-code workflow, theming, accessibility. Load when building or documenting a frontend design system.
Patterns for building a consistent frontend design system.
Define as CSS custom properties (4px base unit):
:root {
/* Colors */
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-bg: #ffffff;
--color-text: #0f172a;
--color-border: #e2e8f0;
/* Spacing */
--space-1: 0.25rem; --space-2: 0.5rem;
--space-4: 1rem; --space-8: 2rem;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Borders and Shadows */
--radius-md: 0.375rem;
--shadow-md: 0 4px 6px rgb(0 0 0 / 0.1);
}
Override tokens with [data-theme="dark"] selector.
Every interactive component must define: Default, Hover, Focus, Active, Disabled, Loading, Error.
Each component needs: Props table, Variants, Usage examples.
prefers-reduced-motionsm: 640px, md: 768px, lg: 1024px, xl: 1280px (mobile first).
skills/frontend/SKILL.md -- frontend tooling, Solid, Tailwindskills/frontend/references/accessibility.md -- detailed a11y guide