Design Systems & Component Engineering

Design Tokens, Theming, Headless Primitives, Accessibility & Distribution

6 modules, 28 lessons: Foundations & Design Token Architecture; Styling Engines, Theming & CSS Architecture; Headless Primitives & Component API Design; Complex Stateful Overlay Primitives; Accessibility Engineering & Verification; Testing, Documentation & Distribution.

Advanced · 1 hour · 28 lessons · 28 labs

Who it is for

Advanced level.

For frontend engineers who build shared components for a team or product and want a design system that is themeable, accessible, tested and safe to publish.

What you don't need yet:

What helps:

Before you start:

Take first:

Learning paths:

Nobody needs to know everything before they start. Each course builds on the one before, so a learning path takes you there step by step.

Labs

28 labs, 26 of them graded: you write the code, it runs, and graded labs check the result. The outline lists each lesson's labs.

What is free

Start free: First module free with an account. Pro: Every course, lab, handbook, practice exam and certificate.

Course outline

Foundations & Design Token Architecture

  1. Design Systems Architecture: Foundations, Layers & Taxonomy (1 lab): You can design and enforce a strict layered component taxonomy, prevent layer inversion anti-patterns, and structure scalable design system contracts.
  2. Design Tokens: W3C Specs, Global, Semantic & Component Tokens (1 lab): You can author W3C-compliant design tokens, structure three-tier token hierarchies (Global, Semantic, Component), and resolve alias references programmatically.
  3. Token Transformation: Style Dictionary & Multi-Platform Outputs (1 lab): You can configure Style Dictionary transformation pipelines, build custom value transforms, and export design tokens into CSS custom properties, TypeScript, and native mobile formats.
  4. Modern Color Spaces: OKLCH, Gamut Mapping & APCA Contrast (1 lab): You can generate perceptually uniform design system color palettes using OKLCH, apply gamut mapping for wide-gamut displays, and calculate accessible contrast using APCA and WCAG.
  5. Typography & Spatial Grids: Modular Scales & Fluid Typography (1 lab): You can design mathematically harmonious typography systems using modular scales, compute fluid clamp formulas, and construct 8-point spatial grids for UI layouts.

Styling Engines, Theming & CSS Architecture

  1. CSS Custom Properties & Dynamic Theming Architecture (1 lab): You can design and implement dynamic multi-theme architectures using CSS custom properties, scoped variable overrides, and data-attribute switching.
  2. Tailwind CSS v4 Engine: CSS Variables & Theme Extensions (1 lab): You can configure Tailwind CSS version four theme extensions, bind design tokens to CSS variables using the at theme directive, and generate dynamic utility classes.
  3. Dark Mode Strategies: System Preference, Class & High-Contrast (1 lab): You can architect resilient dark mode and high-contrast theming strategies supporting system preferences, class-based user overrides, and forced-colors accessibility modes.
  4. Class Variance Authority: Type-Safe Variant & Prop Orchestration (1 lab): You can orchestrate multi-dimensional component variants using Class Variance Authority, extract TypeScript prop contracts, and safely resolve utility class conflicts using the cn pattern.

Headless Primitives & Component API Design

  1. Headless Architecture: State vs Presentation Separation (1 lab): You can architect headless UI primitives that isolate state machines, keyboard navigation, and ARIA accessibility contracts from presentation styling.
  2. Component API Ergonomics: Composition vs Boolean Config Props (1 lab): You can replace fragile monolithic components riddled with boolean configuration props with flexible, composable component architectures that leverage slots and children composition.
  3. Compound Component Patterns: Context Sharing & Internal State (1 lab): You can architect compound component primitives that share implicit internal state via React Context, coordinate ARIA relationships, and enforce boundary safety.
  4. Polymorphism & Slotted Composition: The asChild Pattern (1 lab): You can implement polymorphic UI components using the asChild and Slot composition patterns, safely merging props, event handlers, and refs without DOM wrapper overhead.
  5. Actionable Form Primitives: Buttons, Switches & Inputs (1 lab): You can engineer accessible form primitives including buttons, switches, and text inputs with bulletproof ARIA attributes, error linking, and keyboard interactions.

Complex Stateful Overlay Primitives

  1. Overlay Architecture: Portals, Stacking Contexts & Backdrops (1 lab): You can architect resilient overlay systems using React Portals, navigate CSS stacking contexts, enforce background scroll locking, and apply the inert attribute.
  2. Focus Management: Trapping, Restoration & Focus Rings (1 lab): You can implement accessible focus trapping, keyboard loop-around, initial focus targeting, and focus restoration to protect keyboard navigation within overlays.
  3. Modal Dialogs & Alert Dialogs: Accessible Overlay Patterns (1 lab): You can design and build accessible modal and alert dialog primitives with correct ARIA roles, labeled titles, descriptions, and safe default focus targeting.
  4. Floating Primitives: Popovers, Tooltips & Positioning (1 lab): You can engineer resilient floating primitives including tooltips and popovers with collision-aware placement, arrow offsets, and strict ARIA accessibility contracts.
  5. Navigation & Disclosure: Dropdown Menus, Tabs & Accordions (1 lab): You can architect accessible navigation and disclosure primitives including dropdown menus, accordions, and tabs with roving tabindex keyboard navigation and typeahead.

Accessibility Engineering & Verification

  1. WAI-ARIA Semantics: Roles, States & Accessible Name Computation (1 lab): You can apply WAI-ARIA semantics correctly, follow the First Rule of ARIA, and evaluate the Accessible Name Computation hierarchy across design system components.
  2. Keyboard Navigation Protocols: Roving Tabindex & Virtual Focus (1 lab): You can implement professional keyboard navigation protocols for composite widgets using roving tabindex and virtual focus with aria-activedescendant.
  3. Screen Reader Interactions: Live Regions & Announcement Cues (1 lab): You can design and engineer accessible live regions that communicate dynamic background mutations, form validation, and toast notifications to screen readers without stealing user focus.
  4. Automated Accessibility Testing: axe-core & Testing Library (1 lab): You can integrate automated accessibility testing with axe-core into component test suites, catch WCAG regressions in CI, and configure rule sets.
  5. Visual Contrast Auditing: Color Blindness & Reduced Motion (1 lab): You can audit visual contrast against WCAG and APCA standards, design resilient interfaces for color-blind users, and implement graceful reduced-motion adaptations.

Testing, Documentation & Distribution

  1. Storybook & Component Driven Development Workflows (1 lab): You can author declarative Component Story Format three stories, configure interactive controls, generate living documentation, and write interaction tests using play functions.
  2. Visual Regression Testing: Playwright & Snapshot Differencing (1 lab): You can design and run visual regression testing suites using Playwright, eliminate snapshot flakiness, and configure pixel differencing thresholds in CI.
  3. Component Packaging: Dual ESM/CJS Builds & Package Exports (1 lab): You can configure robust package manifests with subpath exports, dual ESM and CommonJS bundles, TypeScript type declarations, and tree-shaking metadata.
  4. System Governance: Changesets, Semantic Versioning & Deprecation (1 lab): You can govern production design systems using Changesets, apply Semantic Versioning strictly, manage deprecation lifecycles, and automate codemod migrations.