Skip to main content

​
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

000
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
999
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
025
050
075
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
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

CategoryWeightsDescription
Highlights000, 025, 050Lightest tones, for surfaces in light mode; shift to Shadows in dark mode.
1/4 Tones075–350For borders and dividers—not backgrounds, text, or icons.
Mid Tones400–600The palette’s workhorse. Use for button backgrounds, low-emphasis text, and icons.
3/4 Tones650–900Ideal for text treatments like body copy and headlines.
Shadows950, 999Also 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.
⌘I