Design System Engineering

The atomic building blocks of design systems — global, alias, and component tokens, naming conventions, and why tokens are the single most important decision in your system.

Transform design tokens from JSON into CSS, SCSS, JS, iOS, and Android with Style Dictionary — plus the W3C DTCG spec, custom transforms, and the Figma-to-code pipeline.

Runtime theming with CSS custom properties, dark mode that actually works (prefers-color-scheme + user preference + persistence), multi-brand architecture, and OKLCH for perceptually uniform color scales.

Building production-grade component libraries with compound components, headless patterns, polymorphic components, and API design principles that scale to hundreds of components.

Accessibility as a first-class concern in design systems — WCAG 2.2 AA, ARIA patterns for dialog/menu/tabs/combobox, focus management, keyboard navigation, and automated testing with axe-core.

How consumers style your components — className, variants with CVA, CSS Modules, Tailwind with tw-merge, style props, zero-runtime CSS-in-JS, and the decision framework for choosing the right approach.

Storybook 8 for component development — CSF3 format, args and argTypes, play functions for interaction testing, visual regression testing, accessibility addon, and auto-generated documentation.

Semver for component libraries, what constitutes a breaking change, changelog generation with changesets, migration codemods with jscodeshift, and deprecation patterns that do not burn your consumers.

Making your component library tree-shakable — ESM exports, the sideEffects field, barrel file pitfalls, per-component entry points, and measuring real-world bundle impact.

Test your understanding of design tokens, theming, component API design, accessibility, Storybook, versioning, and tree shaking across the entire Design System Engineering module.