---
name: Material Design 3
slug: material-design-3
url: "https://dontmakeitugly.com/resources/material-design-3"
website: "https://m3.material.io"
github: "https://github.com/material-components/material-web"
docs: "https://m3.material.io/foundations"
type: design-system
categories:
  - design-systems
tags:
  - design-system
  - google
  - guidelines
  - colour
  - motion
  - components
  - android
frameworks:
  - agnostic
pricing: free
license: Apache-2.0 (code)
openSource: true
agentFriendly: good
agentAccessMethods:
  - documentation
  - github
  - public_web
difficulty: intermediate
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Material Design 3

Google's design system, documented in exhaustive, agent-readable detail.

- Type: Design system
- Categories: Design Systems
- Pricing: Free · License: Apache-2.0 (code)
- Open source: yes
- Works with: Framework agnostic, Web Components

## What it is

Material Design 3 (Material You) is Google's open design system covering colour, typography, elevation, motion, layout and every standard component, with guidance on when and how to use each. Code implementations exist for Android, Flutter and the web.

## Why it's here

You probably don't want your product to look like Material. You absolutely want to read how it reasons about colour roles, elevation and motion. The docs are a masterclass in explaining design decisions.

## Best for

- learning design-system thinking
- colour roles
- motion guidelines
- Android apps

## Links

- Website: https://m3.material.io
- Docs: https://m3.material.io/foundations
- GitHub: https://github.com/material-components/material-web

## Can my agent use this?

Yes. The guidelines are public and well-structured. Link specific pages ("follow Material's guidance on elevation") rather than the whole system.

Agent friendliness: Good. Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Access methods: Docs, GitHub, Public website.

## Prompt to hand your agent

```text
Use Material Design 3 as a design and implementation reference for this project.

What it is: Google's design system, documented in exhaustive, agent-readable detail.

Website: https://m3.material.io
Documentation: https://m3.material.io/foundations
GitHub: https://github.com/material-components/material-web

Use it specifically for:
- learning design-system thinking
- colour roles
- motion guidelines
- Android apps

How you can access it: Docs, GitHub, Public website.
Works with: Framework agnostic.
License: Apache-2.0 (code). Respect it.

Study the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource.
```

## Related

- [Apple Human Interface Guidelines](https://dontmakeitugly.com/resources/apple-hig.md): Apple's guidance on designing for iOS, macOS, watchOS and visionOS.
- [Vercel Geist](https://dontmakeitugly.com/resources/geist-design-system.md): Vercel's design system: the reference for the modern developer-tool look.
- [DESIGN.md Specification](https://dontmakeitugly.com/resources/design-md-spec.md): Google Labs' open format for describing a visual identity to a coding agent.
- [designmd.supply](https://dontmakeitugly.com/resources/designmd-supply.md): Pre-generated DESIGN.md style guides for the world's best-known brands, MIT licensed.

## In collections

- [Design systems every agent should know](https://dontmakeitugly.com/collections/design-systems-to-study.md)

Material Design 3 is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.