Material Design 3
intermediateFree3 hoursGoogle
Visit original resource(opens in a new tab)Opens m3.material.io
This is the most complete public example of a real design system you can study for free, from color and type scales down to token naming and component anatomy. Read it to see how foundations, tokens, and components fit together before you build your own. Borrow the structure, not necessarily the visual style.
What you will learn
- How tokens, foundations, and components compose
- Anatomy and states of common components
Study first
How to study it
- Documentation is not for linear reading. Learn the mental model of the tool elsewhere first.
- Then use the docs as lookup while you build something real, answering specific questions as they arise.
- Keep it open in a tab during practice. It earns its value in application, not memorization.