Colors · Learn · Guide

Color as an emphasis dial

The same component can speak at four volumes. Material calls the loudest fill md.sys.color.primary; container and surface roles step the emphasis down without inventing new colors.

Same component, four volumes · lightdark

Hero actionStandard actionQuiet actionSilent action

primary

Hero

The one action you want taken.

secondary-container

Standard

The workhorse — most components live here.

surface-container-highest

Quiet

Recessive fills — inputs, tracks, wells.

primary (text only)

Silent

No fill at all — text buttons, plain rows.

Three rules of thumb

One hero

One primary-filled element per view. If everything is loud, nothing is.

Containers carry the room

Most UI is containers and surfaces. Accents are the exception, not the default.

Tertiary is optional

A deliberate contrast moment — skip it entirely if you don’t need it.

How loud each step renders is decided by the palettes — change them in Customize.

Do / Don’t

✓ Do

Reserve primary for the one action that should win the scan. Let containers and surfaces carry most of the interface.

× Don’t

Fill every action with primary or add tertiary merely for variety. Color hierarchy works through restraint.