Top 30 Design Systems Interview Questions and Answers
30 multiple-choice questions on Design Systems, drawn from 30 bites out of the 204 tagged Design Systems on Tezvyn. 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.
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
Four divs are set to width: 25%, 10px padding, and 1px border. Under the default box model, why does the last div wrap to a new line?
Show the answer
Answer: a · The declared width applies only to content, so padding and border add extra width.
Under the default content-box model, width applies only to the content area, so padding and border increase the rendered size beyond 25% and cause wrapping. Distractor D is wrong because content-box is the browser default, meaning padding is added outside the declared width rather than included in it.
Read the full bite: Explain the CSS box model: content-box vs border-box
Question 2 of 30
According to the article, how does introducing the eight personas during design critiques apply Nielsen's sixth heuristic to creators?
Show the answer
Answer: b · It embeds recognition cues into the workflow so designers spot exclusion without memorizing WCAG rules
The article explicitly reframes Nielsen's sixth heuristic for creators, using personas as recognition cues during critiques rather than expecting designers to memorize vast accessibility rules. B is tempting because the card discusses shifting away from WCAG memorization, but wrong because the goal is recognition during workflow, not substituting one memorization task for another.
Read the full bite: 8 Free Personas Spot Accessibility Issues in Design
Question 3 of 30
An element has both id='banner' and class='active'. If #banner sets margin-top: 10px and .active sets margin-top: 20px, which value applies?
Show the answer
Answer: b · 10px, because an ID selector has higher specificity than a class selector
An ID selector contributes 1-0-0 to specificity while a class contributes 0-1-0, so #banner wins even if .active appears later. IDs being unique in the DOM is an HTML constraint, not the reason the cascade favors the ID selector.
Read the full bite: How do class and ID selectors differ in specificity and use case?
Question 4 of 30
A user-agent stylesheet sets a button to black with a high-specificity selector, and an author stylesheet sets it to blue with a low-specificity selector. What is the final color?
Show the answer
Answer: b · Blue, because author styles originate from a higher origin than user-agent styles, and origin is evaluated before specificity.
The cascade evaluates origin before specificity, so an author rule always beats a user-agent rule regardless of selector weight. Option A represents the common misconception that specificity trumps origin, while D incorrectly invokes source order when origin already differs.
Read the full bite: Describe the full CSS cascade precedence order
Question 5 of 30
In a specificity conflict between `#header` and a selector with eleven classes, which statement is true?
Show the answer
Answer: a · The `#header` selector wins because the ID column outweighs any number of classes
The card explains that specificity is a tuple where the leftmost nonzero column wins, so one ID always beats any number of classes. Option D is tempting because it reflects the common error of collapsing the tuple into a single integer.
Read the full bite: How is CSS specificity calculated for a complex selector?
Question 6 of 30
A product team requests a custom Button for a high-visibility landing page. Which response best demonstrates mature design system governance?
Show the answer
Answer: c · Ask context questions about user flow, apply a decision tree, and document the outcome as a pattern alignment or new variant.
The correct approach first investigates context and maps the request to existing patterns via a decision tree before documenting any new variant, balancing velocity with integrity. The most tempting distractor is adding the Button to the system immediately without guidelines, which appears helpful but merely delays the chaos by failing to establish reusable standards.
Read the full bite: How do you handle a product team requesting a custom Button?
Question 7 of 30
A design system groups element selectors for a global reset. Developers complain that single-class utilities cannot override it. Switching from :is() to :where() fixes this because...
Show the answer
Answer: b · :where() has zero specificity, while :is() takes on the specificity of its most specific argument
:where() always has zero specificity, so a single class easily overrides it, whereas :is() inherits the most specific argument's weight, creating a barrier. Option D is tempting because it admits :where() is lower but incorrectly claims it still carries element-level weight rather than zero.
Read the full bite: Explain :is() vs :where() specificity and when to pick :where()
Question 8 of 30
When creating lighter and darker shades of a single brand color, why is HSL typically preferred over HEX?
Show the answer
Answer: a · HSL separates lightness from hue, allowing you to adjust shade with one value.
HSL keeps hue and saturation separate from lightness, so you can darken or lighten a color by adjusting a single percentage. Option D is a common misconception—modern HEX supports transparency in eight-digit notation, and D ignores that HSL reorganizes color data to make lightness adjustments intuitive.
Read the full bite: Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Question 9 of 30
What is a direct consequence of CSS pseudo-elements not being part of the standard Document Object Model (DOM)?
Show the answer
Answer: c · They cannot be directly selected or manipulated by JavaScript.
The card states, "You cannot attach JavaScript event listeners to them, as they are not in the DOM," directly linking their non-DOM status to JavaScript manipulation limitations. Distractor C is incorrect because the card mentions their styles are dynamic, adapting to layout changes.
Read the full bite: CSS Pseudo-elements: Styling Parts of an Element
Question 10 of 30
What makes rem more predictable than em when sizing text in nested components?
Show the answer
Answer: a · rem references the root font size and avoids parent-level compounding
rem is always calculated from the root font-size, preventing nested elements from multiplying their size as em does. Distractor D is tempting but wrong because em references its direct parent, not the root, leading to unpredictable compounding in nested trees.
Read the full bite: Explain em, rem, px and why rem is preferred for font sizing
Question 11 of 30
Which CSS approach makes a background image completely fill its container while preserving its original aspect ratio?
Show the answer
Answer: d · background-size: cover; background-repeat: no-repeat;
background-size: cover scales the image until it fills the entire container and preserves its aspect ratio by cropping excess, whereas 100% 100% forces the image to match the container's exact dimensions and stretches it out of proportion.
Read the full bite: Which CSS background properties make a hero image cover its container?
Question 12 of 30
Why should icons in a developer-facing Figma system use a single flattened path without hardcoded fills?
Show the answer
Answer: c · It lets the icon inherit color in code via currentColor, supporting theming
A single color-agnostic path lets the icon inherit its color through currentColor, so one icon serves multiple themes. Hardcoded fills can be exported but block recoloring; flattening is not required for publishing.
Read the full bite: Building a scalable icon system in Figma
Question 13 of 30
Why do many teams map semantic t-shirt-size spacing tokens onto an underlying numeric base-unit grid rather than choosing only one approach?
Show the answer
Answer: c · It gives readable, intent-based names backed by predictable, grid-aligned math
Combining them keeps the clarity of named intent while the numeric base ensures consistent, composable alignment. The named tokens still resolve to concrete values, and a scale constrains rather than permits arbitrary spacing.
Read the full bite: Choosing a spacing scale for a design system
Question 14 of 30
When architecting a maintainable CSS color system, what is the main benefit of defining tokens on :root and consuming them with var()?
Show the answer
Answer: c · It creates a single source of truth so updating one value propagates to all components
Defining tokens on :root creates a single source of truth inherited everywhere, so one edit updates all components using var(). Distractor A describes SASS variables, which are compiled away and cannot be mutated at runtime like native CSS custom properties.
Read the full bite: How do CSS Custom Properties manage a design system color palette?
Question 15 of 30
A heading has background-image: linear-gradient(gold, purple) and background-clip: text applied, yet the text still appears solid black. What is the root cause?
Show the answer
Answer: b · The foreground text color remains opaque and paints over the clipped background layer
The card states that foreground text color sits above the background in stacking order, so an opaque text fill completely obscures the clipped gradient unless color is transparent. Option C is a tempting distractor because candidates often confuse background-origin, which controls positioning, with background-clip, which controls the painting area.
Question 16 of 30
Which set of roles and attributes correctly wires a tab to its panel per the W3C pattern?
Show the answer
Answer: a · tab has aria-controls pointing to the panel id; tabpanel has aria-labelledby pointing to the tab id
The W3C pattern requires aria-controls on the tab to reference its panel and aria-labelledby on the panel to reference its tab, establishing a bidirectional programmatic link. Option B reverses these attributes, which is a common mistake that severs the intended relationship and confuses assistive technologies.
Read the full bite: What WAI-ARIA attributes and keyboard interactions make Tabs accessible?
Question 17 of 30
Which of the following would violate encapsulation in a reusable Button component?
Show the answer
Answer: c · Providing a class or style prop for consumer style overrides
Exposing a class or style prop creates an escape hatch that breaks encapsulation by letting consumers override internal styles, making the component unmaintainable at scale. Variant, slots, and native event forwarding are all encouraged practices for a clean, composable API.
Read the full bite: Design the public API for a reusable Button component
Question 18 of 30
You set color-scheme: light dark on :root and use prefers-color-scheme for custom tokens, but a browser forced dark mode breaks your hero section. What is the most targeted fix?
Show the answer
Answer: a · Add color-scheme: only light to the hero section to prevent UA overrides
The only keyword explicitly forbids the UA from overriding an element's color scheme, making it the correct tool to opt a specific component out of a forced dark mode. A prefers-color-scheme media query cannot block browser overrides because it only lets authors react to the user's preference, not control native UI recoloring.
Question 19 of 30
Which approach correctly gives a polymorphic Typography component type-safe props so that disabled is rejected when as is h1 but to is accepted when as is a custom Link?
Show the answer
Answer: d · constrain the generic C to React.ElementType and intersect Omit<ComponentPropsWithoutRef<C>, 'color'> with the component's own props
Option D is correct because React.ElementType accepts both intrinsic tags and custom components, ComponentPropsWithoutRef<C> surfaces the correct props for each C, and Omit resolves clashes with custom APIs like color. Option A is tempting but excludes custom components such as Link, while A and D sacrifice compile-time validation.
Read the full bite: Design a type-safe polymorphic component that renders as different HTML elements
Question 20 of 30
When a flex container overflows because the sum of flex-basis values exceeds its width, how does the browser determine how much each item shrinks?
Show the answer
Answer: a · Each item surrenders space in proportion to the product of its flex-shrink and flex-basis values.
The flexbox algorithm weights each item's shrink factor by its flex-basis, so larger starting items surrender more of the overflow relative to their siblings. Option D is tempting because flex-grow distributes leftover space by ratio alone, but flex-shrink specifically factors in the starting size to determine how much each item gives up.
Read the full bite: Explain flex-grow, flex-shrink, flex-basis and their interaction
Question 21 of 30
Which properties size tracks the browser generates when items are placed outside the explicit grid?
Show the answer
Answer: c · grid-auto-rows and grid-auto-columns
grid-auto-rows and grid-auto-columns define the dimensions of implicitly created tracks outside the explicit grid. auto-fit and auto-fill are repeat strategies that collapse empty explicit tracks rather than generate new implicit ones.
Read the full bite: Explicit vs implicit grid: how do you control implicit tracks?
Question 22 of 30
Which scenario most appropriately demonstrates the use of WAI-ARIA?
Show the answer
Answer: b · Implementing role="tab" and aria-selected on <div> elements styled to function as a tab in a custom tabbed interface.
WAI-ARIA is designed for custom interactive components that lack native HTML equivalents, like a tabbed interface built from generic <div>s. Options A, B, and D violate the first rule of ARIA use: if a native element exists for your purpose (e.g., <button>, alt attribute, <h1>-<h6>), use it instead of ARIA.
Read the full bite: WAI-ARIA: A Script for Custom UI Accessibility
Question 23 of 30
In a nested CSS grid, what fundamentally prevents a grandchild element from aligning to the outer grid's tracks without using subgrid?
Show the answer
Answer: b · The inner grid establishes its own independent track list, isolating its children from the parent's grid lines.
The inner grid creates its own independent track list, so its children have no knowledge of the outer grid's lines. Distractor D is tempting because identical fraction values appear to create alignment, but independent track contexts mean the grids remain isolated regardless of the units used.
Read the full bite: What problem does subgrid solve? Give a concrete example.
Question 24 of 30
Why is the slots pattern better than a single children prop for a PageLayout with header, sidebar, and main regions?
Show the answer
Answer: a · It provides named insertion points so each region is placed and styled independently
Named slots let the layout own structure while consumers fill each region separately; a single children blob cannot target distinct placements. Slots typically allow missing regions to collapse, not require all of them.
Read the full bite: The slots pattern for a PageLayout component
Question 25 of 30
A notification badge must overlap an avatar inside an Auto Layout frame. What is the best approach?
Show the answer
Answer: c · Set the badge to absolute position so it ignores flow but stays inside the frame
Absolute positioning removes the badge from the directional flow, letting it overlap the avatar without pushing sibling elements while the parent still resizes responsively. Moving the badge outside the frame is a tempting but wrong choice because it severs the responsive relationship and makes the component harder to maintain.
Read the full bite: When would you use absolute position in an Auto Layout frame?
Question 26 of 30
Which method correctly architects a responsive Figma nav bar to preserve component links and handle breakpoint-specific layouts without detaching instances?
Show the answer
Answer: c · Create one component set with variants, horizontal Auto Layout with wrap for links, and a nested vertical overlay for mobile.
A single variant-driven component set with Auto Layout preserves maintainability and link propagation across states, whereas creating separate components breaks those links and creates maintenance debt.
Read the full bite: Structure a responsive nav bar using variants and Auto Layout
Question 27 of 30
When a viewport shrinks from 1200 px to 375 px in a properly built Figma feature grid, what happens first to initiate reflow?
Show the answer
Answer: a · The outer vertical section frame narrows, causing the inner horizontal Auto Layout row with Wrap enabled to break cards onto new lines
The correct answer reflects the top-down propagation described in the card: the Fill-width section frame narrows, which triggers the horizontal row's Wrap to break cards onto new lines. The most tempting distractor is A because boolean properties are indeed used to manage content differences across breakpoints, but they do not automatically trigger based on viewport width in Figma's standard component model.
Read the full bite: Build a responsive feature grid with nested Auto Layout and component properties
Question 28 of 30
Why is exporting one named Storybook story per visual state preferred over a single story with manual prop toggles?
Show the answer
Answer: a · It makes each state discoverable in the sidebar and deterministically snapshottable for visual regression
Named stories surface every state in navigation and give visual regression tools stable, deterministic frames to snapshot. Bundle size is unaffected since stories are dev-only, making that distractor wrong.
Read the full bite: Structuring Storybook stories for visual states
Question 29 of 30
You need a single button instance to switch between default, hover, and disabled states automatically. What should you do?
Show the answer
Answer: a · Build a component set with a State property and wire Change to interactions between variants
Component sets group related states under one property, and Change to interactions let an instance switch variants automatically without manual swaps. Option B is wrong because separate components create duplication and require designers to swap instances by hand, which is exactly the red flag the card warns against.
Read the full bite: Create a button component with default, hover, and disabled variants
Question 30 of 30
What most reliably prevents a documented anti-pattern from recurring in consuming code?
Show the answer
Answer: d · Pairing the don't with enforcement like a lint rule, type constraint, or dev warning
Enforcement catches misuse mechanically rather than relying on developers reading and remembering prose. Warnings and extra examples are passive and easily ignored, and deprecation does not address the specific misuse pattern.
Read the full bite: Documenting component anti-patterns and don'ts
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.