Design Systems
204 bites tagged Design Systems — interview questions with model answers, and 60-second explainers.
Federated Design System Team Model
Federated ownership spreads design system control across teams, not a silo. A lean core owns standards while contributors ship components from the field. The footgun is treating federation as zero governance, splintering the system into forks.
Semantic HTML: Structure as Accessibility Infrastructure
Semantic HTML assigns real roles to page elements so screen readers can navigate them. Use buttons for actions, headings for outline, and tables for data. The footgun is using divs with click handlers as buttons; they are invisible to keyboard and screen…
Changesets: PR Receipts for Monorepo Releases
A changeset is a receipt stapled to each PR that records what changed and how it bumps versions. It lets CI batch monorepo releases and generate changelogs automatically. The footgun is forgetting to add one, leaving unreleased code silently unpublishable.
Design Token Documentation as Usage Contracts
A design token dictionary translates raw values into intent: it tells engineers when to use color-action-primary versus the raw hex across web, iOS, and Android. Without usage context, teams treat tokens as magic numbers and drift from the system.
Storybook: Design System Documentation
Storybook is a workshop for building UI components in isolation, then auto-publishing docs from those living examples. Teams use it to catalog design systems without maintaining a separate documentation site.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible. Vestibular accessibility and media ergonomics. Ignoring the setting or using JS instead of CSS media features.
Implement fluid typography from 16px to 24px across 400px–1200px in one declaration?
This tests clamp() fluency for viewport-relative type scaling without media queries. A strong answer states clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px) and explains the slope math. A red flag is multiple media queries or calc() without clamp().
What are CSS container queries and what problem do they solve?
This tests component-level responsive awareness. A strong answer states container queries style elements based on their container size, letting components adapt regardless of viewport. Red flag: believing media queries alone solve component context adaptation.
Explain advantages of rem and em over px in responsive design
This tests cascading font scaling and accessibility. Strong answers mention user zoom, root-level rem control, component em scaling, and avoiding px fragmentation. Red flag: claiming px handles all user preferences automatically.
What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
Explicit vs implicit grid: how do you control implicit tracks?
Explicit tracks use grid-template; implicit tracks appear on overflow. Control via grid-auto-rows/columns and grid-auto-flow. Grid track generation beyond explicit bounds.
Explain flex-grow, flex-shrink, flex-basis and their interaction
Tests deep understanding of flexbox sizing beyond keywords. A strong answer defines grow and shrink as ratios for distributing leftover or overflow space, basis as the starting size, and explains the two-step calculation.
How does color-scheme interact with user-agent stylesheets and prefers-color-scheme?
This tests the boundary between author CSS and browser chrome. color-scheme lets the UA recolor native UI like scrollbars and form controls automatically, while prefers-color-scheme styles custom components.
How do you create gradient text in CSS?
Set a gradient background-image, use background-clip: text to clip to glyphs, and color: transparent to reveal it. Mastery of background-clip and CSS box model.
How do CSS Custom Properties manage a design system color palette?
Define --color-primary on :root, use var() for buttons and headings, mention fallbacks. Tokenization and cascade scoping. Confusing CSS variables with SASS or using only local scopes.
Which CSS background properties make a hero image cover its container?
Tests background-size keywords and aspect-ratio behavior. Lead with cover, note it fills the container by cropping while preserving ratio, unlike contain. Red flag: recommending 100% 100% or explicit lengths, which stretch and distort the image.
Explain em, rem, px and why rem is preferred for font sizing
This tests CSS unit semantics and accessibility. px is absolute; em compounds against its parent; rem is root-relative and predictable. rem respects user browser font settings without nesting issues.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue. CSS color syntax and tradeoffs between HEX, RGB, and HSL. Claiming HEX lacks transparency or equating RGB and HSL.
Explain :is() vs :where() specificity and when to pick :where()
Tests whether you treat specificity as architecture, not just syntax. :where() has zero specificity; :is() adopts the most specific argument's weight. Choose :where() for base resets or utility classes designed to be overridden. Red flag: calling them equal.
How is CSS specificity calculated for a complex selector?
This tests ID-CLASS-TYPE algorithm fluency. A strong answer gives the three-column tally, counts IDs, classes or attributes, and types in order, and notes combinators add zero. A red flag is counting combinators or mixing inline styles into selector scores.
Describe the full CSS cascade precedence order
This tests deep cascade knowledge beyond specificity. A strong answer lists the six origins in order, notes !important reverses them, then layers, specificity, and source order.
How do class and ID selectors differ in specificity and use case?
IDs are 1-0-0 and meant for unique elements; classes are 0-1-0 and reusable. Your grasp of CSS specificity weights and selector architecture. Saying order alone decides specificity or using IDs for repeated components.
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
Design System Roadmap: Sequence Adoption Over Completeness
A design system roadmap sequences components by business impact, not visual completeness, to stop teams rebuilding the same UI. Use it when multiple squads duplicate buttons and forms. The footgun is a perfect Figma library engineers never adopt.
Get Design Systems bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.