Google Play has an outdated and broken color story across core use journeys. Color inconsistencies across surfaces exacerbate non-compliance with Material design guidelines and make it harder to both modernize the UI and adopt Material common components.
Deliver a consistent and trustworthy experience across Google products and better improve the Google Play experience for users by modernizing & aligning app color strategy.
The Google Play baseline blue color scheme achieves color consistency and adoption of Material guidance.
In our approach to aligning the Play color story, we explored three potential options that adopted a Material color structure while maintaining historic color equity.
Google Play color is updated to align with Google Material design tokens & color roles. While the previous Play Store color system relied on hard-coded hex values, design tokens enable dynamic color and product consistency by assigning an element's color role in a UI, rather than a set value. This system is built to support Google Play across light and dark themes.
Tokens store style values like colors and fonts so the same values are used across designs, code, tools, and platforms. Using design tokens instead of hardcoded values can make it easier to build and maintain products with a design system.
The color system is based on a series of tonal palettes across primary, secondary, tertiary, error, neutral, and neutral variant values.
Tonal palettes consists of 13 tones generated by a key color. A tone value of 100 is equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and 100 expresses the amount of light present in the color.
A tonal palette offers variations in tonality so that a color scheme and UI can provide contrast and visual differentiation.
Tones feed into color roles. Every role in the scheme is populated by a tone in the tonal palette. Never a hex value. Color roles then get applied to component elements.
The baseline color system was launched in a phased approach. For the initial launch, existing semantic styles needed to be remapped to the baseline scheme in tandem with reference and system token structures in collaboration between UX and engineering.
.jpg)
To maintain a consistent cross-platform experience, baseline color was implemented across product surfaces for mobile, foldable, tablet and web.
To communicate phases of Material 3 color adoption and provide guidance for the organization, we crafted color documentation that lived on the design system microsite. This documentation provided an overview of what was new with the latest color system, usage guidance for each color role, a repository of shared color tokens, and examples of how colors were applied across the product UI across light and dark themes.
