Multi-theme infrastructure for a component library
WHAT IT TESTS: theming architecture. OUTLINE: style components against semantic tokens exposed as CSS custom properties, define per-theme token values, and switch at runtime via a data-theme attribute or class.
Monorepo tradeoffs for a design system
WHAT IT TESTS: build/repo architecture judgment. OUTLINE: monorepos give atomic cross-package changes, shared tooling, and easy local linking; drawbacks include build complexity, CI scaling, and tighter coupling.
Component variants with BEM modifier classes
WHAT IT TESTS: structured variant styling. OUTLINE: a base block class holds shared styles, modifier classes (block--primary, block--destructive) layer only the differences, and you combine base plus one modifier.
Core tokens versus alias semantic tokens
WHAT IT TESTS: token-tier architecture. OUTLINE: core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value.
CSS transition versus animation
WHAT IT TESTS: animation API fundamentals. OUTLINE: transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion.
CSS Grid versus Flexbox fundamentals
WHAT IT TESTS: knowing each tool's dimensionality. OUTLINE: Flexbox is one-dimensional (a single row or column), Grid is two-dimensional (rows and columns together); use Grid for page layout, Flexbox for a toolbar of items.
Brand color as a token and CSS custom property
WHAT IT TESTS: practical token-to-CSS wiring. OUTLINE: define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var().
Fixing brand color contrast at the system level
WHAT IT TESTS: systemic accessibility thinking. OUTLINE: build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks.
Distributing design tokens across web, iOS, and Android
WHAT IT TESTS: cross-platform token pipeline design. OUTLINE: keep one source-of-truth JSON, transform with a tool like Style Dictionary, emit per-platform formats (CSS vars, Swift, XML) in CI.
Designing a Card component's configurable API
WHAT IT TESTS: API design judgment for reusable components. OUTLINE: expose content via composition (slots/children), expose constrained variants as enums, lock spacing and brand tokens.
CSS Modules versus BEM for encapsulation
WHAT IT TESTS: understanding of scoping strategies. OUTLINE: CSS Modules scope via build-time hashed class names automatically; BEM scopes via disciplined human naming with no tooling.
Center a div with Flexbox on the parent
WHAT IT TESTS: fluency with Flexbox alignment axes. OUTLINE: set display flex on parent, justify-content center for the main axis, align-items center for the cross axis.
Structure CSS layers for reset, vendor, and components
WHAT IT TESTS: applied cascade-layer architecture. OUTLINE: declare layer order upfront, place reset earliest, vendor next, your components last so they win. RED FLAG: relying on source order or !important instead of an explicit layer declaration.
What problem do CSS Cascade Layers solve?
WHAT IT TESTS: understanding of the cascade beyond specificity. OUTLINE: layers create explicit priority bands, layer order beats specificity inside, and you control override without selector hacks.
Cross-platform themeable token system
WHAT IT TESTS: combining theming with cross-platform delivery. OUTLINE: tier tokens with semantic theme sets that remap primitives per mode, transform to each platform's theme mechanism, and deliver versioned packages.
Structuring docs for multiple audiences
WHAT IT TESTS: audience-aware documentation strategy. OUTLINE: layer docs by audience, give developers API and code, designers usage and design guidelines, PMs principles and coverage, with shared foundations like tokens and accessibility.
Delivering an urgent design system hotfix
WHAT IT TESTS: hotfix release process. OUTLINE: branch from the released tag, apply a minimal fix, add a regression test, ship a patch version, then forward-port to main. RED FLAG: releasing unreleased work from main or skipping the patch and regression test.
Contributing a new component variant
WHAT IT TESTS: understanding of design-system contribution flow. OUTLINE: align with maintainers first, follow guidelines, implement with API and tokens, add stories, docs, and tests, then open a PR for review.
Tokens as a single source of truth pipeline
WHAT IT TESTS: end-to-end token architecture. OUTLINE: define tiered tokens in standardized JSON, transform per platform with a build tool, publish versioned packages, and automate in CI.
The role of Storybook in a design system
WHAT IT TESTS: understanding of component workbenches. OUTLINE: Storybook renders components in isolation across states, serving as living documentation, a development sandbox, and a base for visual and accessibility testing.