Elevation

Last Updated: Dec 10, 2025

Ink's elevation scale defines the depth and layering of surfaces—from flat backgrounds to highly elevated, interactive elements. Use these values to create visual hierarchy, focus, and separation between components.

Figma Library↗

Usage

Name	Usage	Example
flat	Indicates zero elevation. no shadow is applied. Used for static or foundational surfaces.	Flat tiles, background-level surfaces
small	Subtle shadow that lifts components slightly above the base layer.	Lightweight UI like tooltips or small floating elements
medium	Creates moderate separation from the background. Ideal for core interactive surfaces.	Cards, floating tiles, secondary surfaces
large	Strongest elevation. Emphasizes prominence and pulls the element to the forefront.	Modals, top-level UI, attention-heavy elements

Examples

Best Practices

Use elevation consistently across similar components and layouts.
Choose elevation based on hierarchy — higher importance → higher elevation.
Ensure shadows remain subtle; elevation should support, not distract.

Don't

Mix multiple elevation levels within the same component group without purpose.
Use large elevation for routine surfaces.
Override shadow tokens with custom values.

Accessibility

Visibility & Focus

Shadows must not be the only indicator of focus or interactivity.
Pair elevation with clear focus rings and contrast-compliant borders.

Depth & Comprehension

Elevation should reinforce grouping and flow.
Avoid sudden or drastic elevation jumps that disrupt visual order.

Q&A

Q. Does elevation change between light and dark mode?

A. No. Elevation tokens remain constant; shadow rendering adapts automatically per theme.

Q. What's the difference between elevation levels?

A. Placeholder: Each level represents increasing visual prominence and separation from the base surface.

Q. Can elevation be combined with borders?

A. Yes. Borders can reinforce separation when shadows alone are insufficient.

Q. Should elevation replace focus indicators?

A. Never. Focus must always be signaled by a visible outline.

Elevation

On This Page