Design Systems
204 bites tagged Design Systems — interview questions with model answers, and 60-second explainers.
Accessible toasts with ARIA live regions
A persistent live region, polite vs assertive by urgency, role status or alert, content injected after mount. announcing dynamic content without moving focus. moving focus to the toast or creating the region at announce time.
Enforcing an accessible name on icon-only buttons
Require aria-label via the type system for icon-only variants, warn at runtime, decorate the icon as aria-hidden. API design that guarantees an accessible name. trusting developers to remember a label on icon buttons.
ARIA roles and keyboard nav for a Tabs component
Tablist, tab, tabpanel roles with aria-selected and aria-controls; arrow keys move tabs, Tab moves to the panel via roving tabindex. the tabs ARIA pattern. making every tab a Tab stop or omitting aria-selected.
Enforcing WCAG color contrast programmatically
Pre-validate token pairs, expose only safe semantic combos, lint and test contrast in CI. preventing failing color pairings by design. trusting developers to eyeball contrast manually.
Managing keyboard focus in an accessible Modal
Move focus in on open, trap Tab inside, close on Escape, restore focus to the trigger on close. focus management for dialogs. leaving focus behind the modal so Tab escapes to the page.
Minimizing library bundle-size impact on consumers
Track size in CI with size-limit, support granular imports, externalize peers, lazy-load heavy parts, audit with bundle analyzers. controlling bundle cost at scale. relying on tree-shaking alone with no measurement.
Building a visual regression testing pipeline
Snapshot Storybook stories per PR, freeze nondeterminism, set diff thresholds, manage baselines via approvals. scalable visual diffing. pixel-perfect diffs with no flake control or baseline workflow.
Syncing design tokens from Figma to code
Export Figma variables to a token spec, transform with Style Dictionary into platform outputs, automate via CI. a tokens pipeline with a single source of truth. manually copying hex values by hand.
Releasing a breaking change without forcing upgrades
Ship a major bump, keep the old major published, document migration, automate with Changesets. managing breaking changes under semver. hiding a breaking change in a patch or force-upgrading everyone.
Monorepo vs polyrepo for a design system
Atomic cross-package changes and shared tooling versus build orchestration, caching, and versioning complexity. repo architecture trade-offs. blanket pro or anti stance ignoring release and CI implications.
CSS-in-JS vs pre-compiled CSS for distribution
Runtime cost and dynamic theming of CSS-in-JS versus cacheability and SSR simplicity of static CSS. styling distribution trade-offs. declaring one universally better with no mention of runtime or caching.
Storybook's role in design system infrastructure
Isolated development, living documentation, visual and interaction testing, shared review surface. why a component explorer matters. describing it only as a dev playground with no testing or docs value.
Publishing a component to a private NPM registry
Configure package.json fields and scoped name, build dist, set registry auth, npm publish with access restricted. the packaging-to-publish workflow. forgetting the build step or shipping raw source.
Measuring design system documentation effectiveness
Search-with-no-results, time-to-first-component, support-ticket deflection, tied to analytics and registry data. outcome metrics over vanity page views. citing only page views or NPS with no instrumentation.
Documenting component anti-patterns and don'ts
Paired do/don't examples, explain the why, enforce with lint rules. guiding correct usage by showing failure modes. vague prose warnings with no concrete counter-example or guardrail.
Structuring Storybook stories for visual states
One named story per state with explicit args, plus argTypes and controls. organizing component documentation in an explorer. dumping every state into one story with manual prop toggling.
The slots pattern for a PageLayout component
Slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents. named composition regions.
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. turning spacing into a consistent system. free-form pixel values with no scale or rationale.
Component Stability Index
A component stability index is a maturity signal that tells consumers how safe a design-system component is to use, from experimental to stable to deprecated, setting expectations about API churn and supporting confident adoption decisions.
Automated Release Pipeline
An automated release pipeline turns merged design-system changes into published, versioned packages without manual steps, using semantic versioning and changelogs so consumers can upgrade safely and the team ships small changes frequently and reliably.
Monorepo tradeoffs for a design system
Monorepos give atomic cross-package changes, shared tooling, and easy local linking; drawbacks include build complexity, CI scaling, and tighter coupling. build/repo architecture judgment.
Component variants with BEM modifier classes
A base block class holds shared styles, modifier classes (block--primary, block--destructive) layer only the differences, and you combine base plus one modifier. structured variant styling.
Core tokens versus alias semantic tokens
Core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value. token-tier architecture.
Distributing design tokens across web, iOS, and Android
Keep one source-of-truth JSON, transform with a tool like Style Dictionary, emit per-platform formats (CSS vars, Swift, XML) in CI. cross-platform token pipeline design.
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.