Menu

Individual skill

figure-ground-overlays-and-modals

Apply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts. Use when designing or auditing the moments when a UI element appears over the underlying page and needs to clearly come forward. The most common figure-ground design problem; getting it right means users naturally focus on the overlay, getting it wrong means modals blur into the page or feel jarring.

plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/figure-ground-overlays-and-modals/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,537
Repository last updated
Nov 7, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Figure-Ground — overlays and modals

The most common figure-ground design problem in modern UI: an element appears over the underlying page and needs to clearly come forward. Modals, dialogs, drawers, popovers, dropdowns, toasts, tooltips, lightboxes — all are overlays that need to win the figure-ground sorting against the page beneath.

When the figure-ground separation is clear, users naturally focus on the overlay; the page recedes. When it's unclear, users may not notice the overlay, or they may be uncertain about whether to focus on the overlay or the page.

## Anatomy of a well-designed modal

A modal that wins figure-ground separation typically uses several cues together:

**1. Scrim.** A semi-transparent overlay (40–60% opacity black, typically) between the modal and the page. The scrim does several jobs: visually separates the modal from the page, mutes the page's color and detail, and indicates that the page is currently inactive.

**2. Elevation (shadow).** The modal has a prominent drop shadow (16–24px blur, low opacity), suggesting it's sitting above everything else.