Almost never, and it is worth seeing why in numbers rather than as a rule of thumb. Here are the dark backgrounds and card surfaces from five unrelated shipping palettes, in HSL:

Three patterns, all consistent, none of them accidental.

• Nothing is at 0% lightness. The darkest is 8%. Pure black is the one value with no room beneath it — the moment you need a surface *below* the background, you have nowhere to go.
• Cards are lighter than the background, by 3 to 5 points. In dark interfaces, raised means lighter. This inverts the light-mode instinct, where a card is often the lighter thing sitting on a tinted page.
• Only one of the five is true grey. The rest carry a hue — 30, 222, 128, 36 — usually pulled toward the accent. A tinted dark neutral reads as designed; an untinted one reads as a default, because it is the default.

The fastest way to a bad dark mode is to flip the lightness of every light-mode value. Four specific things break, in roughly this order:

1. Shadows stop working. A shadow is darkness cast on a lighter surface. On a dark surface there is nothing left to darken, so every elevation cue you had silently disappears and the interface flattens.
2. The accent fails contrast. A saturated mid-tone brand colour that reads cleanly on white is often too dark against a near-black background. Inverting the neutrals does not touch it, so it fails quietly rather than obviously.
3. Borders vanish or shout. A light-mode border is a slightly darker line. Inverted, it becomes a slightly lighter line — which either disappears against the card or glows against the background, depending on which surface it lands on.
4. Disabled and muted states collapse. In light mode these are lighter greys. Inverted, they become dark greys on a dark background, and "muted" turns into "invisible".

Since shadows are unavailable, dark interfaces express depth through surface lightness. That is what the background-to-card gap in the table above is doing: each step up in the stack is a step up in lightness.

You need at least three levels, and it is worth naming them rather than improvising: the page background, a raised surface (cards, panels), and an overlay surface (popovers, dropdowns, dialogs) that sits above both. Spacing them 3 to 5 lightness points apart keeps the boundaries readable without turning the screen into stripes. Below about 3 points the levels stop being distinguishable at normal brightness; much above 6 and the top surface starts looking like a light-mode panel someone dropped in.

Look again at the primaries from those same five kits: 12 71% 46%, 46 85% 60%, 225 63% 80%, 114 47% 50%, 23 92% 60%. Every one is a light or mid tone. None is a deep saturated version of the hue, because a deep saturated colour on a near-black surface is both hard to read and hard to look at.

The general rule is that a light-mode accent has to lighten and usually desaturate for dark mode. Lightening buys contrast; desaturating stops it vibrating against the dark neutral, which is the effect that makes some dark themes physically tiring. And the accent needs its own foreground decision: a colour bright enough to read on dark is often bright enough to need *dark* text on top of it, which is the reverse of the light-mode pairing.

Check both directions against a contrast target. Body text on the background is the obvious one; the two that get missed are muted text on a card, and the accent's foreground on the accent itself.

This is where most palette galleries leave you. A row of five hexes tells you the mood and answers almost none of the questions a real screen asks: what colour is a border on a card, what does muted text look like on an overlay, what does a destructive button look like when it is disabled, what colour is the ring on a focused input.

The role list is the same in both modes, which is the point: background, foreground, card, card-foreground, popover, popover-foreground, muted, muted-foreground, primary, primary-foreground, secondary, accent, destructive, border, input, ring, plus chart series. Define them once per mode and every component resolves without anyone picking. Skip them and each new screen re-picks, differently. The full list and what each role is for is in semantic colour tokens explained.

Everything above is a rule. These are four dark sets that follow it, chosen because they resolve the same problem in visibly different ways. Read the background and card pair in each: that gap is the elevation model, and it is the decision that most determines whether a dark UI reads as designed or as inverted.

Interfaces are increasingly built by coding agents working from a written brief, and dark mode is the single most commonly missing thing in those briefs. We sampled 299 public DESIGN.md files — the file a coding agent reads before writing UI — and measured what they cover.

The consequence is predictable. Asked for a dark variant with nothing written down, an agent inverts the greys — the exact move that breaks all four things listed earlier. It produces something plausible on the first screen and inconsistent by the fifth, and because each individual screen looks fine, nobody catches it until the whole app is built.

1. 1

   Stack three surfaces

   Put an overlay on a card on the background, with a one-pixel border on each. If any boundary disappears, your lightness steps are too close or your border role is doing double duty.

2. 2

   Render muted text on every surface

   Not just on the background. Muted-on-card is where an inverted palette usually falls apart, and it is the most common text state in a dense interface.

3. 3

   Build a destructive confirmation

   It exercises destructive, its foreground, its hover and its border together — the cluster of roles people define last and use first.

4. 4

   Focus something

   Tab to an input. A focus ring is a colour nobody picks deliberately, so it is either your accent doing a job it is bad at, or a browser default nobody chose.

5. 5

   Look at a dense table

   Three greys next to each other is the hardest thing a dark palette does. A palette that survives a settings table survives a marketing page trivially; the reverse is not true.

• Starting at pure black. It removes the level below your background before you have discovered you need one.
• Reusing the light-mode accent unchanged. It usually needs to lighten, often needs to desaturate, and may need dark text on top of it.
• Keeping shadows and adding lightness steps. Pick one elevation language. Doing both makes raised surfaces read as smudged.
• Defining only what the first screen needed. The roles you skip are the ones the next screen invents, and it will invent them differently.
• Testing on a marketing page. Hero sections flatter every palette. Test on the densest screen you have.