Figure Ground Cues

Figure-Ground — visual cues

The figure-ground sorting that the user's perception performs depends on specific visual cues. As a designer, you choose which cues to use and how strongly to apply them, calibrated to the desired separation between figure and ground.

The major cues, with notes on their relative strength:

Shadow / elevation

Strongest single cue for figure-ground in modern UI. A drop shadow under an element makes it appear closer to the viewer (figure), with the rest of the layout receding. Multiple levels of shadow create multiple levels of elevation.

Common implementations:

• Cards with subtle shadow (2–4px blur) for moderate elevation.
• Floating action buttons with stronger shadow (8–12px blur) for higher elevation.
• Modals with very prominent shadow + scrim for highest elevation.

Material Design formalized this into a system of "elevation levels" (0, 1, 2, 4, 8, 16, 24 dp) each with a specific shadow recipe. The system makes consistent figure-ground separation across a product easier to maintain.

Scrim / overlay

A semi-transparent layer over the ground that makes the ground visibly recede. Most commonly used with modals: the modal sits above the scrim, the scrim sits above the page.

Calibration:

• Light scrim (10–20% opacity) for soft separation.
• Medium scrim (40–60% opacity) for clear modal-style separation.
• Dark scrim (70%+ opacity) for full focus on the figure (image lightboxes, video players).

Scale

Larger elements tend to come forward as figure, especially when they're surrounded by smaller elements. A hero card among supporting cards reads as figure through scale.

But this can flip: a tiny element on a vast background can also read as figure (the small floating action button on a large canvas is figure despite its size). The cue depends on context.

Contrast and saturation

Higher contrast and more saturated colors come forward; lower contrast and muted colors recede. The active workspace at full saturation; inactive workspaces with muted colors.

This cue is subtle — it's often used in combination with others rather than alone. But it's powerful for distinguishing active from inactive content.

Opacity

Semi-transparent elements recede; fully opaque elements come forward. Reducing the opacity of inactive content (50–70% opacity) is a quick way to send it to the background.

Be careful not to reduce opacity to the point of illegibility. Even "ground" content should usually remain readable.

Sharpness vs. blur

Sharp, in-focus elements come forward; blurred elements recede. iOS uses background blur extensively — a modal's background is blurred, signaling that it's behind the modal.

Blur is a strong cue but expensive computationally. Use deliberately, not casually.

Texture and detail

More detailed elements come forward; smoother, less detailed elements recede. A photographic background with text overlaid feels different than a solid background with text — the texture of the photo competes with the text for figure status.

Outlines and borders

A clear, visible border around an element helps it read as a closed figure. Borderless elements may merge into their background.

But heavy borders can feel "heavy" or dated. Modern design often prefers shadow over border for figure separation.

Position in z-axis (layering)

Elements layered on top of others occlude them, which is a strong figure cue. The element on top is figure; the element behind is ground.

Implementation in CSS: z-index controls the layering order. In design systems: explicit layering levels (cards, popovers, modals, toasts each at their own z-axis level).

Combining cues

The cues compound. A modal that uses shadow AND scrim AND opacity reduction on the background is more clearly figure than a modal using only one of these.

For elements that need to clearly come forward (modals, popovers, focus states), combine cues. For elements that should subtly come forward (hover states, mild emphasis), use a single cue or a combination of subtle ones.

Avoid combining too many cues at high intensity — the result can feel theatrical. Match the cue strength to the actual importance of the figure.

Worked examples

A modal with full figure-ground

A modal opens. Cues applied:

• Scrim: 50% opacity black overlay between modal and page.
• Modal elevation: prominent shadow (16px blur, 40% opacity).
• Modal background: pure white (sharp contrast against the dark scrim).
• Page beneath: visible through scrim but clearly receding.

The user's perception is unambiguous: the modal is figure, the page is ground. Attention naturally goes to the modal.