Plaza (Wii U / 3DS) and Chrome (Y2K) are not separate styles: they are variants of M3 Expressive. They start from the same components, the same colour roles and the same UX rules, and only change the material laid on top. They therefore work with Material You: wallpaper colours on Android 12+, a source colour chosen in settings, light or dark theme.
The golden rule
A variant defines no tint. It only reads M3 roles (primary, on-primary, secc, on-secc, scl, sc, surface, pc, tc, tertiary, outline-v…) and only adds:
- tint-free material tokens:
gloss-hi,gloss-edge,shade,shadow-plaza,shadow-chrome; color-mix(in oklab, <role>, white | black N%)blends for highlights and edges;- two font families (
rounded,chrome) and radii.
If a hard-coded colour appears in a variant, it is a bug: it will ignore the source colour and break the dark theme. The MaterialYou spec shows the three materials over four real source colours.
The console look comes from the source colour
- Wii U way: cyan source colour (Aqua #009ac7) + Plaza.
- 3DS way: red source colour (Flame #d12228) + Plaza, with the two-screen pattern.
- Y2K way: any source + Chrome; a blue or violet source gives the "2001 media player" effect.
- With Material You active, the source is the wallpaper: the variant follows.
Plaza: Wii U / 3DS
The interface as a soft, glossy plastic object. Calm, welcoming, a little playful.
| Element | Recipe from the roles |
|---|---|
| Background | horizontal stripes surface / sc, 1px every 7px |
| Bubble (button, panel, tile) | gloss-hi gradient over scl, outline-v outline, shadow-plaza |
| Primary action (gel) | primary gradient mixed with 45% white, white highlight on the top half, on-primary text |
| Secondary action | same gel over secc, on-secc text |
| Danger | same gel over error, on-error text |
| Field, track | scc recess (or schh) + shade inner shadow |
| Tile selection | 3px primary frame |
| Notification dot | tertiary / on-tertiary |
| Status | ok, warn, bad, fixed |
- Typography:
rounded(M PLUS Rounded 1c) at 700 and 800 for headings and buttons, 500 for body text. - Icons: Material Symbols Rounded, as in M3E.
- Motion:
--ease-springon switches and selection; on press the bubble sinks 1px and loses its shadow. - Shapes: M3E shapes sit in glossy tiles; the selected tile takes a
primaryframe. - 3DS pattern (
pz-dual): a top screen for reading (summary, key figure), a narrower bottom screen for touch (actions). Useful on mobile when a screen has one key figure and two or three actions. - Avoid: a gradient on text, stripes under long text, more than one
primarygel per area.
Chrome: Y2K
Polished metal, gel, LEDs. More technical and tense: naturally suited to technical tools (dashboards, admin consoles).
| Element | Recipe from the roles |
|---|---|
| Background | surface with pc halos (top right) and tc (bottom left) |
| Metal (buttons, bars, thumbs) | secc in four stops: +55% white, secc at 48%, +18% black at 52%, secc. on-secc text |
| Primary action (gel) | primary in four stops with a break at 50%, on-primary text |
| Panel | frosted glass: surface at 70% + blur, outline-v outline, gloss-edge rim |
| Acid accent | tertiary / on-tertiary, one touch per screen |
| LED, gauge | LED in ok / bad, segmented gauge in primary |
- Shapes: asymmetric corners (4px / 18px) for panels, fields and chips; buttons stay pills.
- Icons: Material Symbols Sharp (sharp angles).
.y2k .msswitches automatically. - Typography:
chrome(Michroma) in spaced capitals, only for headings, buttons, chips and bars. Body text stays in Google Sans Flex. - Avoid: chrome on large surfaces, Michroma in body text, a coloured LED with
primary(it would lie about the state with a green or red source).
What never changes
- The components, their anatomy and target sizes.
- The UX rules.
- The
ok,warn,badstatuses. - Contrast: the variant puts text on the same role as M3 (
on-primaryon theprimarygel,on-seccon theseccmetal), so Material You contrast is preserved. - The structure of the screen: the variant changes the material, it never redesigns the page.
The hot-switch test
Switching from Expressive to Plaza or Chrome while the app is running must not break a single screen: same hierarchy, same hit areas, same states, same labels, same spacing, same breakpoints. Only the material moves.
This is not a feature to ship, it is the test that tells whether the three materials still belong to the same design language. A screen that has to be redesigned for another material is a screen that let the material decide its structure, and therefore a component to fix — not a variant to adapt. If the three versions of one screen no longer resemble each other, they are no longer three materials but three products.
How to adopt it
- Keep generating roles from the source colour (material-color-utilities on the web,
ColorScheme.fromSeedorDynamicColorBuilderin Flutter). - Add a "Style" setting: Expressive, Plaza or Chrome, next to Theme and Colour. It applies
.plazaor.y2k(or the Flutter equivalent: a materialThemeExtension). - Migrate component by component: buttons and cards first, then fields and navigation.