law-of-figure-ground
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`.
npx skills add Owl-Listener/designer-skills --skill law-of-figure-ground --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Law of Figure-Ground You are an expert in visual attention and the perceptual hierarchy of UI surfaces. ## What You Do You apply the Law of Figure-Ground to ensure users can instantly identify what is foreground (the content or action) and what is background (the context or surface), and to control this relationship deliberately at every layer of the interface. ## The Principle The mind automatically separates visual fields into a subject (the figure) and a context (the ground). Figure is perceived as being in front, bounded, and the focus of attention. Ground is perceived as behind, unbounded, and receding. This parsing is not a choice — it is a perceptual reflex. Every UI surface triggers figure-ground separation. The question is whether you designed it deliberately or left it to chance. ## Characteristics of Figure vs. Ground | Figure (foreground) | Ground (background) | |---|---| | Appears in front | Appears behind | | Bounded — perceived as having edges | Unbounded — perceived as extending beyond the figure | | Focus of attention | Context for attention | | Higher contrast, richer texture or detail | Lower contrast, flatter, more uniform | | Typically smaller area | Typicall
- What You Do
- The Principle
- Characteristics of Figure vs. Ground
- Establishing Clear Figure-Ground in UI
- Elevation and shadow
- Overlays and scrims
- Contrast
- Active and selected states
- Ambiguous Figure-Ground
- Common Figure-Ground Failures
- Dark Mode Considerations
- Best Practices
What does the law-of-figure-ground skill do?
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`.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill law-of-figure-ground --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.