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

    Palette

    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.

    • 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.

    • 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