Digital era · 2014–present
Material Design
A design language built on the metaphor of paper and ink: surfaces have real elevation and cast real shadows; colour and motion convey meaning.
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(97% 0.004 240) - --fg
oklch(13% 0.008 260) - --muted
oklch(48% 0.008 260) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.004 240) - --border
oklch(90% 0.003 240) - --accent
oklch(44% 0.2 278) - --accent-fg
oklch(99% 0 0) - --focus
oklch(44% 0.2 278)
| Token | Value |
|---|---|
| --font-body | 'Roboto', system-ui, sans-serif |
| --font-display | 'Roboto', system-ui, sans-serif |
| --font-mono | 'Roboto Mono', ui-monospace, monospace |
| --radius | 4px |
| --radius-sm | 4px |
| --shadow | 0 1px 3px oklch(0% 0 0 / 0.12), 0 1px 2px oklch(0% 0 0 / 0.08) |
| --shadow-lg | 0 6px 12px oklch(0% 0 0 / 0.15), 0 3px 6px oklch(0% 0 0 / 0.1) |
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
:root {
--bg: oklch(97% 0.004 240);
--fg: oklch(13% 0.008 260);
--muted: oklch(48% 0.008 260);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.004 240);
--border: oklch(90% 0.003 240);
--accent: oklch(44% 0.2 278);
--accent-fg: oklch(99% 0 0);
--focus: oklch(44% 0.2 278);
--font-body: 'Roboto', system-ui, sans-serif;
--font-display: 'Roboto', system-ui, sans-serif;
--font-mono: 'Roboto Mono', ui-monospace, monospace;
--radius: 4px;
--radius-sm: 4px;
--shadow: 0 1px 3px oklch(0% 0 0 / 0.12), 0 1px 2px oklch(0% 0 0 / 0.08);
--shadow-lg: 0 6px 12px oklch(0% 0 0 / 0.15), 0 3px 6px oklch(0% 0 0 / 0.1);
}Where it came from
Origin: Google, Mountain View, USA — announced at Google I/O 2014
Google unveiled Material Design at I/O 2014 as a unified system for Android, Chrome and web apps. The core metaphor is physical: surfaces are paper sheets that can be stacked, split and stretched but not pass through each other. Material 2 (2018) added 'Material Theming' for per-brand customisation. Material 3 (2021, also called Material You) added dynamic colour extracted from the user's wallpaper and shifted to a more expressive, rounded visual language.
How to spot it
- Elevation model: surfaces at specific heights cast defined shadows
- Ripple ink animation on touch
- Tonal surface layers derived from a primary colour
- Roboto typeface and generous large-screen whitespace
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Deep, consistent design tokens for theming | Unmistakably 'Google' — hard to use for strong individual brand identities |
| Animation guidelines make motion feel principled, not arbitrary | Elevation depth model requires discipline to not over-use |
| Large component library for every platform | Material You's dynamic colour system is complex to implement on the web |
In the wild
- Google Inbox (2014)
- Android system UI
- Google Workspace apps
Use it when
Android apps, or web products that want depth, motion polish and a well-documented token system.