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

Tonal elevation specimen

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.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

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