visual design
Figure-ground
What is the figure-ground principle?
Figure-ground is how our eyes distinguish what’s in front (the figure) from what’s behind (the ground). Interfaces rely on it - a dialog must stand out, not fade into the page.
Also known as: figure/ground, figure-ground relationship
Prefer to watch?
Watch the recap 0:38
The demo
A message panel sitting over a page. Switch the figure-ground cues on and off and watch the panel either dissolve into the background or snap clearly in front of it - the panel itself never changes.
Are you sure?
This will archive the project.
Switch to clear separation and watch the panel come forward.
What this demo shows (text version)
A confirmation panel ("Are you sure? This will archive the project.") sitting over a page of background content. With weak separation, the panel uses the same tone as the page with no backdrop, shadow or border, so it blends into the background and it's hard to tell it sits on top.
With clear separation, the background dims behind a scrim and the panel gains a lighter surface and a shadow, so the eye reads it immediately as the figure in front of the ground. The panel and its words are identical in both modes; only the separation cues - contrast, overlay and elevation - change. That is the figure-ground principle, and it's what makes layered interfaces legible.
Figure-ground is how our eyes distinguish what’s in front (the figure) from what’s behind (the ground), and interfaces use it constantly - a dialog must appear on top of the page, not blend into it. Give anything meant to come forward clear separation cues - contrast, a dimmed backdrop, or a shadow - so the layering is never ambiguous.
With weak separation the panel dissolved into the page and you couldn't tell what was on top of what; add a dimmed backdrop and a lift and it snapped forward as a clear figure. Same panel, same words - the difference is purely whether your eye can tell foreground from background.
The tools that create figure-ground are contrast, shadow, an overlay scrim and whitespace. A modal needs a dimmed backdrop so the page recedes; a card needs a surface tone or a hairline so it lifts off the canvas; a dropdown needs a shadow so it reads as floating above, not cut into. Flat designs that strip all of these can leave the eye genuinely unsure what's a layer and what's the page.
Ambiguity is occasionally a feature - clever logos play with figure-ground
but in a working interface it's a bug. If a visitor has to think about which element is in front, the separation has failed. It also underpins focus: the thing you want attended to should be the clearest figure on the screen.
Figure-ground is how your eyes distinguish the figure from the ground - try the demo to see how contrast and layering guide attention. This principle drives interface design: dialogs must stand out, not fade into the page - test it in the interactive example here.
Figure-ground is the visual principle that lets us separate elements from their context - and your interface must guide that separation clearly. Try the hands-on demo on this page to see how figure-ground affects your perception - it’s the only way to truly understand its impact on UX design.
Figure-ground tells us how users perceive depth and priority - and you can see it in action in the demo here. Designing for clear figure-ground means giving elements visual separation so users never question what’s front or back.
Figure-ground isn’t just about contrast - it’s about how users perceive layering, and you can test it live on this page using our interactive demo. Designing with figure-ground means giving elements clear separation cues so they don’t vanish into the background - try adjusting the demo to see how it changes perception.
Figure-ground helps you decide what’s the focus and what’s the background - and you can test it live in the demo here. Good design uses figure-ground cues so users never question which element should be interacted with first.