At the start of September we finished a redesign that touched nearly every page on the site, and here is the part that will sound backwards: we started with the pages that looked fine.

The pages that embarrass you are easy to spot and easy to justify. The dangerous ones are the pages that look finished. So we sorted every page not by how much traffic it draws or how dated it looks, but by how old its code was, and we started at the top of that list. The oldest pages were not the ugliest. They were the ones still built on patterns the rest of the site had already outgrown, which meant every fix we made there was a fix we would otherwise have to make five more times somewhere else.

That sort produced three tiers. The first held the true holdouts, the events calendar and the jobs board, both rebuilt from the studs. The second was a design pass over the middle-aged pages: sources, datasets, the library, the support form, sign-in. The third was polish for the pages we had already fussed over, where the job was to catch the small things that survive precisely because everything around them looks done.

The defect that was invisible in the light

The most instructive bug could not be seen in the theme we designed in.

The site wears three themes: a light one, a dark one, and a warm reading one for long sessions. A row of primary buttons had its text color written as plain white. In the light theme those buttons sit on a deep blue, and white on deep blue is a clean, obvious read. In the dark theme the same accent lightens to a friendly sky blue, and white text on sky blue clears roughly two and a half to one, when the guideline for body text asks for four and a half. The button was crisp in the theme we stared at all day and quietly failing in the theme many readers use at night.

The repair was one idea, applied nine times. White is the answer to the question "what." We replaced it with the answer to a better question, "what for": the text that sits on the accent. The site already had a token for that, a color defined once and told to change with the theme, so it renders white in the light theme, near-black in the dark one, and cream in the reading one. Swap the value for the role and the button reads in all three, because the role knows something the value never did, which is that there is more than one room.

The same mistake, wearing a layout

Once you have named that mistake you start seeing it everywhere, and it was not confined to color.

On a phone, a control labeled Views and Tags sat along the left edge with its text set vertically to save horizontal space. It read fine. It also covered part of the article beside it, because vertical text is tall, and a tall label laid over a list covers the list. The label was doing its job in the abstract and failing it in the specific. On small screens it now shrinks to a compact chip, two letters and an arrow, and the full words come back only when there is width to spend on them.

The same mistake, wearing a position

The source filter opened a menu anchored to its own button. On a wide screen the button sits near the right edge, so the menu unfolded tidily to the left of it. On a phone, the moment a Clear button appeared and nudged the filter button inward, the menu still measured itself from the button, and now it hung off the left side of the screen. Readers got a column of numbers with no labels, because the labels were the half that fell away. We re-anchored the menu to the screen rather than to the button. A menu should know where the window is, not only where it was opened from.

The three defects share one structure. Each was a value that had learned exactly one context and was certain that context was the whole world: the white knew only the light theme, the vertical label knew only the desktop, and the menu knew only the wide screen. None of them was wrong where it was born, and all of them were wrong somewhere a reader went.

The unglamorous majority

The rest of the overhaul was smaller, and added together it probably mattered more than any single story above. The filter chips grew until a thumb can land on one without aiming. A shared empty state replaced a scattering of one-off "nothing here" messages that had each drifted their own way. Status colors that had been typed as raw hex became named tokens, so a warning is the same yellow on every page and can be changed in one place instead of forty. Animations learned to hold still for readers whose system asks for less motion.

We wrote almost no new components. The good ones already existed. Most of the work was noticing where a page had quietly reinvented something the design system already offered, and deleting the reinvention.

The rule underneath

If there is one rule buried in all of this, it is the title. A color is a role, not a value. So is a position, and so is a label. The instant you write down the value instead of the role, you have made a promise that only holds in the room you were standing in when you wrote it. Most of this redesign was not drawing anything new. It was walking into the other rooms, the dark theme, the small screen, the narrow layout, and checking whether the promises still held.

They mostly did not. Now they do. The next time we add a theme or a breakpoint, the pages that already speak in roles will follow us there without being asked, and the ones that still speak in values will announce themselves the moment the room changes. That list is shorter than it was before the redesign.