Accessibility
Every component meets WCAG 2.1 Level AA. Color contrast ratios, keyboard navigation, and screen reader support are built in.
4.5:1
✓ Do
Use sufficient contrast ratios. M3 tokens ensure
on-color text is always readable.
1.8:1
✗ Don't
Don't place low-contrast text on similar-toned
backgrounds.
Interaction states
M3 defines four interaction states with standard opacity layers applied on top of content.
| State | Opacity | Trigger |
|---|---|---|
| Hover | 8% | Mouse pointer over element |
| Focus | 12% | Keyboard focus |
| Pressed | 12% | Touch / click |
| Dragged | 16% | Drag interaction |
Layout
M3 uses responsive breakpoints and layout grids to adapt interfaces to different screen widths.
| Name | Range | Columns | Margins |
|---|---|---|---|
| Compact | 0–599px | 4 | 16px |
| Medium | 600–839px | 12 | 24px |
| Expanded | 840–1199px | 12 | 24px |
| Large | 1200–1599px | 12 | 24px |
| Extra-large | 1600px+ | 12 | 24px |
Design tokens
Design tokens store design decisions as reusable values. M3 has three levels:
palette
Reference
Raw values (ref.palette.primary40)
tune
System
Semantic roles (sys.color.primary)
widgets
Component
Scoped values (comp.button.color)
Content design
Write clear, concise UI text. Use sentence case. Avoid jargon. Lead with the most important information.
Save
changes?
✓ Do
Short, action-oriented, clear.
Are
you sure you want to save the changes you have made?
✗ Don't
Verbose, redundant phrasing.