Colors
General Concepts
Here are helpful-to-know words you'll see in the names of color roles:
Your main color tokens, ordered by hierarchy. Primary is your brand, secondary and tertiary fill supporting roles.
A role used for backgrounds and large, low-emphasis areas of the screen.
Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.
Roles used as a fill color for foreground elements like buttons. They should not be used for text or icons.
Roles ending with this term offer a lower emphasis alternative to its non-variant pair.
Primary
Use primary roles for the most prominent components across the UI, such as the FAB, high-emphasis buttons, and active states.
Secondary
Use secondary roles for less prominent components in the UI such as filter chips.
Tertiary
Use tertiary roles for contrasting accents that balance primary and secondary colors or bring heightened attention to an element such as an input field.
Surface
Text and icons typically use on surface and on surface variant on all types of surfaces.
Surface Container
Use surface roles for more neutral backgrounds, and container colors for components like cards, sheets, and dialogs.
Success
Use success roles to communicate completed actions or positive feedback.
Error
Use error roles to communicate error states, such as an incorrect password entered into a text field.
Info
Use info roles to communicate neutral information or helpful context.
Warning
Use warning roles to flag something that needs attention.