figure-ground-cues

What problem does it solve?

This Skill solves the problem of ambiguous visual hierarchy by helping you clearly separate figure (the focus) from ground (the supporting context) using calibrated visual cues.

Core Features & Use Cases

• Shadow / Elevation: Use depth cues (including consistent elevation levels) so elevated elements reliably read as the figure.
• Scrim / Overlay: Apply modal-style overlays to explicitly push background content into the ground and improve focus.
• Scale, Contrast, Saturation, and Opacity: Shape perceived prominence so active or key elements stand forward without relying on color alone.
• Sharpness vs. Blur and Texture Detail: Use focus/defocus and visual complexity to reinforce separation between foreground and background layers.
• Z-axis Layering and Borders: Ensure correct stacking order signals what is in front, and use borders sparingly when needed.

Use it for layered UI situations like cards, hover/focus states, drawers, modals, lightboxes, and active-vs-inactive workspace views where the product must reliably guide attention.

Quick Start

Ask an agent to apply figure-ground cues to your interface by selecting 1–2 cues at appropriate intensity, then describe which element should be figure and which should be ground.