Hex color
Scale name
Sample brand colors
Primary scale — 11 steps
50
#eef1f7
100
#d9e0ed
200
#acc2e7
300
#5993f7
400
#1f6df4
500
#508df7
600
#1f6df4
700
#0a51cd
800
#1c407d
900
#132a53
950
#0d1e3a
Neutral scale (hue-tinted grays)
50
#f7f7f8
100
#eeeff1
200
#dee0e3
300
#c2c6cb
400
#969ca6
500
#717884
600
#575c66
700
#3f434a
800
#2a2d32
900
#1c1e21
950
#101113
WCAG contrast ratios — AA requires 4.5:1 · AAA requires 7:1
| Step | Swatch | vs White | vs Black | AA ⬜ | AA ⬛ | AAA ⬜ | AAA ⬛ |
|---|---|---|---|---|---|---|---|
| 50 | 1.13 | 18.56 | ✗ | ✓ | ✗ | ✓ | |
| 100 | 1.33 | 15.84 | ✗ | ✓ | ✗ | ✓ | |
| 200 | 1.81 | 11.62 | ✗ | ✓ | ✗ | ✓ | |
| 300 | 3.03 | 6.94 | ✗ | ✓ | ✗ | ✗ | |
| 400 | 4.61 | 4.55 | ✓ | ✓ | ✗ | ✗ | |
| 500 | 3.23 | 6.49 | ✗ | ✓ | ✗ | ✗ | |
| 600 | 4.61 | 4.55 | ✓ | ✓ | ✗ | ✗ | |
| 700 | 6.84 | 3.07 | ✓ | ✗ | ✗ | ✗ | |
| 800 | 10.1 | 2.08 | ✓ | ✗ | ✓ | ✗ | |
| 900 | 14.15 | 1.48 | ✓ | ✗ | ✓ | ✗ | |
| 950 | 16.61 | 1.26 | ✓ | ✗ | ✓ | ✗ |
Dark mode preview
Dashboard
Your design system in action
Light mode preview
Dashboard
Your design system in action
:root {
/* Primary color scale */
--color-primary-50: #eef1f7;
--color-primary-100: #d9e0ed;
--color-primary-200: #acc2e7;
--color-primary-300: #5993f7;
--color-primary-400: #1f6df4;
--color-primary-500: #508df7;
--color-primary-600: #1f6df4;
--color-primary-700: #0a51cd;
--color-primary-800: #1c407d;
--color-primary-900: #132a53;
--color-primary-950: #0d1e3a;
/* Primary neutral scale */
--color-neutral-50: #f7f7f8;
--color-neutral-100: #eeeff1;
--color-neutral-200: #dee0e3;
--color-neutral-300: #c2c6cb;
--color-neutral-400: #969ca6;
--color-neutral-500: #717884;
--color-neutral-600: #575c66;
--color-neutral-700: #3f434a;
--color-neutral-800: #2a2d32;
--color-neutral-900: #1c1e21;
--color-neutral-950: #101113;
}