How do CSS Custom Properties manage a design system color palette?
Tokenization and cascade scoping.
Define --color-primary on :root, use var() for buttons and headings, mention fallbacks.
Confusing CSS variables with SASS or using only local scopes.
What's really being asked
This question evaluates whether you can architect a maintainable color system using native CSS rather than preprocessor crutches. The interviewer cares if you understand the difference between compile-time constants and runtime cascading variables, and whether you know how to scope tokens globally while keeping semantic meaning.
The full answer
Four things in order. First, define a semantic custom property on the :root pseudo-class so it inherits everywhere, for example :root { --color-primary: #3b82f6; }. Second, consume that token with the var() function in multiple contexts, such as a button background with background-color: var(--color-primary) and a heading text color with color: var(--color-primary). Third, explain why this beats raw hex codes: a single source of truth means changing the value in one place updates every component instantly. Fourth, contrast CSS custom properties with SASS variables by noting that CSS variables exist in the computed styles at runtime, so JavaScript can mutate them and media queries can reassign them on specific selectors, though you cannot use var() inside a media query breakpoint expression itself.
The mistakes people make
Three red flags stand out. One, answering with SASS-style $primary-color instead of --primary-color, which shows confusion between preprocessor compilation and the cascade. Two, defining the variable inside a local component selector without a global fallback, which forces duplication and defeats the design system goal. Three, claiming var() works inside media query conditions like @media (min-width: var(--breakpoint)), which is false and reveals a gap in specification knowledge.
What usually comes next
The interviewer may ask how you would support dark mode, which you answer by redefining :root tokens inside a prefers-color-scheme media query or by scoping overrides to a data attribute. They may also ask about fallback values, so you should mention the second argument to var() like var(--color-primary, blue). Another common follow-up is how to expose these values to JavaScript, which is done via getComputedStyle and setProperty on element styles.
A concrete example
A solid snippet looks like this. In your global CSS, write :root { --color-primary: #2563eb; }. Then for the button, write .btn-primary { background-color: var(--color-primary); border: none; }. For the heading, write h1 { color: var(--color-primary); }. If you later rebrand to #1d4ed8, you change exactly one line in :root and both components update immediately without touching their individual rulesets.
Interview question
When architecting a maintainable CSS color system, what is the main benefit of defining tokens on :root and consuming them with var()?
- a.It scopes tokens locally to each component to prevent unintended inheritance
- b.It compiles colors to static values at build time, eliminating runtime overhead
- c.It creates a single source of truth so updating one value propagates to all componentsCorrect
- d.It enables the use of var() inside media query breakpoint expressions
Why? this is the answer
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.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #custom-properties
- #design-systems
- #frontend
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you 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.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles