Design Systems

What is a design system and its primary engineering components?

Tests if you treat design systems as engineering infrastructure, not just UI kits. Strong answers cite reusable coded components, design tokens, documentation, and governance as the core. Red flag: calling it just a component library or style guide.

Component library vs style guide vs design system

A design system is holistic parent for scale; a style guide is a narrow visual/content child; a component library is a coded child of reusable UI elements.

What are the main benefits of consuming a design system?

Cite tokens for theming, isolated components, live docs, and designer collaboration.

How would you build a design system business case for leadership?

Audit inefficiencies with metrics, map the pitch to stakeholder priorities like ROI and velocity, and contrast build cost with projected savings.

What are design tokens and why standardize them?

Tests whether you treat tokens as API contracts between design and engineering. Strong answers define platform-agnostic decisions, cite W3C DTCG spec for cross-platform codegen, and note aliasing prevents drift.

What metrics measure design system success and adoption?

Tests if you connect design system health to delivery speed and consistency. Strong answers hit adoption rate, component usage, design-to-code parity, and accessibility compliance tied to team behavior.

What governance model would you propose for a centralized design system?

Tests balancing standardization with autonomy across legacy silos. A strong answer proposes a hybrid model with a core team and contribution rules, weighing consistency against migration cost.

How do you handle a product team requesting a custom Button?

This tests governance discipline. A strong answer asks context questions to separate misuse from a real gap, uses a decision tree for actions and CTAs, and extends the system with a documented variant. A red flag is instantly greenlighting a custom fork.

How does a mature design system change cross-functional collaboration?

Tests whether you view maturity as a collaborative operating framework, not just components. Strong answers hit shared definitions of done, living documentation, code/design parity, and trust-based adoption. Red flag: calling it a docs or enforcement problem.

What is a design token versus a CSS or Sass variable?

Whether you understand abstraction layers in design systems and cross-platform interoperability. Define tokens as vendor-neutral design decisions that generate platform-specific code; contrast with CSS variables (runtime, web-only) and Sass (compile-time…

Implement a typographic scale using design tokens and accessible properties

Token-driven typography and accessibility. Start with base size (14-16px) and ratio token, compute sizes, then bundle font-size with line-height, letter-spacing, weight, and family in composite tokens. Red flag: ignoring line-height, spacing, or composites.

Design token pipeline serving Web, iOS, and Android

This tests cross-platform design system architecture and governance. A strong answer uses W3C JSON tokens in option, decision, component layers, with Style Dictionary generating Web, iOS, and Android outputs. Red flag: using Figma or CSS as source of truth.

intermediate1 min read

Choosing a spacing scale for a design system

A numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them.

Describe a robust architecture for implementing theming using design tokens

Three tiers, CSS custom properties for live switching, and layered overrides.

How do you handle a one-off token exception for a campaign?

Tests balancing speed and systemic consistency. Strong answers outline a governance fast-track with sunset clauses, document the exception, and isolate it via campaign overrides instead of mutating core tokens. Red flag: permanently hardcoding the one-off.

When should data in a reusable component be a prop or state?

This tests controlled versus uncontrolled patterns. Great answers ask who owns the data: props when parent must drive or observe it, state only for private details.

Two strategies to prevent style leakage in reusable components and their trade-offs

This tests style encapsulation in design systems. A strong answer contrasts Shadow DOM, which fully isolates CSS via a shadow root, with scoped naming like BEM or CSS Modules. Red flag: proposing global resets or !important as a solution.

How would you structure a flexible Card component API?

Tests composition-over-configuration thinking in design systems. A strong answer uses compound components or slots so consumers reorder or omit title, image, and body freely without prop drilling. Red flag: rigid boolean props that freeze layout order.

What WAI-ARIA attributes and keyboard interactions make Tabs accessible?

This tests mastery of the W3C Tabs pattern. A strong answer covers role tablist tab tabpanel, aria-selected, aria-controls, and arrow-key roving focus with optional auto-activation. A red flag is treating tabs as buttons and relying only on the Tab key.