Grey by Default: Colour as State

Most dashboards use colour to look like dashboards. Blue for one chart, purple for another, a gradient on the card. Then a real alert arrives and has to compete with all of it.

For Warburg AI, we went the other way. The company builds trading models that keep learning after deployment, and we designed its identity, product UI and data-visualisation system around one rule: an achromatic interface where green appears only when something is live. The platform is in development, so this is about the design rather than results.

Colour with one job

If there's only one colour on the screen, you never have to learn what it means. You see it from across the room. A grey screen with a little green says "these things are live" before you've read a word.

The discipline is in what you give up. Green can't be used for a button, a brand moment or a nice chart. Each exception weakens the signal a bit. Everything else has to be done by weight, size and position, which is good for a design anyway.

Never colour alone

There's a catch, and it's an important one. WCAG 1.4.1 says colour can't be the only visual way of conveying information. Some people won't see the green at all. So status also needs a word or a shape. The Warburg cards pair every state with a legend, such as "Live" and "Staged", and the pins differ in form as well as tone.

Dark is a choice, not a default

Dark interfaces feel technical, but they aren't automatically better. Nielsen Norman Group's review of the research found that light mode usually gives better performance for users with normal vision, while some people with conditions such as cataracts may do better in dark mode. So choose it for a reason. Here, the reason is that a dark grey ground makes one colour glow. You should also offer both if people will use the product all day.

If you do need a wider system, Material 3's colour roles show how to define colour by job and derive light and dark themes from one set of roles.

Type does the rest

With colour off the table, type carries the hierarchy. We used 2 type families: Geist for people, and Geist Mono for machine output. Geist began as a monospace version before the family grew, and the pairing lets you tell at a glance whether something is a sentence or a value.

Try it

Take a dashboard you know and turn everything grey. Then bring back colour one meaning at a time, and stop as soon as you can't say what a colour means. You'll probably stop earlier than you'd expect.

It's the same principle as using fewer words on a slide. And a product's character can do this kind of work too, as in an app that tells you to stop. You can see the full system in the case study, and read about how we work on our UI/UX design page.