Architecting density themes with tokens
Density via token layering.
Components reference semantic spacing tokens; a density theme repoints those tokens via CSS variables on a wrapper, so one stylesheet adapts.
WHAT THIS TESTS Whether you can express a cross-cutting visual dimension like density purely through token indirection and CSS custom property cascading, avoiding per-variant style duplication.
A GOOD ANSWER COVERS Make components consume semantic spacing and sizing tokens, for example space-component-padding or control-height, rather than literal pixels. Define density as a theme that supplies a different set of values for those spacing tokens; compact maps them to smaller values, comfortable to larger. Implement at runtime with CSS custom properties scoped to a wrapper or a data-density attribute, so changing the attribute on a container redefines the variables and the cascade flows new spacing into every descendant component without re-rendering or new stylesheets. Components written against the variables need no per-density code. Keep type and color tokens independent so density composes with light or dark theming. Optionally allow local density scopes for dense regions like data tables.
COMMON WRONG ANSWERS Creating separate stylesheets or component variants per density, which multiplies maintenance. Hardcoding pixel padding so density cannot cascade. Forking each component. Coupling density to color theme. Using JS to set inline styles per element instead of letting CSS variables cascade.
LIKELY FOLLOW-UPS How do CSS custom properties enable the cascade? How do you scope density to one region? How does density compose with light or dark themes? How do you handle components needing nonlinear density adjustments?
ONE CONCRETE EXAMPLE A Button uses padding from var space-button-padding. The comfortable theme sets that variable to a larger value, compact to a smaller one, applied via a data-density attribute on a container. Setting data-density to compact on a toolbar shrinks padding on every control inside it instantly, with no Button-specific compact stylesheet and no change to the Button code.
Interview question
How can a compact-versus-comfortable density switch affect all components without duplicating each component's stylesheet?
- a.Each component ships a separate compact and comfortable stylesheet loaded on demand
- b.Density is hardcoded as pixel values inside each component
- c.Components read spacing tokens that a density theme repoints via CSS custom propertiesCorrect
- d.JavaScript sets inline padding on every element when density changes
Why? this is the answer
When components reference spacing tokens exposed as CSS custom properties, a density theme redefines those variables and the cascade updates everything. Per-component stylesheets, inline JS styling, and hardcoded pixels all defeat the single-source token approach.
Just read this? Test yourself on what you have been reading.
- #density
- #design-tokens
- #css-variables
- #theming
- #spacing
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
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. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles