Get started
All interface styles
Surface & material
Pro

Tonal elevation

A systematic elevation model where raised surfaces get lighter and more tinted rather than merely shadowed, with state as a measurable overlay.

Also called: material design, material you, md3, tonal surface

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Tonal elevation changes

Surface material, borders, shape, depth, component layout, states, and motion.

Tonal elevation specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Tonal elevation applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: Three elevation levels are visible at once: page, card, and the raised action. Each is a lighter tint of the same hue rather than the same colour with a bigger shadow.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Tonal elevation to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Surfaces at visibly different tints of the same hue, stepping with height
  • Consistent large radii on containers, pill radii on actions
  • State shown as a translucent overlay of the accent over the surface
  • Ripple-style feedback originating from the point of contact
  • Icons and labels on a strict 4px alignment grid

Best for

  • Applications with many nested surfaces — sheets, dialogs, menus over cards
  • Cross-platform products that want one predictable interaction language
  • Teams that need a rule for every state rather than a judgment call

Avoid when

  • You want a distinctive brand surface; this reads as a platform, not as you
  • The interface is a single flat marketing page with no elevation to model
  • The kit's primary is very light or very dark — the tint ramp loses its steps

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • State overlays change contrast. Recompute text contrast on the hover, focus and pressed composites, not just the resting surface.
  • Elevation alone is not a status signal; a raised card and a selected card must differ by more than height.
  • Ripple is motion feedback and must have a non-motion equivalent under `prefers-reduced-motion` — an instant overlay step works.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Google's Material system — tonal surfaces, defined elevation tiers, bold contained components, ripple feedback. Systematic and app-native.

Implementation bundle

Pro

What an agent needs in order to actually build Tonal elevation on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • tonal-elevation
  • state-layer
  • surface-tint
  • pill-action
  • systematic