Google · est. 2014

Material Design

One seed color. Tonal surfaces. Motion you can touch — a design language where the system makes every choice.

A card at rest

Elevation 1 — hover lifts it. Every state is defined.

Switch

Elevation Means Something

Shadows are statements, not decoration. Press a step to lift it — then flip the whole set from shadow (2014) to tonal (M3).

The Seed Color Machine

Material You's doctrine as a toy: one color in, a whole accessible scheme out. Pick a seed — every role regenerates.

Pick a seed

primaryhsl(256, 34%, 40%)
on-primary#ffffff
primary-containerhsl(256, 34%, 90%)
surfacehsl(256, 30%, 98%)
surface-containerhsl(256, 20%, 94%)
outlinehsl(256, 8%, 47%)

Notification preferences

The same sheet, re-seeded. Everything below is generated roles.

Mentions
New followers
Weekly digest
AllPriorityNone
Save

Content Rides in Cards

Imagery is cargo, not wallpaper — cropped to the card's shape, never behind text.

Weekend on the coast

Weekend on the coast

Media lives inside the card's slot — cropped to the shape, never behind text.

ExploreShare
The monstera report

The monstera report

Contained, rounded, captioned — imagery as cargo, not wallpaper.

ReadShare
Grain bowl, documented

Grain bowl, documented

Photos ride in cards the way text rides on surfaces.

CookShare

Every System Speaks a Different Language

Live products, not screenshots — tap through.

A system is a promise kept.

Every token exact, every state defined, every contrast pair passing — that's the whole aesthetic.

Demo switch on