Skip to main content brightness_auto motion_photos_off palette download more_vert
toc

Material Web 3.0

Styles

The visual language of Material 3 Expressive as tokens you can use: color, type, shape, elevation, icons, motion and spacing.

10 pages · View as Markdown

  • Color

    Color creates meaning and communicates hierarchy, state, and brand.

  • Dynamic color

    Dynamic color builds a full color scheme, light and dark, from a seed color.

  • Typography

    Typography helps make writing legible and beautiful.

  • Shape

    Shape can direct attention, communicate state, and express brand.

  • Elevation

    Elevation is the distance between two surfaces on the z-axis.

  • Icons

    md-gb-icon shows a Material Symbols icon.

  • Material Symbols

    md-gb-icon axes: optical size, weight, fill and grade.

  • Motion

    Motion makes a UI expressive and easy to follow: springs for physics, easing and duration tokens, and transition patterns.

  • Transitions

    Transition patterns connect elements and views, and skeleton loaders hold space while content loads.

  • Spacing

    Spacing is the distance around and between elements.

Install Material Web 3.0

Your browser did not offer to install the docs as an app. Install them from the browser instead:

Close Send feedback
Bug Documentation Idea

Opens a new GitHub issue for material-components/material-web in a new tab, with this filled in.

Cancel Open issue