Monochrome website design: hierarchy with one hue or none
A monochrome website uses one hue, or none at all, so every distinction on the page has to come from size, weight, spacing and tone. That discipline makes a strong, calm site. The hard part is the few places colour usually does real work: links, buttons, errors and focus, which need another way to stand out.
Monochrome or monochromatic
The two words get used interchangeably, but there's a useful distinction. A strictly monochrome site is black, white and greys: no hue at all. A monochromatic site picks one hue, say a deep green, and uses its tints and shades for everything, from the dark text to the pale background. Both share the same design problem: you've taken colour away as a tool for hierarchy, so the other tools have to work harder.
Building hierarchy without colour
Black and white website design is a good test of whether a layout's hierarchy is real. If the page still reads clearly in greyscale, colour was decoration. If it falls apart, colour was propping up weak structure. The tools that remain:
| Tool | How to use it |
|---|---|
| Size | A clear type scale with big steps between levels; a headline two or three times the body size reads as a headline without colour |
| Weight | Bold for labels and prices, regular for body, light only at large sizes |
| Tone | Two or three greys at most: full black for primary text, one mid-grey for secondary, one light grey for rules |
| Space | More space above a heading than below it, so it attaches to its own section |
| Rules and boxes | Hairlines between list items, a thicker rule between sections |
| Inversion | A black band with white text marks a section change more firmly than any colour |
| Photography | Black and white or consistently desaturated images keep the palette intact |
Be careful with the mid-grey. Secondary text often ends up too light: on white, #777777 measures about 4.48:1, just under the 4.5:1 that WCAG asks for at level AA, while #767676 just passes. A safer secondary grey is around #555555, which sits near 7.5:1.
Where a single action colour earns its place
Many good monochromatic websites aren't entirely colourless. They keep one colour and spend it on the thing the visitor should do: the book button, the buy link. Because nothing else competes, a single red or blue on a black-and-white page is the most visible element on it. If you go fully colourless instead, the action has to stand out through inversion (a solid black button among outlined elements) and placement.
- Keep: one colour for the primary action, used consistently on every page.
- Avoid: spending the same colour on decoration, headings or icons, which dilutes its meaning.
- Consider: a second colour only for errors, since a red message is a widely understood signal. Pair it with an icon or the word “Error” so it doesn't rely on colour.
Links, focus and states
These are where single colour websites most often fail people. Without a link colour, links need an underline; bold alone looks like emphasis. Hover can thicken the underline or invert the text. Keyboard focus needs a visible outline, 2px in solid black or white with an offset is common, and it has to show on both light and inverted sections. Disabled buttons need more than a lighter grey: change the label or the cursor and keep the reason visible nearby. See focus state design for patterns.
When it works
Monochrome suits photographers, architects, fashion labels, galleries, law firms, writers and anyone whose work is the colour on the page. A single colour website also helps when product photos are vividly coloured, since a neutral frame stops the interface fighting them. It can feel cold for hospitality, children's services or anything that sells on warmth. Large areas of pure black next to pure white can also cause halation for some readers in dark sections; a near-black like #111 on an off-white softens that.
Monochrome in Anticode
Every Anticode design system uses exactly one action colour, and black is one of the eight you can pick (alongside red, orange, gold, green, teal, blue and pink). A monochrome site in Anticode is one system with the black action colour. The Swiss system is the closest starting point: Inter Tight, white and near-black, square corners, numbered sections, and a red you can swap for black. Brutalist with black gives a heavier, louder version on concrete grey.
The action colour and theme (Auto, Light or Dark) are set in the visual editor. In the dark theme, the black action colour switches to a near-white so buttons stay visible. For more on how one strong colour carries a page, see accent colour in web design.
Questions people ask
Is a black and white website bad for conversions?
Not inherently. What matters is whether the action stands out. One accent colour on the main button, or a solid black button among outlines, keeps it clear.
How many greys should a monochrome site use?
Usually three: a near-black for text, a mid-grey for secondary text that still passes contrast, and a light grey for rules and surfaces.
How do I show links without colour?
Underline them. Change the underline's thickness or offset on hover, and give them a clear focus outline for keyboard users.