Styles
Styles
The same component, the same colour roles, three materials. The picker below applies to the whole site.
This picker belongs to the site. The documentation describes the three materials; it does not require a picker inside apps.
Expressive
The reference. Tint, expressive shapes, pills, spring motion.
PeloteTonalChip
Plaza
Wii U and 3DS: soft glossy plastic, fine stripes, gel on the primary action, rounded type.
PelotePlaza
Chrome
Y2K: polished metal, frosted glass, halos, LEDs, sharp corners and uppercase Michroma.
PeloteY2K
The recipe
| Expressive | Plaza | Chrome | |
|---|---|---|---|
| Background | surface | repeating-linear-gradient(surface, sc 1px/7px) | surface + halo pc / tc |
| Action | primary / on-primary | --gel / primary | gel primary + shadow-chrome |
| Container | sc no shadow | scl + gloss-hi + shadow-plaza | sc 82 % + blur + outline-v |
| Typography | Google Sans Flex | M PLUS Rounded 1c 700/800 | Michroma in capitals |
| Icons | Material Symbols Rounded | Rounded | Sharp |