Lyft has created the tool colorbox with which you can build color systems for accessible UIs that scale. The algorithm considers useful gradiation steps and accessibility requirements.
— Kevyn Arnott, Lyft / Source (Medium)
Using our algorithm, we made our color lightness-to-darkness consistent across color hues, so that every color 0–50 is accessible (4.5:1) on black, and every color 60–100 is accessible (4.5:1) on white. Now seeing a color in code or verbally saying the color provided enough information to determine whether that color was accessible. For example, a designer or engineer can read Red 50 and know it’s not accessible, but read Red 60 and know it is accessible.
— Kevyn Arnott, Lyft / Source (Medium)
500) must pass a minimum contrast of AA Large, if they are used as a background color for white or dark grey text.900) must pass with the lightest shade (000).
— Diana Mounter, GitHub / Source (YouTube)
They use a small set of design tokens. To extend the color set they can add shades in 10% increments.
— Kellie Matheson and Richard Hallows, Bernardo’s / Source (YouTube)
Vox Media has developed a design system for 8 brands with 250+ websites so that they name their colors on the theming level with their purpose.
Theming / multi brand approach
— Yesenia Perez-Cruz, Vox Media / Source (YouTube)
They use a very simple matrix to explain the usage of the colors.