Dev log

Dark-mode tokens that don't fall apart in a year

Dark mode is easy to ship and surprisingly hard to keep coherent. Here's the five-token rule I use at AllCars.cy that keeps new screens looking like the old ones, even after a year of small additions.

Every dark-mode UI looks great in version one. By month six, somebody adds a screen with a slightly different grey. By month nine, there's a yellow-ish accent on a feature card, and a separate red on an alert that doesn't quite agree with the red on a button. By the end of the year you have a moodboard, not a product.

I've redesigned the AllCars surface a few times. Each time the same drift happened. The fix wasn't talent or taste — it was constraints.

Five surfaces, one accent, end of conversation

That's the whole palette for backgrounds and cards. Five steps from the page itself up to the highest container. Anything that needs depth picks one of the five. Anything that doesn't fit one of the five gets reworked until it does. That alone kills 80% of the drift.

One accent — a lime green you've seen all over this site — for the things you should notice. One warning, one error. That's it. New screens don't get to invent colours. New developers don't have to guess. Designers stop debating greys.

Why this is in a car blog

Because the way AllCars looks is part of the trust. If the deal score badge wandered between five different greens depending on the screen, you'd subconsciously wonder which one to believe. Boring consistency in the UI is what lets the actual content — the listings, the prices, the score — be the thing you focus on.

Token-based design is unflashy and old, and one of the few decisions you don't regret a year later.