Week 16 · Aesthetic Movements

Card · 2dp

Dialog · 24dp

The Weight That Isn't There

Two rectangles, same shape, same corner. One rests two dp above the page. The other rests twenty-four. You can feel which is which before you've read a single number.

Predict

A card rests at 2dp. A dialog rests at 24dp. Whose shadow falls longer, and softer?

Experience

The Elevation Stage

Three sheets sit at fixed heights — an app bar, a menu, a drawer. Drag your own sheet's elevation through all three and watch two things happen at once.

Its own shadow grows: both the key light's tight, dark edge and the ambient light's wide, soft one lengthen together, because both scale from the same dp. And the moment your number crosses a neighbour's, the render order flips — not because anything moved, but because elevation is the only thing a sheet ever needs to state to know what it can occlude.

The Elevation Stage

Drag the slider — your sheet's dp is the only thing that ever moves

App bar · 4dp

Menu · 8dp

Drawer · 16dp

Your sheet · 2dp

Behind: App bar, Menu, Drawer.

Reads as: Card · raised button
Key shadow: 1px / 2px blur
Ambient shadow: 2px / 3px blur
Shadow reach: 5px; ambient offset + blur

Your sheet's elevation2dp

Flush with the pageDialog height

The dual-shadow numbers shown here are a continuous model fit to the dossier's discrete elevation → shadow table (2, 4, 6, 8, 16 and 24dp) rather than the table itself — disclosed in full, anchor by anchor, in this build's DESIGN.md. Z-index is never set independently in this component; it is always the sheet's own dp, plus one.

Concept

Three Rules and a Ruler

The material metaphor is not "paper with a drop shadow." It is three physical rules, held at the same time, on every surface, without exception.

Paper is 1dp thick. Every sheet has a physical edge and is opaque to whatever sits below it — nothing can be a surface and also be weightless. Ink has no thickness. Content is printed on the material; it does not itself cast a shadow, move independently, or claim an elevation of its own. Motion is physical. A sheet behaves like a solid object: it can rise, it can slide, but it cannot pass through another sheet, and two sheets cannot occupy the same elevation over the same footprint without the system contradicting itself.

None of that is enforceable by taste alone, which is why Material also ships an 8dp baseline grid (4dp for type and icons) as infrastructure, not decoration: 16dp screen margins, a 72dp keyline beside icons and avatars, list rows of 48–72dp, and a 48×48dp minimum touch target with at least 8dp of separation between targets — numbers a build system can lint, which is the entire point of choosing a base unit at all.

Unlike real paper, our digital material expands and reforms intelligently.

Matías Duarte, Design Notes podcast transcript

The rules bend on purpose — Duarte's own framing above is the license for a sheet to split, heal or resize in ways real paper cannot — but only inside a fixed physics. This quote is drawn from a transcript the dossier itself flags as not independently re-fetched this pass; it is graded secondary, not verified, in Sources below.

Deconstruction

Break a Rule, One at a Time

The metaphor only holds together because all three rules run at once. Switch one off on the scene below and watch exactly one thing fail — never the other two.

Break a Rule

Each switch removes one physical guarantee — watch what fails

Card · 8dp

Label · 16dp

All three rules holding: the card has an edge, the ink is quiet, and nothing shares another sheet's elevation.

Rules broken: 0 of 3
Metaphor: Intact

Real World

One Card, Three Eras

The card below never changes its elevation — it rests at 2dp in 2014, in 2018, and in 2021. Only what it believes about shape, colour and type changes underneath it.

Material 1 (2014) shipped the physics: Android 5.0 Lollipop computed real shadows from a component's dp, ripple feedback from the exact touch point, and a spec Google published with developer APIs on day one. Material Theming (2018) exposed shape, colour and type as parameters instead of a fixed look — Duarte's own description, relayed through a secondary account, calls it "a design system for making design systems." Material You (2021, shipped with Android 12 and the Pixel 6) went further still: colour is extracted live from the user's own wallpaper, and the HCT colour space guarantees legibility by construction — a 40-tone gap between two colours guarantees a contrast ratio of at least 3.0; a 50-tone gap, at least 4.5.

Order #482

Shipped to your door

Era

Material 1Material You

Material 1 — 2014 — elevation ships as a number; cards rest at 2dp, everywhere, by rule

Solved Google's fragmentation overnight, with tooling, not a PDF. Cost: a spec rigid enough to be adoptable was rigid enough to homogenise.

The three card mock-ups' exact colours and corner radii are this build's own stylistic reconstruction of each era's language, not sourced pixel values — the dossier does not supply a reference card design for any of the three eras. The elevation dp values, launch years and HCT contrast ratios are the dossier's own verified figures.

Experiment

Off the Grid

Rhythm is enforceable in a way taste is not — which is the whole argument for an 8dp base unit. Drag the gap below off a multiple of eight and watch the rows drift out of registration with their own ruler.

The 8dp Grid

Drag the gap, or flip the snap on and try to miss

Row 1

Row 2

Row 3

Row 4

On grid: No
Drift: -3dp; from the nearest 8dp line

Row gap13dp

TightLoose

Challenge

Fix the Stack

A menu drawn opening on top of a card, assigned a lower elevation than the card underneath it — a contradiction between what the eye sees and what the numbers say. Reassign both until they agree, checked pairwise, not by feel.

Challenge · Fix the Stack

Open

The Menu is drawn opening on top of the Card, but it is assigned a lower elevation. Reassign Card and Menu so every overlapping pair renders in the order it is drawn.

Page content · 0dp

Card · 8dp

Menu · 4dp

Card elevation

Menu elevation

Stack consistent: No

Still wrong: Menu (4dp) must sit above Card (8dp) in elevation, since it renders above it on screen.

Insight

Elevation is not decoration; it is the z-order the user is allowed to believe.

A z-index is free — anything can claim to be "in front" with one more digit than its neighbour, and nothing stops two components from disagreeing about which digit that should be. What elevation buys, when every shadow traces back to one number per surface, is a stack that cannot lie to itself: the thing that is actually on top is the thing with the higher number, always, because the render has no other way to compute it. The shadow was never the point. Agreeing on the order was.

Mental model

Whenever a screen stacks more than one surface,

look for whether every surface's render order comes from one number, or from whichever CSS rule happened to load last,

because a shadow you styled by hand is a guess about priority; a shadow computed from an elevation token is a claim you can check.

TomorrowOpen a settings menu or a dropdown in any app you use and try to name its elevation before you close it. If you cannot — if the shadow looks the same as everything else on the screen — that is the app telling you it never assigned one.

End of experience

← Back to the constellation

The Weight That Isn't There

The Elevation Stage

Three Rules and a Ruler

Break a Rule, One at a Time

One Card, Three Eras

Off the Grid

Fix the Stack

Where this idea goes next

The Weight That Isn't There

The Elevation Stage

Three Rules and a Ruler

Break a Rule, One at a Time

One Card, Three Eras

Off the Grid

Fix the Stack