figure-ground-relationship

Figure-ground relationship in UI design is the visual sorting of elements where the intended focal element reads as figure and surrounding content reads as ground. It uses contrast, elevation, and scale cues to establish clear visual primacy.

To make a modal stand out, apply figure-ground cues like elevation and shadow for the modal, and reduce opacity or contrast on the background. This ensures the overlay reads as figure while the underlying interface recedes as ground.

Focus states disappear when figure-ground sorting collapses under interaction changes. Preserve visual primacy by reinforcing the focal element with stable contrast, saturation, and boundary cues so the hierarchy doesn't collapse during hover or selection states.

Design clear visual hierarchy in layered interfaces by assigning figure and ground roles, then reinforcing them with elevation, contrast, scale, and occlusion cues. De-emphasize ground layers using lower contrast and reduced opacity to maintain stable sorting.

Yes, the figure-ground approach works for hover and selection states by preserving state-aware primacy. It validates that the intended figure/ground sorting remains stable across common UI state changes, preventing the visual hierarchy from collapsing during interaction.