Garden

# Garden — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Zendesk. "Garden" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Garden
**Owner:** Zendesk
**Official documentation:** https://garden.zendesk.com/
**Visual character:** Customer-service calm: deep kale green heritage, workmanlike blues, and quiet system type that keeps agents focused on tickets.

---

## Summary

Zendesk's design system for creating consistent, accessible customer experiences.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Kale 700 / Brand | `#04444d` | `--zd-color-kale-700` | Zendesk brand anchor |
| Blue 600 / Primary | `#1f73b7` | `--zd-color-blue-600` | Primary actions and links |
| Grey 800 Text | `#2f3941` | `--zd-color-grey-800` | Primary text |
| White | `#ffffff` | `--zd-color-white` | Surfaces |
| Grey 100 | `#f8f9f9` | `--zd-color-grey-100` | Subtle background |
| Grey 300 Border | `#d8dcde` | `--zd-color-grey-300` | Borders |
| Red 600 Danger | `#cc3340` | `--zd-color-red-600` | Errors and destructive actions |
| Green 600 Success | `#038153` | `--zd-color-green-600` | Success states |
| Yellow 400 Warning | `#ffb648` | `--zd-color-yellow-400` | Warnings |

## Typography

- **Body:** System stack — weights 400, 600, 700 — `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
- **Mono:** SFMono — weights 400 — `ui-monospace, SFMono-Regular, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| xxxl | `36px` | `44px` |
| xxl | `26px` | `32px` |
| xl | `22px` | `28px` |
| lg | `18px` | `24px` |
| md | `14px` | `20px` |
| sm | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `20px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `2px` |
| medium | `4px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| small | `0 4px 8px 0 rgba(4,68,77,0.15)` |
| large | `0 20px 28px 0 rgba(4,68,77,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `250ms ease-in-out` |

## Quick start (CSS)

```css
/* Garden — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://garden.zendesk.com/ */

:root {
  /* Color */
  --zd-color-kale-700: #04444d; /* Zendesk brand anchor */
  --zd-color-blue-600: #1f73b7; /* Primary actions and links */
  --zd-color-grey-800: #2f3941; /* Primary text */
  --zd-color-white: #ffffff; /* Surfaces */
  --zd-color-grey-100: #f8f9f9; /* Subtle background */
  --zd-color-grey-300: #d8dcde; /* Borders */
  --zd-color-red-600: #cc3340; /* Errors and destructive actions */
  --zd-color-green-600: #038153; /* Success states */
  --zd-color-yellow-400: #ffb648; /* Warnings */

  /* Typography */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Type scale */
  --text-xxxl: 36px /* line-height 44px */;
  --text-xxl: 26px /* line-height 32px */;
  --text-xl: 22px /* line-height 28px */;
  --text-lg: 18px /* line-height 24px */;
  --text-md: 14px /* line-height 20px */;
  --text-sm: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Radius */
  --radius-small: 2px;
  --radius-medium: 4px;

  /* Elevation */
  --shadow-small: 0 4px 8px 0 rgba(4,68,77,0.15);
  --shadow-large: 0 20px 28px 0 rgba(4,68,77,0.15);

  /* Motion */
  --motion-default: 250ms ease-in-out;
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Style Dictionary
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Garden by Zendesk — Zendesk's design system for creating consistent, accessible customer experiences. Character: Customer-service calm: deep kale green heritage, workmanlike blues, and quiet system type that keeps agents focused on tickets. Use a primary colour near #04444d, the typeface "System stack" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Garden documentation](https://garden.zendesk.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/garden) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._