Why I Still Force Myself to Design Everything in Black & White First

Colour hides bad hierarchy. It is the most flattering concealer in the toolkit, and it will happily paper over a layout that has no structural opinion whatsoever.

So the first pass is always greyscale. Not because it is virtuous, but because it is diagnostic.

Contrast Is a Structure Problem, Not a Palette Problem

If a screen only reads once the brand pink lands on the primary button, the button was never the visual anchor. The pink was.

• Weight before hue: Size, spacing and typographic weight should already be telling the reader where to look.
• Three greys, maximum: If you need five levels of grey to separate the content, the content has too many levels.
• Test at 30%: Squint, or drop the whole board to 30% opacity. The order you notice things in is the order the user will.

If your interface stops working in greyscale, colour was not decorating the hierarchy. It was the hierarchy.

Where Colour Comes Back In

Once the layout survives greyscale, colour becomes the cheapest tool you own — because now it only has to do one job instead of three.

Semantic colour goes in first: state, severity, and destructive actions. Brand colour goes in last, and always in fewer places than the client expects.

Try it on the next screen you are stuck on. It usually takes about four minutes to find out what was actually wrong.