Design System Engineering

Module Quiz: Design System Engineering

advanced12 min read

Design System Engineering — Final Assessment

You have covered the full stack of design system engineering: from the atomic tokens that define your visual language, through the component architecture that scales to hundreds of consumers, to the versioning and distribution strategy that keeps everything working. This quiz tests whether you can apply those concepts to real decisions — the kind you face when building and maintaining a production design system.

Each question simulates a decision point. There are no trick questions, but every wrong answer reflects a real misconception that leads to real problems at scale.

Token Hierarchy and Naming

Quiz
Your Button component uses var(--color-blue-600) for its background. A product team using your design system wants to theme buttons red for their error-handling product. What is the fundamental problem?
Quiz
You are naming a token for the background color of a hovered danger button. Following CTI (Category-Type-Item-State) convention, which name is correct?

Theming and Dark Mode

Quiz
Your dark mode implementation uses a React useEffect to set data-theme on the HTML element based on localStorage. Users report a flash of light mode on every page load. What is the root cause?

Component Architecture

Quiz
You are designing a Select component API. Which approach best balances flexibility and simplicity for a design system used by 20+ product teams?
Quiz
A consumer wraps your Button component with a tooltip library, but the tooltip never appears. The most likely cause is:

Accessibility

Quiz
Your team builds a custom tabs component. When a keyboard user presses Tab to focus the tab list, then presses ArrowRight twice, then presses Tab again — focus should move to:

Storybook

Quiz
Your design system has 80 components with an average of 6 stories each. A developer changes a shared spacing utility. How do you catch unintended visual regressions across all 480 stories?

Versioning and Migration

Quiz
You want to rename Button's variant='primary' to variant='default'. What is the correct migration path?

Tree Shaking and Distribution

Quiz
A consumer imports { Button } from your library's barrel file (index.ts). Their bundle grows by 80KB instead of the expected 3KB. The library has sideEffects: false. The most likely cause is:
Quiz
Your library uses CSS Modules. You set sideEffects: false in package.json. After publishing, consumers report that components render without any styles. What happened?

How Did You Do?

If you got 8+ correct on the first try, you have a strong grasp of design system engineering. The questions you missed point to areas worth revisiting — each topic in this module covers the concepts in depth.

The real test is building one. Take a small project and apply these patterns: define a token hierarchy, build three components with compound composition, set up Storybook with play functions, publish with per-component entry points, and verify tree shaking works. That exercise will cement everything you have learned here.

Related Topics
10/10