Skip to content

Create a new color system

In order to support the creation of the new style guide, we need to develop a new and more complex color system that's flexible enough to serve our brand needs and semantic use cases for web and app design. At minimum, we require scales based on the following brand colors:

  • Purple
  • Green
  • Blue
  • Amber
  • Red
  • Gray

We will likely include a scale for a pink hue as well, that at this time won't be incorporated into web or product (outside of illustrations).

And to support dark themes, we'll use an indigo alternate background scale.

Previous work in this area has included the explorations done by Ura Design in tpo/web/styleguide#19 (closed).

Considerations:

  • Lightest colors need to be quite light to function as backgrounds like we intend
  • Darkest shades need to be accessible on lightest colors
  • 30-level colors need to be accessible on two lightest indigo tints

Tasks:

  • Document color combinations that need to be accessible (draw from VPN figma file to see what we're currently using)
  • In testing (scrapbook figma file), create set of variables
  • Remap web and VPN frames to new color variables
  • Adjust primitives if necessary to meet accessibility standards across instances

Estimation:

  • Complexity: large (6 days)
  • Uncertainty: moderate (1.5)
  • Total: 6 days (expected) – 9 days (worst case)
Edited by nicob