Top 30 Intermediate Design Systems Concepts Quiz
30 intermediate multiple-choice Design Systems concept questions, the mechanics underneath the basics: how the pieces relate and where the usual mental model stops holding. They come from 30 bites in the Design Systems library, the middle slice of the 152 Design Systems concept questions in the library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
Component libraries, design tokens, style guides
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
What is the main advantage of applying the Atomic Design methodology to UI development?
Show the answer
Answer: a · It provides a structured framework for creating consistent and reusable design systems.
The card states Atomic Design helps manage complexity and is ideal for creating consistent design systems and promoting component reusability, which aligns with providing a structured framework. It explicitly warns against treating it as a rigid, linear process, making that option incorrect.
Read the full bite: Atomic Design: Building UIs Like Chemistry
Question 2 of 30
What is the key differentiator of a mature design system compared to a simple UI kit?
Show the answer
Answer: a · It includes reusable code components, clear principles, usage guidelines, and governance processes.
A mature design system functions as strategic business infrastructure, providing not just visual assets but also reusable code, principles, guidelines, and governance. This comprehensive approach distinguishes it from a basic UI kit, which primarily offers static visual components.
Read the full bite: Design Systems: From UI Kits to Business Infrastructure
Question 3 of 30
For which scenario would a full design system typically be considered an unnecessary investment?
Show the answer
Answer: c · A small team developing an early-stage, rapidly iterating prototype
The card states that for a single, small-scale project or a rapidly iterating early-stage prototype, building a full design system is often overkill due to the initial investment. The other options describe situations where a design system provides significant benefits, such as consistency, efficiency, and shared understanding, making them scenarios where it is recommended.
Read the full bite: Design Systems: Your UI's Single Source of Truth
Question 4 of 30
What is the primary mechanism by which a themeable design system allows a single component library to display multiple visual styles?
Show the answer
Answer: b · By defining abstract design tokens that components reference, which can be swapped to change aesthetics.
Theming achieves multiple visual styles by abstracting visual properties into design tokens. Components are built to reference these tokens, allowing their aesthetic to be swapped by simply changing the token values without altering the component's underlying code or structure. Option A is incorrect because theming aims to avoid duplicating code.
Read the full bite: Theming: One Design System, Many Visual Styles
Question 5 of 30
Which of the following text elements is generally exempt from the WCAG 4.5:1 contrast requirement?
Show the answer
Answer: d · A button label that is currently disabled
The card states that "incidental text, such as text on a disabled button," is exempt from the contrast requirement. Navigation links, body text, and normal-sized headlines (like 16px bold, which is not considered 'large text') are all intended to convey information and thus require a 4.5:1 contrast ratio.
Read the full bite: WCAG Color Contrast: The 4.5:1 Rule for Readability
Question 6 of 30
In the context of Vertical Rhythm, what is the foundational element used to derive the consistent spacing unit for a page layout?
Show the answer
Answer: b · The line height of the body text
The card explicitly states that the vertical rhythm system "is built from the body text's line height," which then forms the basis for calculating all other vertical spacing units. While other options relate to layout, they are not the foundational element for this specific system.
Read the full bite: Vertical Rhythm: A Formula for Consistent Spacing
Question 7 of 30
In clamp(MIN, PREFERRED, MAX), what determines the final computed value when PREFERRED falls outside the MIN and MAX range?
Show the answer
Answer: d · The MIN or MAX value is applied, acting as a boundary for PREFERRED.
The card explicitly states that if the PREFERRED value calculates to something smaller than MIN, MIN is used, and if it calculates to something larger than MAX, MAX is used. This means MIN and MAX serve as hard boundaries. Option A is a common misconception, as the value itself is changed, not just visually clipped.
Read the full bite: CSS clamp(): Fluid Sizing Without Media Queries
Question 8 of 30
For which use case would a controlled component be the most appropriate choice?
Show the answer
Answer: b · An accordion where opening one panel automatically closes all others.
The card explicitly states that an accordion where expanding one panel collapses others is a canonical example requiring controlled components to coordinate state and maintain a single source of truth. Options A, B, and D describe scenarios where uncontrolled components are generally preferred because their state is self-contained or only needed at specific times, reducing boilerplate for the parent.
Question 9 of 30
What is the primary method Component-Driven Development uses to manage UI complexity?
Show the answer
Answer: d · It allows individual UI parts to be developed and tested in isolation before being composed.
The core of CDD is building small, independent UI parts in isolation, like LEGOs, before composing them into larger structures. This modularity is how it primarily addresses complexity. Tightly coupling components with business logic (option A) is explicitly mentioned as a 'footgun' or anti-pattern.
Read the full bite: Component-Driven Development: Build UIs Bottom-Up
Question 10 of 30
What is the primary benefit of using Shadow DOM for styling components?
Show the answer
Answer: c · It guarantees that a component's internal styles will not be affected by or affect the main document's global CSS.
The card states Shadow DOM solves "style collisions" and acts as a "shield" where "CSS rules defined inside the Shadow DOM only apply within it, and with few exceptions, CSS rules from the main page don't apply to the elements inside the shadow tree." Option A is incorrect because the card notes that Shadow DOM "creates more friction than it solves" if you need easy external overrides.
Question 11 of 30
A library updates from version 1.2.3 to 2.0.0. What does this change primarily signal to users?
Show the answer
Answer: b · Existing code using the library might break and require modifications.
A MAJOR version increment (from 1.x.x to 2.0.0) signals incompatible API changes, meaning existing code relying on the previous API may break. New backward-compatible features are MINOR changes, and bug fixes are PATCH changes.
Read the full bite: Semantic Versioning: A Contract for Your Code's Evolution
Question 12 of 30
According to the card, what is the most effective strategy for implementing a global site header in a design system?
Show the answer
Answer: b · Treat the header container as a unique, bespoke composition, while ensuring its internal elements are built for reuse.
The card advises treating the header container as a unique, one-off composition due to its complexity, while its internal components (like logo or navigation) should be reusable. Option A describes the common pitfall of trying to make the entire complex header container reusable, leading to a brittle component.
Read the full bite: Header Components: An Exception to Reusability
Question 13 of 30
When would a simple table be a more appropriate UI choice than a master-detail pattern?
Show the answer
Answer: d · When users need to frequently compare multiple items side-by-side.
The card states that the master-detail pattern is a poor choice if the user's main task is to compare multiple items side-by-side, making a simple table or other layout more suitable. Master-detail is designed for managing complex items and limited screen space, not for direct comparison.
Read the full bite: Master-Detail: Show a List, Focus on One
Question 14 of 30
What is the primary advantage of implementing a skeleton screen compared to a simple loading spinner?
Show the answer
Answer: b · It provides users with an immediate, structured preview of the page's upcoming layout.
The card states skeleton screens provide a 'low-fidelity preview of the page's layout' to give a 'sense of progress and structure,' which helps users anticipate content. Option A describes the 'frame-display' anti-pattern, which the card explicitly warns against as it offers no structural information.
Question 15 of 30
For which type of user interaction is a wizard/stepper pattern most appropriate?
Show the answer
Answer: b · A complex online application where later steps depend on information from earlier steps.
The card specifies that steppers are best used when a task has several logically distinct steps, especially when input from one step is required for the next. Option C describes a long form, which steppers aim to break down, but specifies "on one page" and "independent," which doesn't fully align with the primary use case of sequential dependency.
Read the full bite: Wizard/Stepper Pattern: Guide Users Through Complex Tasks
Question 16 of 30
What is the fundamental distinction between a design system changelog and a raw git log?
Show the answer
Answer: b · A changelog translates technical changes into human-readable impact for consumers, unlike a raw git log.
The card states a changelog "translates code changes into human-readable impact" for consumers, serving as "release notes for your users." In contrast, a raw git log is for maintainers and contains raw technical details, not curated for consumer understanding.
Read the full bite: Design System Changelogs: For Humans, Not Machines
Question 17 of 30
According to the card, what is the primary role of accessibility documentation for a reusable UI component?
Show the answer
Answer: c · To guide component consumers on how to provide necessary context and props to preserve accessibility.
The card emphasizes that accessibility documentation bridges the gap between component authors and consumers by clarifying the consumer's responsibility to provide necessary props and context. Option A describes a secondary benefit, but not the primary role of ensuring correct usage by consumers.
Read the full bite: Writing Accessibility Docs for Your Components
Question 18 of 30
What is the primary benefit of utilizing "modes" within Figma variables?
Show the answer
Answer: b · They allow a single variable to have different values for various contexts, such as themes.
The card states that "A single variable can have different values for different modes," citing light and dark themes as a key example. This mechanism allows variables to dynamically adapt their values based on the active context. Option C describes the function of "collections," not "modes."
Read the full bite: Figma Variables: The Single Source of Truth for Tokens
Question 19 of 30
How does a monorepo primarily facilitate consistent usage of a design system across multiple applications?
Show the answer
Answer: c · By enabling direct source code imports and atomic commits for shared component updates.
A monorepo ensures consistency by allowing applications to import components directly from source code and enabling a single, atomic commit to update a shared component and all its consumers simultaneously. Option A is incorrect because monorepos avoid the publishing step common in polyrepos; changes are applied directly within the single repository.
Read the full bite: Monorepos: A Design System's Single Source of Truth
Question 20 of 30
Which aspect of a UI component cannot be reliably verified using a jsdom-based unit test?
Show the answer
Answer: b · The actual visual rendering, layout, and applied CSS styles of the component.
jsdom simulates the DOM but lacks a true browser rendering engine, meaning it cannot verify visual appearance, layout, element sizes, or how CSS is actually applied and rendered. The other options (state updates, event handling, accessibility attributes) are all aspects of component logic and behavior that jsdom-based tests are designed to cover.
Read the full bite: Unit Testing UI Components: Beyond the DOM Mock
Question 21 of 30
What is the primary limitation of Figma-to-code tools for production-ready applications?
Show the answer
Answer: c · The generated code often lacks semantic structure, accessibility, and dynamic functionality.
The card states that Figma-to-code tools perform a 'literal translation' and 'don't understand' semantic meaning or interactivity, leading to code that needs refactoring for semantic tags, dynamic data, and handlers. The tools actually speed up the initial handoff, and engineers, not designers, typically use them to generate code.
Read the full bite: Figma-to-Code: From Pixels to Production Code?
Question 22 of 30
Which accessibility concern is an automated linter least capable of evaluating effectively?
Show the answer
Answer: a · The semantic meaningfulness of an image's alt text
The card explicitly states that linters cannot assess content quality, such as whether alt text is meaningful, as this requires human judgment. In contrast, linters are highly effective at detecting technical issues like missing ARIA attributes, insufficient contrast, and missing focus styles.
Read the full bite: Accessibility Linters: Automate Compliance in Your Design System
Question 23 of 30
What is the primary reason a dedicated Design System Product Manager role becomes essential?
Show the answer
Answer: b · To ensure the design system is treated as a product, delivering long-term value and consistency.
The card states the role exists because design systems fail when treated as side projects, and the PM provides product ownership to ensure long-term value. Option C describes an engineering task, not the primary responsibility of a Product Manager.
Read the full bite: The Design System PM: Treating Internal Tools as Products
Question 24 of 30
When is a formal design system intake process most beneficial for an organization?
Show the answer
Answer: d · When multiple independent product teams contribute components to a shared design system.
The card states that an intake process is critical for "scaling systems across multiple products or departments" and when it "serves more than one small, co-located team." This directly matches the scenario of multiple independent teams contributing to a shared system. The other options describe situations where the card advises against a highly formalized process, as it can hinder rapid iteration or is simply overkill for small-scale operations.
Read the full bite: Design System Intake Process: The Gatekeeper for Quality
Question 25 of 30
How does a federated contribution model typically balance flexibility and consistency?
Show the answer
Answer: a · By allowing product teams to implement minor changes directly, while requiring core team engagement for significant updates.
A federated model balances flexibility by allowing product teams to handle small, low-risk changes directly, and consistency by requiring core team involvement for larger, more impactful updates. This aligns with the principle of making 'small changes easy and large changes deliberate,' as exemplified by Atlassian. Option C describes a general mechanism but doesn't fully capture the tiered approach to balancing flexibility and consistency for different scopes of change.
Read the full bite: Who Can Change the Button? Design System Contribution Models
Question 26 of 30
Under which circumstance is a formal breaking change policy most essential for a software component?
Show the answer
Answer: b · When it is a shared asset consumed by multiple independent teams or applications.
A breaking change policy is crucial for shared assets with multiple consumers to manage dependency risk and ensure predictable evolution. It is explicitly stated as overkill for early-stage projects or those used by a single team, and it applies to internal shared assets as well as public APIs.
Read the full bite: Breaking Change Policy: Managing API Evolution
Question 27 of 30
What is the main purpose of applying internal branding to a design system?
Show the answer
Answer: c · To articulate the system's purpose and value, fostering team adoption and consistent use.
The card emphasizes that internal branding gives the design system a 'why'—a mission and vision—to drive adoption and ensure consistency. While a distinct visual identity (Option B) can be part of branding, it is a means to this end, not the primary purpose.
Read the full bite: Branding Your Design System for Adoption
Question 28 of 30
The 80/20 rule for component coverage suggests reserving 20% of a UI for custom code primarily to achieve what?
Show the answer
Answer: b · To enable the creation of unique, innovative, or feature-specific elements that differentiate the product.
The card states the 20% is "intentionally reserved for bespoke, innovative, or feature-specific code that makes the product unique," emphasizing product differentiation. While custom code might be used for other reasons, the 80/20 rule's intent is not primarily for developer preference or workarounds.
Read the full bite: Component Coverage: The 80/20 Rule for Design Systems
Question 29 of 30
What is the primary mechanism by which a design system reduces an application's UI bug rate?
Show the answer
Answer: b · It provides a library of pre-tested, reusable UI components.
The card explicitly states that design systems reduce defects by providing "a library of reusable components... that are already coded, tested for functionality and accessibility," which eliminates error-prone work. Option C describes a related benefit, but automated resolution is not the primary mechanism of the design system itself for bug reduction.
Read the full bite: How Design Systems Lower Your UI Bug Rate
Question 30 of 30
A consistently high Component Detachment Rate for a specific component primarily indicates what?
Show the answer
Answer: d · The component is too rigid or lacks sufficient variants for common design needs.
The card explicitly states that a high detachment rate signals a component is "too rigid or lacks the variants and properties needed for a specific design task." Option C is a tempting distractor, but the card warns against treating detachment as a negative signal or a reason to police designers, emphasizing that it's about identifying patterns of system inadequacy, not designer intent.
Read the full bite: Component Detachment Rate: A Design System Health Metric
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.