Surfaces
The z-axis of the system: which planes exist, how they stack, and how depth reads. The official system is flat material — no glass, no metal frame. Depth comes from solid surfaces and soft, warm shadows: an eggshell page, white cards resting on it, and overlays that float on a deeper shadow.
Two surfaces
Two surfaces, one ground. Cards and chrome share a single flat, solid surface — opaque fills resting on the eggshell page; only the overlay floats above it, carried by a deeper shadow.
The page itself. A flat eggshell plate that everything rests on. No pattern, no texture — just a warm, quiet ground. Backmost; never touched directly.
Chrome and content are the same solid white surface — opaque cards with a small, warm shadow, sitting directly on the page. The plane you actually work on. No blur, no transparency: what you see is the surface itself.
Modals, popovers, the mobile slide-in panel. The only surface that lifts off the base — just as solid and opaque, only raised by a bigger, softer shadow.
Chrome stays put
Chrome and content don't stack — they're side-by-side regions on the same page: appbar, sidebar, and the content area, each its own solid surface. Chrome holds still; content does the moving — chrome stays fixed while content scrolls within its own region; nothing scrolls behind the chrome. There's a hierarchy here too: appbar and sidebar carry the controls; breadcrumbs and helper text sit quieter inside them.
Chrome at the edge
Two ways to meet the viewport. The gutters between regions are just the page showing through; the only difference is whether the page wraps the outside too.
Shadows grow with elevation
Depth is shadow, plain and simple. Anything that sits on the page — the chrome and the content cards — casts a small, warm shadow. Surfaces that lift off it — modals, popovers, slide-in panels — cast a bigger, softer one. Every shadow carries a warm brown tint, so depth never goes cold or gray.
Mobile-first
Content is the constant priority; chrome is what flexes. On a phone the sidebar steps aside and the appbar drops to the bottom of the screen, putting search-first navigation right under your thumb. Cards run edge to edge, and the page ground stays warm and steady at every size.