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.
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.
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.
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.