A clear foreground tells people where to act.
A dialog opens, but it uses the same tone and depth as the page behind it. The two layers compete. Dim the page and lift the dialog with contrast, and the active layer becomes clear. The content did not change. Its place in the scene did.
Origin
Edgar Rubin's work on figure and ground appeared in Danish in 1915 and in German in 1921. His reversible vase shows how the same border can belong to a vase or to two faces, depending on which area becomes the figure.
Give the active layer enough contrast from the surface behind it. Color, spacing, borders, and shadow can work together to establish depth.
When a modal is open, make the page behind it look inactive and behave inactive. Visual hierarchy and interaction should tell the same story.
Do not rely on shadow alone. In flat or high-contrast themes, a border or surface change may be the clearer way to separate figure from ground.
Check hover, focus, selected, and disabled states. Each state should remain distinguishable from the surrounding surface.
Digital systems
A Modal Dialog
A modal uses a distinct surface while the page behind it is dimmed. The contrast marks the dialog as the active figure and the page as temporary background.
Physical signals
A Theater Spotlight
A spotlight separates the performer from a darker stage. The performer becomes the figure, while the rest of the scene recedes into the ground.
When controls, cards, or dialogs blend into their background, people may miss what is active. Competing layers can also make the page feel visually noisy.
Use surface contrast, spacing, borders, or shadow to distinguish the active figure. Keep the background quieter, and make its interaction state match its visual role.