Design a design system and component library
PremiumFrontend systemMedium
- Design tokens
- Theming
- CSS variables
Quick answer
This frontend system interview question asks you to design a design system and component library. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design a design system and component library, like Material UI or Shopify Polaris, for a company with 12 product teams building web apps. The hard part is a token pipeline with runtime light, dark and brand themes, accessibility built in once, and releases teams can adopt without breaking.
Today each team has its own buttons, modals and colours. The system must provide design tokens (colour, spacing, typography, radius, shadow), light and dark themes plus brand themes for white-label customers, about 40 components from Button to DataTable, documentation, and a release process that lets teams upgrade without breaking.
What must a design system and component library do?
- Tokens: A single source of tokens exported to CSS variables, a TypeScript object and native formats; semantic tokens (colour.text.primary) map to palette tokens (blue.600) per theme.
- Theming: Switch light, dark and brand themes at runtime without reload; themes can be nested (a dark card inside a light page).
How well must it do it?
- Bundle size: Importing Button alone adds under 5 KB gzipped; the full library is tree-shakeable; no duplicate copies across micro-frontends.
- Accessibility: Every component passes automated checks and a manual keyboard and screen reader review before release.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Design tokens
- Theming
- CSS variables
- Headless components
- Semantic versioning
- Visual regression
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a design system and component library and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team