Getting started

Start developing and designing with Material – one of the world’s leading open-source design systems. This guide includes a quick intro and links to top videos, tutorials, tools, and more.


Material Design basics

Material Design is a design system created by Google. It provides a way for designers and developers to create UIs that are usable and beautiful....

Read More

Material Design is a design system created by Google. It provides a way for designers and developers to create UIs that are usable and beautiful.

This site provides instructions on how to implement Material for your UI, including design and developer guidance, open-source components, icons, fonts, and tools.

Design guidelines

These guidelines describe the look, interactions, and customization possibilities for UIs that use Material — including how to apply color, typography, shape, and layout. They also show how each component is structured: its usage, types, anatomy, placement, behavior, and customization.

Open-source components

Material components are interactive UI elements that make up the UI — including buttons, app bars, and navigation menus. Setup instructions and customization details for each component are available for Android, iOS, the web, and Flutter.

Introductory videos

These videos introduce Material, how to design across platforms, and the research behind the system. Learn what Material Design is all about — in 74...

Read More

These videos introduce Material, how to design across platforms, and the research behind the system.

Overview of Material

Learn what Material Design is all about — in 74 seconds

Building with Material across platforms

A workflow to streamline your cross-platform development

Material Research

How UX researchers tested and refined Material Design performance

Component tutorials

These codelabs take you step-by-step: from setting up your development environment to styling components. Platform Tutorial Web Material components for Web 101 iOS Material components...

Read More

These codelabs take you step-by-step: from setting up your development environment to styling components.

Tools

Material Design has custom tools to help you visualize your UI and share that work with collaborators.

Read More

Material Design has custom tools to help you visualize your UI and share that work with collaborators.

  • Color tool
    Create, share, and apply color palettes to your UI, and measure color accessibility
  • Color palette generator
    Generate an accessible Material palette for any color you input
  • Shape customization tool
    Generate shapes for different components with adjustable ranges
  • Theme Editor (works with Sketch)
    Mock up UIs in Material and apply color, shape, and typography changes globally
  • Gallery
    Share design work with your team and get feedback

Color palettes and the color tool

Design assets

Get fonts, UI symbols, and sticker sheets:

Read More

Get fonts, UI symbols, and sticker sheets:

What is theming?

Material Theming is customizing your app to reflect your product’s brand. It means changing Material’s default colors, typography, and shapes to create a custom design...

Read More

Material Theming is customizing your app to reflect your product’s brand.

It means changing Material’s default colors, typography, and shapes to create a custom design for your app or product.

Learn how Google created its theme.

Customize Material Components

Available for Android, iOS, the web, and Flutter

Examples

Get inspired by stories of creating a custom Material app from scratch. See how Material can be used in retail with Shrine, a lifestyle and...

Read More