Borders & Shadows
Surface treatments for hierarchy, affordance, emphasis and focused interactive content.
Border treatments
Use borders as the default low-elevation boundary between content surfaces.
Example surface treatment
Example surface treatment
Example surface treatment
Example surface treatment
Elevation scale
Raise only the surfaces that need visual priority or interaction feedback.
Example surface treatment
Example surface treatment
Example surface treatment
Radius scale
Use consistent corner radii to create a cohesive product language.
Focus ring
Every interactive surface needs a visible, token-driven keyboard focus state.
Interactive surfaces
Hover elevation and selection states make cards feel deliberately actionable.
Glass surface
Use translucency sparingly for overlays, featured panels and layered media.
A translucent surface layered on a colored background.
Inset and outline
Inset surfaces clarify nested information without using strong elevation.
Nested inside a muted track.
A focused surface with a colored boundary.
Status surfaces
Tinted surfaces can give status information more room than a compact badge.
12 of 12 integration checks completed successfully.
Two projects need an owner before this week ends.
Your billing method could not be verified.