---
title: "Surface steps"
description: "Surface steps are the few background levels a dark interface uses to show depth: page, card, and what sits inside the card. Why we stop at three."
canonical: "https://goodtogrid.com/glossary/surface-steps"
updated: "2026-10-02"
---

# Surface steps

> Surface steps are the few background levels a dark interface uses to show depth: page, card, and what sits inside the card. Why we stop at three.

URL: https://goodtogrid.com/glossary/surface-steps · Glossary · Updated: 2026-10-02

On a dark interface, depth comes from slightly lighter backgrounds rather than shadows. We allow three steps at most, so each one still means something.

- **Term:** Surface steps
- **Updated:** 2026-10-02

## What “Surface steps” means

The small, fixed set of background shades an interface uses to show layering, such as the page, a card on the page, and an element inside the card. In dark UI they replace most shadows.

## In practice

Dark interfaces fail when everything drifts toward the same grey and the page turns to mud. Fixed surface steps stop that drift.

Our backgrounds sit near black, never pure black. On top go three steps at most: the page, the card, and the thing inside the card. A 1px hairline does more to separate them than a shadow, so elevation is saved for things that actually float, such as menus and sheets.

We check the steps on a real screen, at night, with the brightness down, because that's where dark interfaces get used.

## Frequently asked questions

### Why not pure black for the page?

Pure black leaves nowhere darker for borders and shadows to go. A background near black keeps room for both.

### Why only three steps?

More than three and the greys get too close to tell apart. If two greys need a label to tell them apart, one of them should go.

### How does text stay readable on each step?

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

## Read next

- [Design system](https://goodtogrid.com/glossary/design-system) (Glossary) — The shared rules and components a product is built from, so new screens match the old ones.
- [UI/UX design](https://goodtogrid.com/services/ui-ux-design) (Service) — Research, flows, prototypes and design systems, from the people who build them.
- [Mobile app development](https://goodtogrid.com/services/mobile-app-development) (Service) — iOS and Android apps, from a prototype on a real phone to the store.
- [Dark interfaces without the mud](https://goodtogrid.com/blog/dark-without-mud) (Note) — Three surface steps, one accent, and borders that do the work: the rules we follow for dark UI.

[Start a project](https://goodtogrid.com/start-new-project#brief) · [All glossary](https://goodtogrid.com/glossary)