This Page Is Made of Material 3 Expressive
Welcome. This entire page is dressed in Material 3 Expressive — the 2025 flavor of Google’s design system that Android 16 wears proudly. Notice the enormous rounded corners, the tonal surfaces, and the springy little bounce every button does when you poke it.
The idea is simple: pick one seed color, then generate a whole tonal palette from it. Every surface, container, and text color is a token derived from that seed. Swap the seed and the whole app re-themes instantly — that is dynamic color.
To use this in your own web project, define CSS variables like primary, surface, and onSurface, then reference them everywhere. Never hardcode a hex value in a component; point it at a token instead. Now theming is one variable swap away.
Motion matters just as much as color. Expressive leans on spring easing — press an element and it scales down, release and it overshoots slightly before settling. Add a ripple on tap and suddenly a plain button feels alive.
Try it now: click any single word in this essay. It will underline itself in green and reveal a tiny definition card. Click anywhere else to dismiss it. Design vocabulary like elevation, ripple, and token all have curated notes waiting for you.
:root{
--primary:#7C5CFC;
--surface:#faf8ff;
--onSurface:#1a1626;
}
.button{ background:var(--primary); border-radius:24px; }