Design Tokens & Color Mapping for Garmin Connect

The Why

Garmin Connect had the need to evaluate all of their palette colors to ensure that all UI elements and data visualizations were fully accessible on surface colors. Traditionally designed in dark mode, when the first light mode mappings were implemented there was a glaring need to update the design language. Additionally, there was a major discrepancy between what was in the delivered work either from the design system or feature work and what made it into our coded environments. We found we had a lot of hard-coded hex values rather than tokenized or variable color names.

We started to consider the concept of color mapping at the component level to allow us to deviate from a 1:1 mapping when needed. A single token can be associated with multiple roles, but only if the color value is used consistently across those roles. This would allow for uniform color applications across theme while maintaining full styling flexibility.

The ultimate goal is to share color tokens across the Garmin ecosystem, not just Garmin Connect. By implementing color tokens, we are able to build and create theme for each application using one code base. We were also working to introduce an updated and refreshed design language that would aid in accessibility and allow all content and data visualizations to live in a high contrast environment.

In order to implement this refreshed and refined design language, we needed to create a perspective on the overall taxonomy for the tokens, both inside Figma for the design team to use but also for our development partners so that we could all speak a common language when referring to colors used in our applications. I worked through the multitude of possibilities of naming conventions and held one on one testing interviews with the design team to gather feedback. During these one on ones, I would have the designer attempt to create a new screen and go through the color selection process and gather their feedback in real time. This helped me to evaluate pain points and collaborate on possible solutions so that each designer felt like this system was made for them.

Results

Eventually, we landed on a design-focused and generalized structure so that our designers could not only make color related decisions quickly, but to support the long term goal of library swap theming. While working in tandem with our development partners, we can decide where variants are needed and can support a unified color language.

I worked to create documentation inside each color style to give each designer more context when making color selections. I also created an updated palette inside of our design system file so that design and development could have a contextual source of truth where they could find accessibility measurements, token names, primitives, and hex values easily.