Platform-native · 2021 – present
Material You
Dynamic colour: the entire UI palette is derived from a single seed colour — your wallpaper, your brand, you — generating tonal roles across surfaces, containers, and accents.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(98% 0.008 302) - --fg
oklch(14% 0.05 302) - --muted
oklch(46% 0.05 302) - --surface
oklch(98% 0.008 302) - --surface-2
oklch(94% 0.015 302) - --border
oklch(82% 0.025 302) - --accent
oklch(46% 0.2 302) - --accent-fg
oklch(99% 0 0) - --focus
oklch(46% 0.2 302)
| Token | Value |
|---|---|
| --font-body | 'DM Sans', system-ui, sans-serif |
| --font-display | 'DM Sans', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 28px |
| --radius-sm | 12px |
| --shadow | 0 1px 3px oklch(14% 0.05 302 / 0.08), 0 4px 12px oklch(14% 0.05 302 / 0.06) |
| --shadow-lg | 0 4px 8px oklch(14% 0.05 302 / 0.08), 0 16px 40px oklch(14% 0.05 302 / 0.12) |
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');
:root {
--bg: oklch(98% 0.008 302);
--fg: oklch(14% 0.05 302);
--muted: oklch(46% 0.05 302);
--surface: oklch(98% 0.008 302);
--surface-2: oklch(94% 0.015 302);
--border: oklch(82% 0.025 302);
--accent: oklch(46% 0.2 302);
--accent-fg: oklch(99% 0 0);
--focus: oklch(46% 0.2 302);
--font-body: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 28px;
--radius-sm: 12px;
--shadow: 0 1px 3px oklch(14% 0.05 302 / 0.08), 0 4px 12px oklch(14% 0.05 302 / 0.06);
--shadow-lg: 0 4px 8px oklch(14% 0.05 302 / 0.08), 0 16px 40px oklch(14% 0.05 302 / 0.12);
}Where it came from
Origin: Google Material Design 3, Android 12
Google introduced Material You at Google I/O 2021 as the third major revision of Material Design. Its defining innovation was dynamic colour: Android 12 extracts a seed colour from the wallpaper and generates a full tonal palette across surface, container, on-surface, and accent roles. Every system app and supported third-party app uses the same derived palette, making the phone feel personally configured.
How to spot it
- Seed-colour derived tonal palette — surface, container, accent, on roles
- Large rounded shapes (28px and above)
- Expressive motion with emphasis on spring physics
- Adaptive layouts across phone, tablet, and foldable
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Personalisation at the system level without user effort | Seed-colour-derived palettes can produce unexpected combinations |
| Clear tonal hierarchy between surface roles | Large radii and generous spacing reduce information density |
| Extensive open-source tooling — Material Theme Builder | Looks generic without strong illustration or brand moments |
In the wild
- Android 12 and 13 system apps — Settings, Phone, Messages
- Google Workspace apps on Android
- Google Pixel launcher home screen
Use it when
Android apps, or web products that want Google-native familiarity with dynamic colour.