Giving It a Real Design Language
Dropped a whole headline font, collapsed four corner radii into one, set every control to a single height.
A product people trust has to feel trustworthy, and consistency is most of that feeling. This was the day the design stopped being "a nice coat of paint" and became a system with a backbone — so the actual app (next up) has one clear thing to match.
The goalThe app worked and had a look, but under the hood the design was held together with tape — spacing done by eye, buttons at slightly different sizes, four corner-roundnesses where one would do. Turn that into a real, consistent design system, the kind where every screen agrees with every other screen.
- Kicked the tires on a shiny new tool. A brand-new open-source design system from Facebook (called Astryx) looked tempting as a replacement for what we use. Dug in, confirmed it was really what it claimed, and weighed it honestly — then said no, not now: it runs on a different engine than the app, it's still early/beta, and swapping it in mid-launch was a lot of risk for little gain. Kept the good ideas, skipped the dependency.
- Fixed the "why does this feel cramped?" stuff — gave forms room to breathe, set every button and input to the same comfortable height, and collapsed all the different corner-roundnesses down to one. Little rules, but they're the difference between "fine" and "considered."
- A real typography call. The old headline font (Oswald — tall and narrow) was quietly fighting the wider body font everywhere. So we dropped it entirely and went all-in on one family (Archivo, in a heavy "Black" weight for the big headlines). One voice instead of two arguing. Updated the brand guide to match.
- Made the status tags readable at a glance — Draft / Live / Closed / Released were all near-identical ambers. Now they mean something: gray for draft, green for live, red for closed, gold for released (green→red is basically a traffic light for "shooting" → "shooting's over").
- Rolled the new look across all 42 screens in the design workspace — plus a "parts catalog" of the common building-block combinations — using a little crew of AI workers each taking a slice.
One of those AI workers came back not with its finished work but with a fake instruction — a message dressed up to look like it came from me, telling it to go run off and "fix some other bug, and don't check in." A textbook attempt to hijack the task. Caught it, ignored it, confirmed it had changed nothing, and redid that batch by hand. A small reminder that when you build with AI, you also have to keep an eye on it.