Play Baseline Blue
Play Baseline Blue
Play Baseline Blue
2023
Building a source of truth
Role
Design Systems
Visual Design
Client
Google Play has a broken color story across core user journeys. These color inconsistencies across surfaces exacerbate non-compliance with the latest Google Material guidance and make it harder to both modernize the UI and adopt Material common components. Baseline Blue is an initiative to remap the Google Play color system to align with Material and other first party Google apps while simultaneously integrating design tokens to deliver a more consistent, higher quality experience for users.
My role as interaction designer was to partner cross functionally with UX verticals and Engineering to remap the semantics of the UI across platforms, integrate color token structures into an integrated token index, and craft documentation for the team to accelerate adoption of the latest system.
2023
Building a source of truth
Role
Design Systems
Visual Design
Client
Google Play has a broken color story across core user journeys. These color inconsistencies across surfaces exacerbate non-compliance with the latest Google Material guidance and make it harder to both modernize the UI and adopt Material common components. Baseline Blue is an initiative to remap the Google Play color system to align with Material and other first party Google apps while simultaneously integrating design tokens to deliver a more consistent, higher quality experience for users.
My role as interaction designer was to partner cross functionally with UX verticals and Engineering to remap the semantics of the UI across platforms, integrate color token structures into an integrated token index, and craft documentation for the team to accelerate adoption of the latest system.
2023
Building a source of truth
Role
Design Systems
Visual Design
Client
Google Play has a broken color story across core user journeys. These color inconsistencies across surfaces exacerbate non-compliance with the latest Google Material guidance and make it harder to both modernize the UI and adopt Material common components. Baseline Blue is an initiative to remap the Google Play color system to align with Material and other first party Google apps while simultaneously integrating design tokens to deliver a more consistent, higher quality experience for users.
My role as interaction designer was to partner cross functionally with UX verticals and Engineering to remap the semantics of the UI across platforms, integrate color token structures into an integrated token index, and craft documentation for the team to accelerate adoption of the latest system.
The Problem
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.
The Problem
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.
The Problem
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.
The Solution
The Google Play baseline blue color scheme achieves color consistency and adoption of Material guidance.
The Solution
The Google Play baseline blue color scheme achieves color consistency and adoption of Material guidance.
The Solution
The Google Play baseline blue color scheme achieves color consistency and adoption of Material guidance.
Color Explorations
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.
Color Explorations
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.
Color Explorations
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.
Baseline Color Scheme
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.
Baseline Color Scheme
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.
Baseline Color Scheme
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.
Color Tokens
Color tokens store style values for consistency across designs and code. Our system uses tonal palettes where tones define color roles, ensuring contrast and cohesion without relying on hex values.
Color Tokens
Color tokens store style values for consistency across designs and code. Our system uses tonal palettes where tones define color roles, ensuring contrast and cohesion without relying on hex values.
Color Tokens
Color tokens store style values for consistency across designs and code. Our system uses tonal palettes where tones define color roles, ensuring contrast and cohesion without relying on hex values.
Aligning Platforms
To maintain a consistent cross-platform experience, baseline color was implemented across product surfaces for mobile, foldable, tablet and web.
Aligning Platforms
To maintain a consistent cross-platform experience, baseline color was implemented across product surfaces for mobile, foldable, tablet and web.
Aligning Platforms
To maintain a consistent cross-platform experience, baseline color was implemented across product surfaces for mobile, foldable, tablet and web.
Documentation & Guidance
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.
Documentation & Guidance
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.
Documentation & Guidance
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.
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
If You Know You Know
Hint: Please reach out to me@andrewwags.com