The Zendesk Garden color system is a set of purposeful colors designed with brand personality, usability, and accessibility in mind. The system is broken down into two core palettes: UI and brand.
The UI colors are used when creating interface elements. Each color has been
designed to meet accessibility requirements.
Primary colors
Primary colors are used for the structure of interfaces, actionable items,
and validation. Colors in the 600, 700, and 800 ranges have a WCAG
AA
ratio above 4.5:1 against white or 100 backgrounds (excluding
yellow-600). The 800 color range has AAA contrast ratios above 7:1
against white and 100 backgrounds.
grey-100#f8f9f9
grey-200#e9ebed
grey-300#d8dcde
grey-400#c2c8cc
grey-500#87929d
grey-600#68737d
grey-700#49545c
grey-800#2f3941
kale-100#f5fcfc
kale-200#daeded
kale-300#bdd9d7
kale-400#90bbbb
kale-500#467b7c
kale-600#17494d
kale-700#03363d
kale-800#012b30
blue-100#edf7ff
blue-200#cee2f2
blue-300#adcce4
blue-400#5293c7
blue-500#337fbd
blue-600#1f73b7
blue-700#144a75
blue-800#0f3554
green-100#edf8f4
green-200#d1e8df
green-300#aecfc2
green-400#5eae91
green-500#228f67
green-600#038153
green-700#186146
green-800#0b3b29
red-100#fff0f1
red-200#f5d5d8
red-300#f5b5ba
red-400#e35b66
red-500#d93f4c
red-600#cc3340
red-700#8c232c
red-800#681219
yellow-100#fff7ed
yellow-200#ffeedb
yellow-300#fed6a8
yellow-400#ffb057
yellow-500#f79a3e
yellow-600#ed8f1c
yellow-700#ad5918
yellow-800#703815
Secondary colors
Secondary colors are used in supplementary UI elements such as icons, tags,
status badges, and illustrations. Each color has a light and dark hue with a
default and muted variant. Muted colors are denoted by an M prefix, like
M400.
The default color variants should be used for small UI elements when the
design requires a vibrant color. The muted variants are for applications with
larger floods of color like data visualization and infographics. Colors in
the 400 range meet a minimum contrast of 3:1 on white backgrounds
(excluding lemon and lime-400). Colors in the 600 range meet a 4.5:1
contrast ratio on white backgrounds (excluding lemon).
purple-400#b552e2
purple-600#6a27b8
purple-M400#b072cc
purple-M600#9358b0
royal-400#5d7df5
royal-600#3353e2
royal-M400#7986d8
royal-M600#4b61c3
fuschia-400#d653c2
fuschia-600#a81897
fuschia-M400#cf62a8
fuschia-M600#a8458c
azure-400#3091ec
azure-600#1371d6
azure-M400#5f8dcf
azure-M600#3a70b2
pink-400#ec4d63
pink-600#d42054
pink-M400#d57287
pink-M600#b23a5d
teal-400#02a191
teal-600#028079
teal-M400#2d9e8f
teal-M600#3c7873
crimson-400#e34f32
crimson-600#c72a1c
crimson-M400#cc6c5b
crimson-M600#b24a3c
mint-400#00a656
mint-600#058541
mint-M400#299c66
mint-M600#2e8057
orange-400#de701d
orange-600#bf5000
orange-M400#d4772c
orange-M600#b35827
lime-400#43b324
lime-600#2e8200
lime-M400#519e2d
lime-M600#47782c
lemon-400#ffd424
lemon-600#ffbb10
lemon-M400#e7a500
lemon-M600#c38f00
Brand colors
The brand color palette contains the primary brand colors of Zendesk’s
product suite. These colors are reserved to denote elements in the UI related
to Zendesk products.