I built a suite of custom color tools to support the Stratus design system that built on and refined my work in Tenderwolf. These tools help both designers and engineers create more accessible and consistent UIs.
Colors are defined in a JSON file with name, hex value, variable name, and an array of color values (i.e., tints and shades). The tool generates the values of the color using a mixture pattern based on a Material Design's color framework to create lighter and darker variants of the base color (500 value). Tints (values under 500) mix white into the base color. Shades (over 500) mix a darkened version of the color into itself. This provides consistency in the color palette, as all the values have a the same relationship to the base color. Knowing that 50 is consistently lightest and 900 the darkest makes the colors easy to use, particularly in the grey scale.
To add greater flexibility for designers, the tool can override a color value with a specific hex code for a shade or tint. For example, the generated 900 value did not have sufficient contrast to be used against a white background, so we manually set it to a darker value.
{
name: 'Sky Blue (Informational)',
variable: 'jcInformational',
hex: '#afcbff',
colorValues: [50, 100, 200, 300, 500, 700, 900],
colorValueOverrides: {
900: '#4373c7',
},
}
Color Chips
The component library has a color chip component that displays metadata for the color and provides WCAG AA color contrast ratios for white and black.
The data driven approach has already paid off as JumpCloud has iterated its brand color palette since establishing the UI color palette. Not only did we need to update base colors, but the overall mixture percentage of white for tints (values under 500).
Color Contrast
To facilitate better design and engineering alignment on WCAG color contrast, I built a contrast tool that allows any two values of colors in the palette to be compared. The tool takes into account both color and type size to ensure compliance with WCAG guidance for large and small text. For example, a color may meet AA accessibility for the "Heading Huge" size, but not "Body Text".
Legacy Variables
To aid adoption and accelerate deprecation of legacy color variables, I wrote a variable mapping tool to make it easy for developers to search for legacy color variables and find a replacement in the new palette. The list of legacy and new UI color mappings are specified in a JSON file for easy maintenance.
