# Styles

The visual language of Material Web 3.0: color, typography, shape, elevation, icons, motion and spacing, as tokens you can use.

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

- [Color](/material-web/3.0/styles/color/): Color creates meaning and communicates hierarchy, state, and brand.
- [Dynamic color](/material-web/3.0/styles/dynamic-color/): Dynamic color builds a full color scheme, light and dark, from a seed color.
- [Typography](/material-web/3.0/styles/typography/): Typography helps make writing legible and beautiful.
- [Shape](/material-web/3.0/styles/shape/): Shape can direct attention, communicate state, and express brand.
- [Elevation](/material-web/3.0/styles/elevation/): Elevation is the distance between two surfaces on the z-axis.
- [Icons](/material-web/3.0/styles/icons/): md-gb-icon shows a Material Symbols icon.
- [Material Symbols](/material-web/3.0/styles/material-symbols/): md-gb-icon axes: optical size, weight, fill and grade.
- [Motion](/material-web/3.0/styles/motion/): Motion makes a UI expressive and easy to follow: springs for physics, easing and duration tokens, and transition patterns.
- [Transitions](/material-web/3.0/styles/motion-transitions/): Transition patterns connect elements and views, and skeleton loaders hold space while content loads.
- [Spacing](/material-web/3.0/styles/spacing/): Spacing is the distance around and between elements.