Introducing Tone-based Surfaces in Material 3

The previous way makers could achieve tinted surfaces, which are a hallmark of the M3 design language, was to assign the color role “surface” to a component, and increase its elevation to achieve the desired tinting which was applied via an opacity layer.

The update introduces dedicated surface color roles that are no longer tied to elevation. Makers will be able to choose the right surface roles based on the containment needs of their products, and now have more layout flexibility for largSer screens.

The new surface container roles and tokens include five colors.

“Surface container” is the recommended default color role for a contained area against the “surface” color role. It provides good contrast and can be flexibly combined with all other surface container roles ranging from “surface container lowest” with the lowest emphasis against the “surface” role, to “surface container highest” with the highest emphasis against the “surface” role.

Migrating to the new surface color roles

All Material Components will automatically update to use the new surface container color roles. For makers using the previous opacity-based surface model for custom color mappings, we recommend remapping these to the new roles.

• Surface Container Lowest is a new role
• Surface at elevation +1 becomes Surface Container Low
• Surface at elevation +2 becomes Surface Container
• Surface at elevation +3 becomes Surface Container High
• Surface at elevation +4 and +5 are being deprecated, it is recommended to use Surface Container Highest by default as a replacement. As an alternative Surface Container High, or Surface Dim can be used depending on the specific use case.
• Surface Variant becomes Surface Container Highest

To learn more about applying the new color roles in your products, visit the color system guidance.