# No Glowing Accents on Dark Backgrounds

**NEVER** · **ID:** `design-impeccable-dark-glow` · **Category:** design
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-impeccable-dark-glow

> NEVER: Add a colored `box-shadow` glow (chroma >= 30, blur radius > 4px) to elements sitting on a near-black surface (relative luminance < 0.1). Build depth on dark from a surface lightness scale (roughly 15% / 20% / 25%), which stays legible in bright ambient light and costs no extra paint.

Build depth on dark surfaces with a lightness scale, not with colored box-shadow glows

impeccable's detector fires when a background's relative luminance is below 0.1 and the element carries a box-shadow whose color chroma is >= 30 with a blur radius greater than 4px — light spilling out of a component onto a near-black page. This is distinct from "Avoid Glow as an Affordance" (design-ibelick-no-glow), which is about glow standing in for a real interaction signal; here the glow is applied to everything, so it signals nothing and merely dates the design. On dark, elevation should come from a surface lightness scale (roughly 15% / 20% / 25%), which stays legible in bright ambient light and costs no extra paint.

## Bad — do not do this

`design-impeccable-dark-glow-bad`

```tsx
const GLOW = 'shadow-[0_0_24px_rgba(139,92,246,0.55)]';

const CARDS = [
  { title: 'Latency', value: '128 ms' },
  { title: 'Throughput', value: '4.2k/s' },
  { title: 'Error rate', value: '0.03%' },
];

export function ImpeccableDarkGlowBad() {
  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">Metrics panel (dark surface)</p>

      <div className="rounded-lg bg-zinc-950 p-4">
        <div className="grid grid-cols-3 gap-3">
          {CARDS.map((c) => (
            <div
              key={c.title}
              className={`rounded-lg bg-zinc-950 p-3 ring-1 ring-violet-500 ${GLOW}`}
            >
              <p className="text-xs font-semibold text-violet-400">{c.title}</p>
              <p className="mt-1 text-lg font-bold text-white">{c.value}</p>
            </div>
          ))}
        </div>
      </div>

      <p className="text-xs text-error">
        Near-black surface plus a saturated 24px box-shadow bloom. Detector: background luminance below
        0.1 together with a box-shadow whose chroma is {'≥'} 30 and blur {'>'} 4px. The glow separates
        nothing — every card carries it, so it reads as decoration, not hierarchy.
      </p>
    </div>
  );
}
```

## Good — do this

`design-impeccable-dark-glow-good`

```tsx
const CARDS = [
  { title: 'Latency', value: '128 ms', surface: 'bg-zinc-900' },
  { title: 'Throughput', value: '4.2k/s', surface: 'bg-zinc-800' },
  { title: 'Error rate', value: '0.03%', surface: 'bg-zinc-700' },
];

export function ImpeccableDarkGlowGood() {
  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">Metrics panel (dark surface)</p>

      <div className="rounded-lg bg-zinc-950 p-4">
        <div className="grid grid-cols-3 gap-3">
          {CARDS.map((c) => (
            <div key={c.title} className={`rounded-lg ${c.surface} p-3`}>
              <p className="text-xs font-medium text-zinc-400">{c.title}</p>
              <p className="mt-1 text-lg font-bold text-white">{c.value}</p>
            </div>
          ))}
        </div>
        <p className="mt-3 text-xs text-zinc-400">
          Elevation comes from lightness: 15% / 20% / 25% surfaces on a near-black base.
        </p>
      </div>

      <p className="text-xs text-success">
        Depth on dark comes from a surface lightness scale, not from light spilling out of an element.
        No shadows, no chroma in the elevation — background luminance stays low without any glow.
      </p>
    </div>
  );
}
```

## References

- [impeccable.style](https://impeccable.style/)
- [MDN: box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-shadow)