Colors
Color Foundations
Introduction
Our color foundation layer provides a structured, scalable approach to color for digital interfaces. At its core, this system offers a broad spectrum of hues, each with a range of tints and shades (weights). These weights form the backbone of a good design system, enabling consistency, accessibility, and flexibility across our products.
Overview
A design system needs a balanced approach to color: enough variety to meet design needs, but not so much that it becomes overwhelming. To achieve this, we’ve built a non-optimized palette—a base layer of colors that’s flexible and intentional.
This foundation draws on lessons from previous versions of our design system and introduces enhancements to meet current and future requirements. It will also be abstracted into design tokens for further optimization.
Our color ramps
Our color foundation includes nine core ramps:
-
Hues: Orange, yellow, blue, red, green, purple, pink
-
Neutrals: Neutral warm, neutral
Each ramp consists of 23 weights. These weights are numbered from 000 (lightest) to 999 (darkest). The numbering system is intuitive: higher numbers indicate “heavier” or darker colors. This approach aligns with how we perceive density and reflects the L (lightness) axis of the CIELaB color space, but reversed for usability.
Why 23 weights?
By defining a full spectrum, we create a universal, flexible system that can adapt to any design need. Even though 23 weights may seem excessive, they give us a robust foundation. We can group weights into tonal categories, and optimize into design tokens.
Tonal categories and use cases
| Category | Weights | Description |
|---|---|---|
| Highlights | 000, 025, 050 | Lightest tones, for surfaces in light mode; shift to Shadows in dark mode. |
| 1/4 Tones | 075–350 | For borders and dividers—not backgrounds, text, or icons. |
| Mid Tones | 400–600 | The palette’s workhorse. Use for button backgrounds, low-emphasis text, and icons. |
| 3/4 Tones | 650–900 | Ideal for text treatments like body copy and headlines. |
| Shadows | 950, 999 | Also used for text treatments like body copy and headlines. |
Accessibility Our system is designed to meet WCAG 2.1 contrast requirements:
-
Weight 500 achieves a 4.5:1 contrast ratio on white (000) and black (999).
-
Weight 550 passes contrast on all Highlight weights (000, 025, 050).
This ensures that our colors are not only aesthetically pleasing but also accessible to all users.
Why this matters By aligning color weights with tonal categories, we simplify decision-making for applying these colors in current product designs in the aim of abstracting specific weights for the tokens layer. This system bridges the gap between accessibility standards, design aesthetics, and engineering needs—ensuring consistency and usability across all our products.
For more detailed implementation guidelines and HEX value references, see the Color Tokens section.