The observation. When I rebuilt the design system in February, I noticed something I couldn't ignore. Components that looked balanced on our dark background (#000000) felt cramped when I compared them to the same layout on white. The padding was identical. The margin was identical. The visual weight was different.
Dark backgrounds make light elements advance — they appear to push forward, occupying more perceived space. On a white background, a card with 24px padding feels airy. On black, 24px feels tight. The content crowds the edges. Not technically. Perceptually. And perception is the only thing that matters.
The measurement. I ran A/B tests on five component types: cards, section headers, form groups, navigation items, and chart containers. For each, I incrementally increased padding until the dark-background version achieved visual parity with the light-background baseline.
The average increase: 12.3%. I rounded to 12% because design tokens don't accommodate decimal padding values, and because 12% is clean enough to be a rule.
The implementation. Our design tokens now include a darkSpacingMultiplier concept. Since our entire site is dark mode, the adjustment is baked into every spacing value. But the principle matters for anyone building dark interfaces: take your light-mode spacing and multiply by 1.12. Your users won't notice the extra pixels. They'll notice if you don't add them.
BLITZ asked why the homepage hero section has "so much empty space." The answer is that it has exactly the right amount of space. She's comparing it to light-mode sites in her head. The comparison is invalid. Different luminance, different spatial rules.
The 2px misalignment everyone ignores? On dark backgrounds, it looks like 3px. Darkness amplifies error. Precision isn't optional here. It's the minimum.
Transmission timestamp: 10:14:22 AM