skills.rest
Deibler
DeiblerCOMMUNITY
Explore all skills by this author →
GitHub

figure-ground-cues

Applies visual cues like shadow, scrim, and contrast to control figure-ground perception in interfaces.

8|3|Updated May 3, 2026
Search Tags:#design tokens#ui design#modal#visual hierarchy#shadow#elevation#figure-ground
One-click install
npx skills add https://github.com/Deibler/universal-design-principles --skill figure-ground-cues-deibler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figure-ground-cues
Source: https://github.com/Deibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/figure-ground-cues
Command: npx skills add https://github.com/Deibler/universal-design-principles --skill figure-ground-cues-deibler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designers often struggle to make the right element stand forward in layered interfaces — modals blur into pages, hover states go unnoticed, and chrome competes with content. This Skill provides a systematic catalog of figure-ground cues and calibration guidance so every element's visual priority matches its actual importance. ## Core Features & Use Cases - Cue catalog with strength ratings: Covers shadow/elevation, scrim, scale, contrast, saturation, opacity, blur, texture, borders, and z-axis layering, with notes on relative perceptual strength. - Calibration and combination guidance: Explains how cues compound, when to combine them for strong separation (modals, focus states) versus subtle emphasis (hover states), and how to avoid theatrical over-application. - Elevation system reference: Includes a references/ file with a starter 6-level shadow token scale, dark-mode variants, and per-component application patterns (cards, FABs, drawers, modals, toasts). - Use Case: When building a modal dialog, apply the worked example combining a 50% scrim, 16px-blur shadow, and high-contrast surface so users unambiguously perceive the modal as figure and the page as ground. ## Quick Start Ask the agent to design the figure-ground treatment for a modal dialog or card hover state using appropriate visual cues.

Frequently Asked Questions about figure-ground-cues

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a modal dialog stand out from the page behind it?▼

Combine multiple figure-ground cues: a 40-60% opacity scrim over the page, a prominent drop shadow (around 16px blur) under the modal, and a high-contrast modal background. Combining cues produces clearer separation than any single cue alone.

What visual cues create figure-ground separation in UI design?▼

The main cues are shadow/elevation, scrim overlays, scale, contrast and saturation, opacity, sharpness versus blur, texture, borders, and z-axis layering. Shadow is the strongest single cue in modern UI; the others are often combined with it.

How many elevation levels should a design system have?▼

Five to seven levels is usually enough for consistent application. A starter scale uses levels 0, 1, 2, 4, 8, and 16, mapped to surfaces, cards, hover states, dropdowns, drawers, and modals respectively.

Does shadow-based elevation work in dark mode?▼

Dark mode requires adjusted values: elevated elements use slightly lighter backgrounds, reduced shadow opacity, and sometimes subtle borders or inner glows. Define separate dark-mode shadow tokens rather than inverting light-mode values.

Why does my card design look theatrical or cartoonish?▼

Over-combining cues at high intensity — thick borders plus heavy shadows plus glow plus scale animation — causes this. Reduce to one or two cues, such as a subtle shadow and slight border on hover, matched to the element's actual importance.

When should I use a scrim versus a drop shadow?▼

Use a scrim when the ground itself must visibly recede, as with modals and lightboxes where full focus is needed. Use shadow alone for moderate elevation like cards and dropdowns where the background should remain fully present.

Related Skills

Explore More Design & Creative Skills→
HDeiblerHDeibler
6

figure-ground-cues

Apply calibrated figure-ground visual cues to layered UI surfaces.

Community
Intermediate
efekrbasefekrbas
41

dark-mode

Design dark-mode interfaces with semantic color tokens and accessible contrast.

Community
Intermediate
Owl-ListenerOwl-Listener
2.5k

law-of-figure-ground

Apply figure-ground principles to establish foreground and background hierarchy in UI layers.

Community
Basic
aifactory-teamaifactory-team
3

kist-brand-guidelines

Consolidate KIST brand colors, typography, and spacing into CSS variables.

Official
Advanced