You can do a full demo of Material Design 3 on the web


Google announced Material You at I/O 2021, and it’s since come to the vast majority of its Android apps. On the web, Gmail is the main example, but you can also demo Material Design 3 on

Google considers be an “online manual” and it has been redesigned this month with even more Material Design 3 elements to demonstrate its full potential:

For this refresh, the team showcased new features and components while demonstrating how Material 3 principles can be extended to solve product-specific use cases, in our case a rich library of information to help designers and developers create beautiful products.

Instead of wallpaper-derived Dynamic Color, uses Content-Based Dynamic Color which leverages a “set of images ranging from style, color, and subject.”

Dynamic color transformation creates a holistic visual experience by making the site reflect the content a reader consumes and exemplifies Material Design 3’s new color system that uses a unique palette of tones and compliments.

You can see it in action when you check out the hardware component guidelines articles.

Meanwhile, gained a dark theme (bottom left switch) with this redesign, and Google made keyframes respond to different modes. The site also eschews green, given red-green color blindness, and uses blue (Do) or red (Don’t) instead.

In terms of site navigation, Google “has combined the new Navigation Rail with the Navigation Drawer using a simple hover interaction that gives readers an ergonomic feel of speed and quickly provides an overview of site content with relative ease. ease”. Tabs and tables of contents are the other main forms of navigation.

Of particular note is’s approach to cookie-shaped chips:

Applying these shapes to bullet points at such a small scale and randomly rotating them with some simple CSS gives a sense of understated iconoclasm, pushing visual expression for expression, rather than strict utility.

On the front of the motion, there is a full screen page, vertical slide, and side transitions. In the same way:

Icons react by increasing in weight when hovering and decreasing in weight when pressed; this again gives a sense of magical energy and usefulness. For navigation components, icons fill when an item is selected.

FTC: We use revenue-generating automatic affiliate links. After.

Check out 9to5Google on YouTube for more info:


Comments are closed.