How do CSS Custom Properties manage a design system color palette?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org