← All UI styles
Material Tonal
Large radii and tonal surfaces — color, not elevation, says what sits on top.
TintedsystemAndroid-first productsConsumer appsExpressive product UI
Construction · Tinted
Surfaces are a wash of the accent over the page — no border, no shadow, only a shift in tone saying where one group ends.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Material Tonal style. Surfaces are tinted with the accent hue instead of lifted by shadow, and corners are large enough to read as pills at small sizes. Buttons are tonal fills, not
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- tonal surfaces
- very large corner radius
- tinted with the accent hue
- no elevation shadows
What this style refuses
- sharp corners
- heavy drop shadows
- pure neutral greys
- outlined primary buttons
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#fef7ff#141218Surface
#f4ecf6#211f26Border
#ded1e2#3a353fText
#1d1b1e#e6e0e9Muted text
#5a5460#a49dafAccent
#6750a4#cfbcffOn accent
#ffffff#22124fShape and type
Radius12 / 20 / 28 px
Bordernone
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale11 · 12 · 14 · 16 · 22 · 32 px
Weights400 / 500 / 500
Line height1.45
Tracking0.005em
Spacing4px grid · regular
Surfacetinted
Accentfilled
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 16.26:1 light, 14.35:1 dark; secondary text 6.95:1 and 7.1:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Material Tonal
*
* Large radii and tonal surfaces — color, not elevation, says what sits on top.
*
* One complete product screen, rendered from the token object below —