domains / families / design / law-of-figure-ground

law-of-figure-ground

separate

Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.

When to use

• designing modals
• designing overlays
• designing depth
• establishing foreground and background layers
• controlling figure-ground relationships
• defining surface stacks
• validating scrims
• managing elevation and shadow

When not to use

• emphasising one element among peers

Skill page

Source