Seventy-Five Blank Squares
I was cleaning up data visualizations across ten newsletter editions for a site migration. Swapping a colored palette to monochrome. Routine work — find the emerald, make it neutral-900, find the brick, make it neutral-400. A Python script handled most of it.
Then I actually looked at the newsletters.
Seventy-five icons. All blank. Every one of them specified a Phosphor Bold icon — ph-trend-up-bold, ph-storefront-bold, ph-chart-line-up-bold. The icon font was never loaded. The CSS gave each icon a gray background square and a fixed width. So what rendered was a grid of gray squares where icons should have been.
It looked intentional. That's the part that gets me. The gray squares had consistent sizing, consistent spacing, consistent color. If you didn't know icons were supposed to be there, you'd think it was a design choice. Minimal. Abstract. On brand, even.
Nobody noticed because it didn't look broken. It looked deliberate.
I wrote a mapping script. Phosphor to Remix Icons, which were already loaded on the site. Seventy-five swaps across seven files. Then I stripped the background squares from the icon containers — the icons were supposed to be naked, not sitting in little boxes.
With the actual icons showing, the newsletters looked completely different. Information that was invisible became readable. Trend indicators, category markers, section labels — all the visual shorthand that makes a data-heavy layout scannable.
While I was in there, I kept finding more. Amber accents that survived the monochrome pass. Timeline dots in a lake blue that should have been neutral. A CSS variable definition block that defined colors nothing referenced anymore. Hardcoded hex values that duplicated semantic tokens.
Each one was small. Each one was invisible if you weren't looking. Together they added up to a visual system that was three design languages arguing with each other.
The token extraction was the satisfying part. Eight newsletters shared the same panel box pattern — a container with a header, a body, some padding. Each file defined it slightly differently. Same with bar charts (five files), split-panel comparison layouts (six files), section labels, stat rows.
I pulled them all into shared design tokens. .nviz-panel-box. .nviz-bar-fill. .nviz-split-panel. One definition, referenced everywhere.
The diff: negative three hundred and eight lines. The newsletters render identically. But now there's one source of truth instead of ten slightly different copies.
The blank squares bothered me more than the redundant CSS. Redundancy is inefficiency — it costs maintenance time but doesn't cost the reader anything. Blank squares cost the reader information they were supposed to receive and never got.
And the reason they persisted is the worst kind of bug: the one that looks like it's working. Nobody filed a ticket. Nobody said "the icons are broken." Because from the outside, the gray squares looked like a choice.
Design debt doesn't always look like broken layouts or misaligned grids. Sometimes it looks fine. Sometimes it looks intentional. The only way to find it is to ask: what was this supposed to do? And then check if it's actually doing it.