---
title: "Dark interfaces without the mud"
description: "Three surface steps, one accent, and borders that do the work: the rules we follow for dark UI."
canonical: "https://goodtogrid.com/blog/dark-without-mud"
updated: "2026-09-08"
---

# Dark interfaces without the mud

> Three surface steps, one accent, and borders that do the work: the rules we follow for dark UI.

URL: https://goodtogrid.com/blog/dark-without-mud · Published: 2026-09-08 · Topic: Design · 4 min read · By goodtogrid studio

## Key takeaways

- Keep dark backgrounds near black, never pure black, and allow three surface steps at most.
- Every text grey passes 4.5:1 against its surface; a caption that fails gets lighter, not smaller.
- On dark, 1px hairlines separate better than shadows; save elevation for what actually floats.
- Keep one accent for one job, showing what’s live, selected or next, and test at night with the brightness down.

## How dark mode goes wrong
Dark interfaces fail in a predictable way. Everything drifts toward the same grey, borders disappear, text gets dimmed to be easy on the eyes and ends up unreadable, and the whole page turns to mud.

## Three surfaces, no more
Our backgrounds sit near black, never pure black, so borders and shadows still have somewhere to go. On top of that we allow three surface steps at most: the page, the card, and the thing inside the card.

Text comes in three greys, and each one passes 4.5:1 against the surface it sits on. If a caption can’t pass, it gets lighter, not smaller.

> “If two greys need a label to tell them apart, one of them should go.”
>
> — From our dark UI checklist

## Borders do the work, colour is a signal
On dark, a 1px hairline separates more clearly than a shadow, so we lean on hairlines and dashed rules and save elevation for things that actually float. And we keep one accent for one job: showing what’s live, selected or next. When everything glows, nothing does.

Then we test on a real screen, at night, with the brightness turned down. That’s where dark interfaces actually get used.

Keywords: dark mode, dark UI design, interface design, colour contrast, accessible design

## Related notes

- [Designing on an 8px grid](https://goodtogrid.com/blog/eight-pixel-grid) — Design · 5 min read. Why every size on this site is a multiple of eight, and what that one rule buys a client at handover.
- [From slide deck to website](https://goodtogrid.com/blog/deck-to-website) — Studio · 6 min read. What we learned turning a preschool’s curriculum presentation into a site parents actually browse.
- [Prototype in the medium you ship](https://goodtogrid.com/blog/prototype-in-the-medium) — Engineering · 5 min read. When a static mockup hides too much, and what we build in code before we build for real.

More notes: [all notes](https://goodtogrid.com/blog) · [RSS](https://goodtogrid.com/rss.xml)