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
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
        • Palette
        • Theme object
        • Theme provider
        • Utilities
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • What it is
      • PALETTE
    • Configuration

    Palette

    The palette provides the colors used within Garden.

    Table of Contents
    • What it is
      • PALETTE
    • Configuration
    Used for this
    • To reference brand colors specific to Zendesk products
    • To directly access hue[shade] color hex values
    Not for this
    • To style custom components with Garden, access the palette through the theme.palette API instead
    • To extend Garden with reusable components that respond to theming, use the getColor utility with the theme.colors API instead

    What it is

    PALETTE

    The following JSON displays the palette object in its entirety.

    {  "black": "#000",  "white": "#fff",  "product": {    "support": "#00a656",    "explore": "#30aabc",    "gather": "#f6c8be",    "guide": "#eb4962",    "chat": "#f79a3e",    "talk": "#efc93d",    "sell": "#c38f00"  },  "grey": {    "100": "#f8f9f9",    "200": "#e8eaec",    "300": "#d8dcde",    "400": "#b0b8be",    "500": "#919ca5",    "600": "#848f99",    "700": "#5c6970",    "800": "#39434b",    "900": "#293239",    "1000": "#1c2227",    "1100": "#151a1e",    "1200": "#0a0d0e"  },  "blue": {    "100": "#edf7ff",    "200": "#ddecf8",    "300": "#cce0f1",    "400": "#93bcdc",    "500": "#66a0cd",    "600": "#2694d6",    "700": "#1f73b7",    "800": "#13456d",    "900": "#0f3655",    "1000": "#0a2338",    "1100": "#061420",    "1200": "#040d15"  },  "red": {    "100": "#fff2f3",    "200": "#fee3e5",    "300": "#f5d5d8",    "400": "#f2a1a8",    "500": "#ea7881",    "600": "#eb5c69",    "700": "#cd3642",    "800": "#7e1d25",    "900": "#671219",    "1000": "#3d1418",    "1100": "#1d1011",    "1200": "#100b0c"  },  "yellow": {    "100": "#fff3e4",    "200": "#ffe6cb",    "300": "#fed6a9",    "400": "#fca347",    "500": "#e38215",    "600": "#d67305",    "700": "#ac5918",    "800": "#673515",    "900": "#4c2c17",    "1000": "#2d1e15",    "1100": "#18120f",    "1200": "#0e0c0b"  },  "green": {    "100": "#eef8f4",    "200": "#daeee6",    "300": "#cae3d9",    "400": "#94c1b0",    "500": "#4eab89",    "600": "#26a178",    "700": "#037f52",    "800": "#104b35",    "900": "#0b3b29",    "1000": "#0c261c",    "1100": "#0a1511",    "1200": "#080d0c"  },  "kale": {    "100": "#ecf9f9",    "200": "#daeded",    "300": "#cbe2e1",    "400": "#97bfbf",    "500": "#6ba4a5",    "600": "#4a9999",    "700": "#40787a",    "800": "#16494f",    "900": "#063940",    "1000": "#03252a",    "1100": "#061517",    "1200": "#060e0e"  },  "fuschia": {    "100": "#fbf3f8",    "200": "#f7e6f1",    "300": "#f2d5e7",    "400": "#e3a4cc",    "500": "#d77db7",    "600": "#d16aac",    "700": "#b34496",    "800": "#78116c",    "900": "#5a0d51",    "1000": "#3f0939",    "1100": "#31072c",    "1200": "#1b0418"  },  "pink": {    "100": "#fcf3f4",    "200": "#f7e5e8",    "300": "#f3d6dc",    "400": "#e5a6b4",    "500": "#d98193",    "600": "#d96b81",    "700": "#d62054",    "800": "#75263d",    "900": "#561d2e",    "1000": "#3c141f",    "1100": "#2e0f18",    "1200": "#17080c"  },  "crimson": {    "100": "#fbf3f2",    "200": "#f7e7e4",    "300": "#f1d7d2",    "400": "#e2aaa0",    "500": "#d58678",    "600": "#cf7464",    "700": "#be4938",    "800": "#811b12",    "900": "#61140d",    "1000": "#440e09",    "1100": "#340b07",    "1200": "#1c0604"  },  "orange": {    "100": "#fdf3ed",    "200": "#fae7d8",    "300": "#f7d7be",    "400": "#eda875",    "500": "#e58035",    "600": "#d57428",    "700": "#af5626",    "800": "#693317",    "900": "#4d2711",    "1000": "#361a0c",    "1100": "#291409",    "1200": "#150a04"  },  "lemon": {    "100": "#fff7d4",    "200": "#ffea97",    "300": "#ffdc4f",    "400": "#efab00",    "500": "#c79100",    "600": "#b68500",    "700": "#8f6900",    "800": "#563e00",    "900": "#3f2e00",    "1000": "#2b2000",    "1100": "#221800",    "1200": "#110c00"  },  "lime": {    "100": "#ecfae7",    "200": "#d1f3c7",    "300": "#b3eda3",    "400": "#4fd12b",    "500": "#45b025",    "600": "#509f2d",    "700": "#3d7e19",    "800": "#2c491b",    "900": "#203614",    "1000": "#16250e",    "1100": "#111d0a",    "1200": "#090e05"  },  "mint": {    "100": "#d6ffeb",    "200": "#9affce",    "300": "#0afe89",    "400": "#00d26d",    "500": "#01b15c",    "600": "#16a260",    "700": "#2d7e55",    "800": "#1b4b33",    "900": "#143726",    "1000": "#0e261a",    "1100": "#0b1d14",    "1200": "#050e0a"  },  "teal": {    "100": "#d4fefa",    "200": "#88fdf1",    "300": "#0bf8e1",    "400": "#03cdb8",    "500": "#02ad9c",    "600": "#2a9d8f",    "700": "#367a74",    "800": "#254846",    "900": "#1b3534",    "1000": "#122423",    "1100": "#0e1c1a",    "1200": "#070d0d"  },  "azure": {    "100": "#eff7fe",    "200": "#d9ecfc",    "300": "#c4e0fa",    "400": "#82bcf4",    "500": "#4b9fee",    "600": "#3191ea",    "700": "#2770c3",    "800": "#23446b",    "900": "#1a3250",    "1000": "#122238",    "1100": "#0e1a2a",    "1200": "#070d14"  },  "royal": {    "100": "#f4f5fc",    "200": "#e7e9f8",    "300": "#d8dcf4",    "400": "#acb4e7",    "500": "#8a96dd",    "600": "#7a88d9",    "700": "#4c67d3",    "800": "#1833ab",    "900": "#122680",    "1000": "#0d1a5a",    "1100": "#0a1445",    "1200": "#050a25"  },  "purple": {    "100": "#f9f3fb",    "200": "#f2e7f6",    "300": "#e9d8f1",    "400": "#d0a9e0",    "500": "#bb86d3",    "600": "#b276cd",    "700": "#9256b1",    "800": "#58209a",    "900": "#411973",    "1000": "#2e1150",    "1100": "#230d3f",    "1200": "#120720"  }}

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-theming
    • Depsnpm install react react-dom styled-components
    • Importimport { PALETTE } from '@zendeskgarden/react-theming'
    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024