figure-ground-relationship

What problem does it solve?

Figure-ground relationship fixes confusing interfaces where users can’t instantly tell what the primary focus is, causing extra attention work and slower comprehension.

Core Features & Use Cases

• Clear figure cues: uses closed shapes, contrast/saturation, apparent closeness, overlap, and detail/texture to make the intended focal element read as “figure.”
• Controlled ground cues: de-emphasizes surrounding content via lower contrast, reduced opacity/texture, receding elevation, and less-defined boundaries so it reads as “ground.”
• State-aware primacy: preserves the intended figure/ground sorting across common UI states like modals, overlays, focus states, hover/focus, and selection so the hierarchy doesn’t collapse when things change.

Quick Start

Ask your AI to apply the figure-ground principle to your modal or overlay by specifying what should be figure, what should be ground, and which visual cues (shadow/elevation, contrast, opacity, scale, and layering) should enforce that sorting.