Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Color
      • Icons
    Table of Contents
    • UI colors
      • Primary colors
      • Secondary colors
    • Brand colors

    Color

    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.

    Table of Contents
    • UI colors
      • Primary colors
      • Secondary colors
    • Brand colors

    UI colors

    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
      #e8eaec
    • grey-300
      #d8dcde
    • grey-400
      #b0b8be
    • grey-500
      #919ca5
    • grey-600
      #848f99
    • grey-700
      #5c6970
    • grey-800
      #39434b
    • grey-900
      #293239
    • grey-1000
      #1c2227
    • grey-1100
      #151a1e
    • grey-1200
      #0a0d0e
    • kale-100
      #ecf9f9
    • kale-200
      #daeded
    • kale-300
      #cbe2e1
    • kale-400
      #97bfbf
    • kale-500
      #6ba4a5
    • kale-600
      #4a9999
    • kale-700
      #40787a
    • kale-800
      #16494f
    • kale-900
      #063940
    • kale-1000
      #03252a
    • kale-1100
      #061517
    • kale-1200
      #060e0e
    • blue-100
      #edf7ff
    • blue-200
      #ddecf8
    • blue-300
      #cce0f1
    • blue-400
      #93bcdc
    • blue-500
      #66a0cd
    • blue-600
      #2694d6
    • blue-700
      #1f73b7
    • blue-800
      #13456d
    • blue-900
      #0f3655
    • blue-1000
      #0a2338
    • blue-1100
      #061420
    • blue-1200
      #040d15
    • green-100
      #eef8f4
    • green-200
      #daeee6
    • green-300
      #cae3d9
    • green-400
      #94c1b0
    • green-500
      #4eab89
    • green-600
      #26a178
    • green-700
      #037f52
    • green-800
      #104b35
    • green-900
      #0b3b29
    • green-1000
      #0c261c
    • green-1100
      #0a1511
    • green-1200
      #080d0c
    • red-100
      #fff2f3
    • red-200
      #fee3e5
    • red-300
      #f5d5d8
    • red-400
      #f2a1a8
    • red-500
      #ea7881
    • red-600
      #eb5c69
    • red-700
      #cd3642
    • red-800
      #7e1d25
    • red-900
      #671219
    • red-1000
      #3d1418
    • red-1100
      #1d1011
    • red-1200
      #100b0c
    • yellow-100
      #fff3e4
    • yellow-200
      #ffe6cb
    • yellow-300
      #fed6a9
    • yellow-400
      #fca347
    • yellow-500
      #e38215
    • yellow-600
      #d67305
    • yellow-700
      #ac5918
    • yellow-800
      #673515
    • yellow-900
      #4c2c17
    • yellow-1000
      #2d1e15
    • yellow-1100
      #18120f
    • yellow-1200
      #0e0c0b

    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-100
      #f9f3fb
    • purple-200
      #f2e7f6
    • purple-300
      #e9d8f1
    • purple-400
      #d0a9e0
    • purple-500
      #bb86d3
    • purple-600
      #b276cd
    • purple-700
      #9256b1
    • purple-800
      #58209a
    • purple-900
      #411973
    • purple-1000
      #2e1150
    • purple-1100
      #230d3f
    • purple-1200
      #120720
    • royal-100
      #f4f5fc
    • royal-200
      #e7e9f8
    • royal-300
      #d8dcf4
    • royal-400
      #acb4e7
    • royal-500
      #8a96dd
    • royal-600
      #7a88d9
    • royal-700
      #4c67d3
    • royal-800
      #1833ab
    • royal-900
      #122680
    • royal-1000
      #0d1a5a
    • royal-1100
      #0a1445
    • royal-1200
      #050a25
    • fuschia-100
      #fbf3f8
    • fuschia-200
      #f7e6f1
    • fuschia-300
      #f2d5e7
    • fuschia-400
      #e3a4cc
    • fuschia-500
      #d77db7
    • fuschia-600
      #d16aac
    • fuschia-700
      #b34496
    • fuschia-800
      #78116c
    • fuschia-900
      #5a0d51
    • fuschia-1000
      #3f0939
    • fuschia-1100
      #31072c
    • fuschia-1200
      #1b0418
    • azure-100
      #eff7fe
    • azure-200
      #d9ecfc
    • azure-300
      #c4e0fa
    • azure-400
      #82bcf4
    • azure-500
      #4b9fee
    • azure-600
      #3191ea
    • azure-700
      #2770c3
    • azure-800
      #23446b
    • azure-900
      #1a3250
    • azure-1000
      #122238
    • azure-1100
      #0e1a2a
    • azure-1200
      #070d14
    • pink-100
      #fcf3f4
    • pink-200
      #f7e5e8
    • pink-300
      #f3d6dc
    • pink-400
      #e5a6b4
    • pink-500
      #d98193
    • pink-600
      #d96b81
    • pink-700
      #d62054
    • pink-800
      #75263d
    • pink-900
      #561d2e
    • pink-1000
      #3c141f
    • pink-1100
      #2e0f18
    • pink-1200
      #17080c
    • teal-100
      #d4fefa
    • teal-200
      #88fdf1
    • teal-300
      #0bf8e1
    • teal-400
      #03cdb8
    • teal-500
      #02ad9c
    • teal-600
      #2a9d8f
    • teal-700
      #367a74
    • teal-800
      #254846
    • teal-900
      #1b3534
    • teal-1000
      #122423
    • teal-1100
      #0e1c1a
    • teal-1200
      #070d0d
    • crimson-100
      #fbf3f2
    • crimson-200
      #f7e7e4
    • crimson-300
      #f1d7d2
    • crimson-400
      #e2aaa0
    • crimson-500
      #d58678
    • crimson-600
      #cf7464
    • crimson-700
      #be4938
    • crimson-800
      #811b12
    • crimson-900
      #61140d
    • crimson-1000
      #440e09
    • crimson-1100
      #340b07
    • crimson-1200
      #1c0604
    • mint-100
      #d6ffeb
    • mint-200
      #9affce
    • mint-300
      #0afe89
    • mint-400
      #00d26d
    • mint-500
      #01b15c
    • mint-600
      #16a260
    • mint-700
      #2d7e55
    • mint-800
      #1b4b33
    • mint-900
      #143726
    • mint-1000
      #0e261a
    • mint-1100
      #0b1d14
    • mint-1200
      #050e0a
    • orange-100
      #fdf3ed
    • orange-200
      #fae7d8
    • orange-300
      #f7d7be
    • orange-400
      #eda875
    • orange-500
      #e58035
    • orange-600
      #d57428
    • orange-700
      #af5626
    • orange-800
      #693317
    • orange-900
      #4d2711
    • orange-1000
      #361a0c
    • orange-1100
      #291409
    • orange-1200
      #150a04
    • lime-100
      #ecfae7
    • lime-200
      #d1f3c7
    • lime-300
      #b3eda3
    • lime-400
      #4fd12b
    • lime-500
      #45b025
    • lime-600
      #509f2d
    • lime-700
      #3d7e19
    • lime-800
      #2c491b
    • lime-900
      #203614
    • lime-1000
      #16250e
    • lime-1100
      #111d0a
    • lime-1200
      #090e05
    • lemon-100
      #fff7d4
    • lemon-200
      #ffea97
    • lemon-300
      #ffdc4f
    • lemon-400
      #efab00
    • lemon-500
      #c79100
    • lemon-600
      #b68500
    • lemon-700
      #8f6900
    • lemon-800
      #563e00
    • lemon-900
      #3f2e00
    • lemon-1000
      #2b2000
    • lemon-1100
      #221800
    • lemon-1200
      #110c00

    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.

    • support
      #00a656
    • explore
      #30aabc
    • gather
      #f6c8be
    • guide
      #eb4962
    • chat
      #f79a3e
    • talk
      #efc93d
    • sell
      #c38f00
    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024