skip to content

In a design system's dark theme, why do shadows convey elevation poorly, and how does tonal elevation replace them?

level: middleimportance: must knowfreq 50%

answer

  1. a shadow must be darker than its surface
  2. little room below near-black
  3. nearer the light, lighter the surface
  4. one tone step per level
  5. recheck contrast on every tone

basics

~20 s

A shadow is darker than the surface behind it, and on a near-black background there is little darker left, so depth disappears. Tonal elevation makes higher surfaces progressively lighter, one tone step per level, so depth reads through brightness instead.

solid answer

~50 s

Shadows work by being **darker than the surface underneath**. On a light background that contrast is easy; on a near-black dark-theme background there is almost no darker value left, so a menu or sheet barely separates from what it covers. **Tonal elevation** replaces the cue: each elevation level maps to a **lighter surface tone**, as if higher surfaces were nearer an overhead light, typically by blending a little white or a tint of the brand hue into the base surface. Shadows are often kept for the highest levels, alongside a scrim, where they still help. The tone steps must be distinct but small, and every text and icon colour placed on each tone has to be re-checked for contrast, since lighter surfaces reduce the contrast of light text. In a game companion app, the lobby sits at the base tone, loadout cards one step up and the squad-invite sheet higher still.

go deeper

for a junior

Recall that shadows fade on dark backgrounds, and that dark themes show elevation by making higher surfaces lighter.

for a middle

Explain why a shadow needs a darker value to read, how lightening overlays or tints produce tonal steps, and where shadows and scrims are still kept.

for a senior

Show how you would fix a dark theme where sheets vanish into the background, choose tone steps, and re-verify foreground contrast on every tone.

for a principal

Weigh brand-tinted tones against neutral ones across products, and how tightly the system should couple tone steps to its allowed foreground colours.

## Why shadows fade in a dark theme A **shadow** is a region darker than the surface it falls on. The eye reads depth from that difference. In a light theme the background is near white, so there is a wide range of darker values available and shadows read clearly at every elevation level. In a dark theme the background is already near black. A shadow still has to be darker than that, and there is very little darker left. The result: - Low-level shadows, such as those under resting cards, become invisible. - Higher-level shadows show only as a faint halo, so menus and sheets barely separate from the content they cover. - Making shadows larger or more opaque to compensate produces muddy, heavy edges rather than depth. ## Tonal elevation **Tonal elevation** replaces shadow with brightness. Each elevation level maps to a **surface tone**, and higher levels are lighter, as if a light source above the screen illuminated nearer surfaces more strongly. Systems produce the tones in one of two common ways: 1. **Lightening overlays**: a semi-transparent white layer on the base surface, more opaque at higher levels. 2. **Tinted tones**: the base surface blended with a small amount of the brand or primary hue, stronger at higher levels, which also gives the dark theme some brand character. In a multiplayer game's companion app this might look like: | Level | Surface | Dark-theme treatment | |---|---|---| | 0 | lobby background | base tone, dark grey | | 1 | loadout cards, friend tiles | one step lighter | | 3 | squad-invite sheet, menus | several steps lighter | | 4 | match-result dialog | lightest tone, plus a shadow and a dimming scrim | The components do not change: they still say "dialog surface" or "card surface", and the theme resolves each level to a tone instead of, or in addition to, a shadow. ## Rules that make it work - **Small, distinct steps.** The tones must be perceivably different from each other, yet small enough that raised surfaces do not look like a different colour scheme. Many systems compress steps at the top of the scale. - **Keep shadows where they still help.** Highest levels such as dialogs often keep a shadow and sit above a **scrim**, a dimming layer that darkens everything below and restores separation. - **Avoid pure black as the base.** Common practice is a very dark grey base rather than pure black, partly so there is room for the tone steps and for a shadow to be darker than the base; it is a convention with a reason, not a mandated rule. - **Borders as a supplement.** A thin outline can help separate same-tone surfaces, for example adjacent cards at one level. - **Watch the tint.** A strong brand tint on high surfaces can make a neutral dialog look like a branded or selected state; the tint should stay subtle. ## The contrast trap Lighter surfaces change the contrast of everything placed on them. Light text that met its contrast target on the base tone may fall below it on the lightest tone, and a coloured status icon may shift in perceived meaning. Every foreground colour the system allows on a surface must be checked against **each** tone that surface can take, not only against the base. The exact thresholds are an accessibility topic; the design-language decision is that tonal steps are chosen together with the foreground colours that must sit on them. ## Checking the result 1. Place every level's surface side by side on the base tone and confirm each step is distinguishable at a glance. 2. Open a real stack in the app, a sheet over cards over the lobby, and confirm the order reads even with shadows removed. 3. Check each allowed foreground colour on each tone. 4. Review the theme on a dim screen and a bright one, since small tonal steps can vanish at low brightness. ## Pitfalls - Shipping the light theme's shadow tokens unchanged into the dark theme and concluding that depth "just works". - Darkening higher surfaces, which reverses the light model and makes overlays recede. - Letting every team pick its own lighter grey, so level 2 means five slightly different tones. - Checking contrast only on the base background.

  • Should a light theme also use tonal elevation, or only shadows?
    Either can work, and some systems use both everywhere. In a light theme shadows read well, so tone is optional; some systems add a faint tint to raised surfaces for brand character. What matters is that the level, not the treatment, is the unit components reference, so each theme can express depth in the way that reads best on its background.
  • Why is a strong brand tint on high dark surfaces risky?
    Tint carries meaning. A dialog whose surface is noticeably blue or green can read as a selected, branded or status-coloured element rather than a neutral overlay, and tinted surfaces change the contrast and perceived hue of foreground colours on them. Keeping the tint subtle and checking foreground colours on each tinted tone avoids both problems.

Think of a desk lamp above a stack of papers in a dim room: the sheet on top, nearest the lamp, is the brightest, and each sheet below is a little darker. In the dark, you read the stack by brightness, not by the shadows between the sheets.

saying these in an interview costs you the question

  • Dark themes can reuse the light theme's shadow tokens unchanged.
  • Higher surfaces in a dark theme should be darker to look further away.
  • Contrast only needs checking against the dark theme's base background.
  • Making shadows bigger and blacker fixes depth in dark themes.
  • Tonal steps should be large enough to read as different colours.