Introduction

The color system for a product has many requirements and constraints. There is a need to be intentional and functional with color use. Although the Evergreen color system has a bit of overlap with the Segment brand. There are also many other colors not found in the Segment brand.

Design Values

  • Intentional: use colors in a functional way to show intent when needed.
  • Accessible: use colors with as much contrast as possible while still being beautiful. Break this rule for the green brand color. Prevent muddy neutral colors.
  • High Dynamic Range: use very light neutral colors for background colors. Allow for a wide range of the color spectrum.

Implementation Details

The color system in Evergreen is located in the theme and is used throughout components in the theme. It is tokenized and scaled, typically from 100-500, with shades of blue and gray (our primary and neutral colors) needing more scales to be wholly expressive.

Full Color Palette

You can view our entire color system within the default theme below:

gray900#101840
gray800#474d66
gray700#696f8c
gray600#8f95b2
gray500#c1c4d6
gray400#d8dae5
gray300#E6E8F0
gray200#edeff5
gray100#F4F5F9
gray90#F4F6FA
gray75#F9FAFC
gray50#FAFBFF
blue900#0A1433
blue800#142966
blue700#1F3D99
blue600#2952CC
blue500#3366FF
blue400#5C85FF
blue300#85A3FF
blue200#ADC2FF
blue100#D6E0FF
blue50#EBF0FF
blue25#F3F6FF
red700#7D2828
red600#A73636
red500#D14343
red300#EE9191
red100#F9DADA
red25#FDF4F4
green900#10261E
green800#214C3C
green700#317159
green600#429777
green500#52BD95
green400#75CAAA
green300#97D7BF
green200#BAE5D5
green100#DCF2EA
green25#F5FBF8
orange700#996A13
orange500#FFB020
orange100#F8E3DA
orange25#FFFAF2
purple600#6E62B6
purple100#E7E4F9
teal800#0F5156
teal100#D3F5F7
yellow800#66460D
yellow100#FFEFD2
muted#696f8c
default#474d66
dark#101840
selected#3366FF
tint1#FAFBFF
tint2#F9FAFC
overlayrgba(67, 90, 111, 0.7)
yellowTint#FFEFD2
greenTint#F5FBF8
orangeTint#FFFAF2
redTint#FDF4F4
blueTint#F3F6FF
purpleTint#E7E4F9
tealTint#D3F5F7