---
url: /styles.md
description: >-
  Styles are the visual aspects of a UI that give it a distinct look and feel.
  They can be customized by changing your Material theme.
---

# Styles

Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.

![Styles](/assets/f92492c6-mrod6ghd-styles-overview.CL0sQNJt.webp)

::: tip Do
[![](/assets/401f7e0b-mo9u3hpk-styles1.CL3ORsva.webp)](styles/color/system/overview.md)

Color is used to express style and communicate meaning. With dynamic color, Material puts personal color preferences and individual needs at the forefront of systematic color application.
:::

::: tip Do
[![](/assets/1a3eb572-mo9u8q0l-styles2.D0uKLcaz.webp)](styles/elevation/overview.md)

Elevation is the relative distance between two surfaces along the z-axis. All surfaces and components have elevation values.
:::

::: tip Do
[![](/assets/51ef88ee-mo9ua6er-styles3.BivYpT1Z.webp)](styles/icons/overview.md)

Icons can be used to represent common actions. Material Symbols are a set of variable icon fonts created at seven weights across three different styles.
:::

::: tip Do
[![](/assets/189fe8ce-mo9ubo2f-styles4.-gJjFB99.webp)](styles/motion/overview/how-it-works.md)

Use motion to make a UI expressive and easy to use. Material transitions help guide users as they navigate an app.
:::

::: tip Do
[![](/assets/02113c0e-mo9udf2i-styles5.B612WE5H.webp)](styles/shape/overview-principles.md)

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.
:::

::: tip Do
[![](/assets/69607648-mo9uj0sj-styles6.DIguaLeC.webp)](styles/typography/overview.md)

Use typography to make writing legible and beautiful. Material's default type scale includes contrasting and flexible styles to support a wide range of use cases.
:::