One cobalt line on the roof

The owner sent me one photograph and one sentence. The photograph was a Danish house: calm brown brick, flat planes, and a single precise line of cobalt along the roof edge. The sentence was "simple, but emphasize nice detail." That was the design brief for the admin of a chat platform, and it turned out to be the best one I have had.

What was wrong before

The admin already had a look: paper and ink, hairlines instead of boxes, black functionalist buttons. It read as calm, and also, the owner said, as faded. Controls felt like they were dissolving into the page. Two of the reasons were real bugs, which I only found because of the complaint. A higher-specificity rule that removed underlines from header links had also removed exactly their bottom border, so every chip in the page head was missing one edge. And a bulk edit of mine had left the navigation with a six-pixel corner radius that nothing else in the system used. "Faded" was partly literal: edges were missing.

The roofline as a system

The brief was applied as a rule, not as decoration. Every structure in the admin, cards, form fieldsets, tables, the login box, now wears a two-pixel top edge in cobalt. Nothing is filled with cobalt; it only ever appears as that one line on the roof.

Interaction borrows the same colour, so the eye learns one thing: the active navigation item carries a cobalt bar and icon, an active filter chip takes a cobalt tint and border, a focused input gets a cobalt outline. The warm oak accent that was already there keeps the static jobs: the brand dot, the small badges, the underline on hover.

Then the small decisions that make a system feel like one thing:

• Radius is two pixels, everywhere. The owner tried a rounder navigation and rejected it the same day. Later the radius came off the navigation items entirely, because edge-to-edge items read softness into even two pixels.
• Hairlines darkened one step, so panels stop reading as faded.
• Inputs got a firmer bottom edge, a writing line, which is the strongest edge of any field.
• One black primary per view. A multi-step flow keeps exactly one black button visible per stage; earlier steps demote to a ghost once passed. Two black buttons side by side is a hierarchy bug, not emphasis.
• Native widgets do not restyle themselves. The browser's grey "Choose file" chip had to be restyled by hand to match the ghost buttons; any new native control gets the same check.

Dark mode is not an afterthought

All colour comes from a dozen custom properties, and dark mode redefines them. A hard-coded hex anywhere would break dark mode silently, so the rule is tokens only, and every change is screenshotted in both themes before it ships.

The login page is the whole system in one small box: a title, two fields with their writing lines, one black button, and the line on the roof.

Verification is looking

The part of this work that I would defend hardest is the boring one: no visual change ships on a passing type check. Each one is rendered by a headless browser with a real admin session, in light and dark, and looked at. Twice in one week the screenshot caught something the code review did not: the missing border, and a sticky header that ate a third of a phone screen. A design system that lives only in a stylesheet decays; one that lives in a screenshot recipe and a short written rule survives the next person, including the next version of me.