Material & depth · 2012–2016
Paper Realism
Interfaces that simulate paper: white or off-white surfaces with cast shadows, layered elevation, and the warm grain of real stationery.
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(93% 0.016 82) - --fg
oklch(20% 0.012 55) - --muted
oklch(48% 0.014 65) - --surface
oklch(99.5% 0.006 85) - --surface-2
oklch(97% 0.009 83) - --border
oklch(83% 0.014 78) - --accent
oklch(48% 0.14 28) - --accent-fg
oklch(99% 0 0) - --focus
oklch(48% 0.14 28)
| Token | Value |
|---|---|
| --font-body | 'Lato', 'Helvetica Neue', sans-serif |
| --font-display | 'Lato', 'Helvetica Neue', sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 2px |
| --radius-sm | 2px |
| --shadow | 0 1px 3px oklch(22% 0.012 55 / 0.14), 0 3px 8px oklch(22% 0.012 55 / 0.09) |
| --shadow-lg | 0 8px 32px oklch(22% 0.012 55 / 0.2), 0 2px 8px oklch(22% 0.012 55 / 0.1) |
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
:root {
--bg: oklch(93% 0.016 82);
--fg: oklch(20% 0.012 55);
--muted: oklch(48% 0.014 65);
--surface: oklch(99.5% 0.006 85);
--surface-2: oklch(97% 0.009 83);
--border: oklch(83% 0.014 78);
--accent: oklch(48% 0.14 28);
--accent-fg: oklch(99% 0 0);
--focus: oklch(48% 0.14 28);
--font-body: 'Lato', 'Helvetica Neue', sans-serif;
--font-display: 'Lato', 'Helvetica Neue', sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 2px;
--radius-sm: 2px;
--shadow: 0 1px 3px oklch(22% 0.012 55 / 0.14), 0 3px 8px oklch(22% 0.012 55 / 0.09);
--shadow-lg: 0 8px 32px oklch(22% 0.012 55 / 0.2), 0 2px 8px oklch(22% 0.012 55 / 0.1);
}Where it came from
Origin: Google Material Design 1 (2014) and earlier productivity app aesthetics
Paper metaphors appeared in iOS Notes and Google Keep before Google formalised the language in Material Design 1 (2014). The idea was that digital surfaces behave like stacked paper sheets: each card sits at an elevation, shadows indicate how high it floats, and ink stays on the sheet it belongs to. Later versions of Material — especially Material 3, with its tonal surfaces — moved away from the literal paper metaphor, but the language remains influential in document and productivity tools.
How to spot it
- White or off-white surfaces with soft cast shadows
- Elevation model — cards stack like physical sheets, taller shadows for higher cards
- Subtle paper grain or dot-grid texture on backgrounds
- Dark ink on light ground — no reverse or tinted text
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Familiar and immediately legible | Light-mode only — no natural dark-mode interpretation |
| Clear, intuitive elevation hierarchy | Can feel soft or less premium than harder-edged alternatives |
| Warm, human quality from the stationery metaphor | Stacked shadows compound and become heavy at deep elevations |
In the wild
- Google Material Design 1 documentation site
- Google Keep card grid
- Productivity and note-taking apps of the early 2010s
Use it when
Note-taking, document, and productivity apps that benefit from a legible light-mode card hierarchy.