---
title: "Zendesk design system"
variant: extended
source: https://www.zendesk.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/zendesk-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Zendesk · Design System

> Calm editorial layouts, energized by lime and deep green.

**Theme:** light · **Industry:** ai · **Source:** https://www.zendesk.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Zendesk pairs a restrained black-and-white foundation with lime calls to action and deep-green feature bands. Editorial typography, generous white space, and a photo-led hero make the AI service story feel approachable and polished.

## North star

Keep the page calm and editorial, using lime only to direct attention and deep green to mark important story bands.

## Overview

The page is anchored by Gallery White (#ffffff), with Ink (#11110d) used for navigation, strong headings, and the footer. Pale warm-gray surfaces create quiet breaks between mostly white sections, while deep green (#203524) marks selected promotional and report bands. Lime Signal (#d1f470) is reserved for high-visibility actions, badges, and small highlights rather than broad fills. Vanilla Sans supports a clean editorial hierarchy: large, medium-weight headlines, readable body copy, and compact uppercase eyebrow labels. The layout alternates centered statements with left-aligned feature content, using broad margins and comfortable vertical separation. Rounded cards soften the modular structure without making the page feel playful. Photography is most prominent in the hero, where a warm-toned customer-service portrait sits beside white copy and an email CTA. Product-interface imagery and logos support the story in smaller doses. Subtle borders define card edges; elevation stays restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, header, and broad content sections; also appears in reverse text on dark bands. |
| Lime Signal | `#d1f470` | `--color-lime-signal` | accent | Primary CTA fills, small NEW badges, and selective highlights. |
| Soft Ink | `#11110d` | `--color-soft-ink` | brand | Primary text, navigation, announcement strip, hero background, and footer. |
| Warm Mist | `#f5f5f2` | `--color-warm-mist` | surface | Quiet card and section surfaces, including resource and organization-service cards. |
| Stone Edge | `#d5d5d2` | `--color-stone-edge` | neutral | Subtle component edges and inset input or card details. |
| Forest Band | `#203524` | `--color-forest-band` | surface | Full-width report and conversion sections that contrast with white content areas. |
| Cloud Line | `#e5e5e4` | `--color-cloud-line` | neutral | Thin card borders and other low-contrast separators. |
| Canopy Green | `#355e34` | `--color-canopy-green` | accent | Green gradient detail and secondary brand color, most visible in atmospheric feature treatments. |
| Leaf Green | `#70a32a` | `--color-leaf-green` | accent | Occasional green inline emphasis and numeric highlights, not a dominant surface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f2` (Warm Mist) · `--color-surface-2` → `#11110d` (Soft Ink) · `--color-surface-3` → `#203524` (Forest Band) · `--color-surface-4` → `#d5d5d2` (Stone Edge) · `--color-text` → `#11110d` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f5f5f2` (Warm Mist) · `--color-border` → `#e5e5e4` (Cloud Line) · `--color-accent` → `#d1f470` (Lime Signal) · `--color-accent-2` → `#355e34` (Canopy Green) · `--color-accent-3` → `#70a32a` (Leaf Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#11110d` | `#ffffff` | 18.92:1 | AAA |
| `#11110d` | `#f5f5f2` | 17.32:1 | AAA |
| `#11110d` | `#203524` | 1.44:1 | fail |
| `#ffffff` | `#f5f5f2` | 1.09:1 | fail |
| `#ffffff` | `#11110d` | 18.92:1 | AAA |
| `#ffffff` | `#203524` | 13.16:1 | AAA |
| `#f5f5f2` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f2` | `#11110d` | 17.32:1 | AAA |
| `#f5f5f2` | `#203524` | 12.05:1 | AAA |
| `#d1f470` | `#ffffff` | 1.24:1 | fail |

### Gradients

- `radial-gradient(at 50% 85%, rgb(53, 94, 52) 25%, rgb(17, 17, 13) 100%)`
- `linear-gradient(90deg, rgba(17, 17, 13, 0.7) 0%, rgba(17, 17, 13, 0.7) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgb(17, 17, 13) 60%, rgb(17, 17, 13) 100%)`
- `linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%)`
- `linear-gradient(90deg, rgb(209, 244, 112) 0%, rgb(209, 244, 112) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgb(209, 244, 112) 60%, rgb(209, 244, 112) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Vanilla Sans | `--font-body` | webfont | 400, 600, 500, 700 | All measured text roles, from navigation and body copy to display headlines. | Inter |

- **Vanilla Sans:** Use clean sans-serif forms, mostly medium-weight headings, regular body copy, and bold uppercase eyebrow labels with modest tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1.1 | 0 | — | Vanilla Sans | Large hero or standout campaign headlines. |
| h1 | 68px | 500 | 1.05 | 0 | — | Vanilla Sans | Primary hero headline and key page-level statement. |
| h2 | 42px | 500 | 1.15 | 0 | — | Vanilla Sans | Major section headings and prominent feature titles. |
| h3 | 26px | 500 | 1.25 | 0 | — | Vanilla Sans | Card, sub-feature, and supporting section headings. |
| body | 16px | 400 | 1.45 | 0 | — | Vanilla Sans | Standard explanatory copy and descriptions. |
| caption | 14px | 400 | 1.5 | 0 | — | Vanilla Sans | Small supporting labels and compact metadata. |
| nav | 16px | 600 | 1.44 | 0 | — | Vanilla Sans | Primary navigation links, set with stronger weight. |
| eyebrow | 14px | 700 | 1.3 | 0.054em | uppercase | Vanilla Sans | Compact uppercase section labels and report or feature markers. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 12, 16, 20, 24, 32, 40, 88 px.
- Section rhythm 88px · element gap 8px · card padding 40px · max content width 1102px.

The page uses a centered content frame capped at the measured 1102px maximum width, with broad white margins and a comfortable density. Sections alternate between centered editorial introductions, two-column feature areas, card grids, and full-width dark or green bands. The measured section rhythm uses 88px vertical gaps; internal spacing follows an 8px base unit. Keep headings left-aligned where they introduce a feature, centered for broad narrative sections, and give cards generous internal breathing room.

## Shape & elevation

- Radius: button `16px` · input `12px` · card `40px` · badge `4px` · nav `4px` · link `4px` · xs `4px` · sm `16px` · md `40px`
- Shadow `inset` (input): `rgb(213, 213, 210) 0px 0px 0px 1px inset`
- Shadow `inset-2` (card): `rgb(213, 213, 210) 0px 2px 0px 0px inset`
- Shadow `lg` (button): `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px`
- Motion: standard transition `0.6s cubic-bezier(0.7, 0, 0.3, 1)` on interactive elements.

The page is mostly flat: white space and section color changes create hierarchy more often than shadows. Use fine, pale borders around cards and controls, with the measured inset treatment for inputs. Reserve soft shadowing for occasional interactive emphasis; large rounded cards provide the main sense of layering.

## Imagery

Use warm, human customer-service photography as the hero’s main visual, framed inside a large rounded media area with copy layered over the darker side. Elsewhere, favor restrained product-interface mockups, customer logos, and supporting editorial imagery. Keep photos natural and richly colored; do not let illustration or UI mockup colors redefine the brand palette.

## Components

### Primary CTA

Lime-filled button with dark label text, medium-heavy sans-serif type, and a measured 16px radius; use for trial and platform actions.

### Secondary CTA

Quiet outlined or text-style companion action, commonly paired with a lime primary button.

### Email input

White field with dark text, a measured 12px radius, and a subtle inset edge in Stone Edge (#d5d5d2).

### Feature card

Warm Mist (#f5f5f2) surface, generous measured 40px radius, and ample internal whitespace.

### Resource card

Compact editorial card with pale surface, category eyebrow, concise title, and a simple Learn more link.

### Dark-green CTA band

Full-width Forest Band (#203524) section with centered light text and lime primary action.

### Announcement strip

Narrow Soft Ink (#11110d) bar with compact light event copy, registration link, and a close affordance.

### Measured component styles

- **Primary button** (“Try for free”): background #d1f470 · text #ffffff · radius 16px · padding 10px 20px · 600 18px Vanilla Sans
- **Secondary button** (“Launch in minutes, not months”): background #bfbfbd · text #000000 · radius 0px · padding 30px 24px · 400 16px Vanilla Sans
- **Link** (“PRODUCT FEATURED A powerful, flexible pl”): background #f5f5f2 · text #11110d · border 1px solid · radius 16px · padding 0px · 500 16px Vanilla Sans
- **Input**: background #ffffff · text #11110d · radius 12px · padding 12px · 400 15px Vanilla Sans · shadow rgb(213, 213, 210) 0px 0px 0px 1px inset
- **Card** (“Every conversation becomes a learning si”): background #f3f3f3 · text #000000 · border 1px solid #e5e5e4 · radius 40px · padding 40px · 400 16px Vanilla Sans
- **Badge** (“NEW”): background #d1f470 · text #11110d · radius 4px · padding 4.9px 8.4px 4.2px 8.4px · 700 14px Vanilla Sans · uppercase
- **Navigation item** (“Platform”): transparent background · text #11110d · radius 0px · padding 0px · 600 16px Vanilla Sans

## Do

- Use white as the default content canvas.
- Reserve lime for actions, badges, and selective emphasis.
- Use deep green for distinct promotional or report sections.
- Keep headlines large, medium-weight, and cleanly wrapped.
- Pair primary lime buttons with quieter secondary actions.
- Use generous whitespace around section introductions.
- Keep product visuals subordinate to the page’s editorial hierarchy.

## Don't

- Do not turn lime into a broad background color.
- Do not add unmeasured colors to the core palette.
- Do not crowd cards or compress section spacing.
- Do not use heavy shadows as the main hierarchy device.
- Do not style every section as a dark panel.
- Do not use decorative display type or excessive tracking.
- Do not treat warm hero photography tones as brand colors.

## Agent prompt

Build a new page in Zendesk’s calm, editorial SaaS style. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#11110d) for typography and the darkest bands, and Warm Mist (#f5f5f2) for quiet cards. Apply Lime Signal (#d1f470) selectively to primary CTAs and badges; use Forest Band (#203524) for a few prominent full-width story sections. Set all text in Vanilla Sans or a close sans-serif substitute, with medium-weight, generously sized headlines and readable regular body copy. Keep a centered content frame, broad whitespace, alternating centered and left-aligned content, and rounded cards. Use natural customer-focused photography for the hero and restrained interface imagery elsewhere. Prefer thin borders over shadows and pair each prominent action with a quieter secondary link.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark, two-column hero with left-aligned headline, copy, email field, and CTA beside customer-service photography. | email capture, free-trial CTA | dark media panel, lime button, rounded hero image, floating chat UI |
| 2 | logo-cloud | Narrow white trust strip with a small heading and a row of customer logos. | social proof | logo row, compact label |
| 3 | how-it-works | Centered introduction followed by stacked, wide process cards. | product education, progressive explanation | centered heading, vertical sequence, pale rounded panels |
| 4 | stats | Centered heading above three evenly distributed numeric metrics. | proof through metrics | large green numerals, three-column row |
| 5 | feature-split | Two-column feature section with copy and actions beside supporting product imagery. | feature discovery, demo request | eyebrow label, NEW badge, paired links |
| 6 | feature-split | Single-column narrative feature with supporting imagery and a text link. | customer story | wide story card, dark-green surface |
| 7 | feature-grid | Centered heading followed by two side-by-side service cards. | solution discovery, cross-sell | two-card grid, pale surfaces, paired actions |
| 8 | feature-split | Full-width dark-green report band with copy and supporting report artwork. | credibility proof, report download | report eyebrow, light text, lime link or button |
| 9 | testimonials | Centered heading above a broad testimonial panel with supporting metrics. | customer proof, testimonial browsing | quote card, navigation controls, metric inset |
| 10 | integrations | Single-column, left-aligned introduction with one action and supporting ecosystem imagery. | integration discovery | editorial heading, single CTA |
| 11 | content-feed | Left-aligned section heading above four resource cards in a row. | related reading, resource discovery | four-card grid, eyebrow categories, text links |
| 12 | pricing | Centered pricing message with two side-by-side actions on a light card. | plan discovery, ROI calculation | soft panel, paired buttons |
| 13 | cta | Centered heading and paired actions inside a full-width deep-green band. | free-trial conversion, demo request | Forest Band background, lime primary action, quiet secondary action |
| 14 | faq | Deep-green FAQ area with a centered prompt and stacked expandable rows. | accordion disclosure | horizontal dividers, expand icons, light text |
| 15 | footer | Soft Ink footer with multiple link columns, contact prompt, social icons, and legal row. | site navigation, contact access | multi-column link lists, lime inline link, social icons, hairline dividers |

## Source CSS custom properties (selected)

```css
--radius: 20px;
--space-space: 24px;
--space-globalPadding: 24px;
--space-sectionPadding: 88px;
--space-sectionPaddingHorizontal: 24px;
--space-sectionPaddingVertical: 88px;
--space-scrollPadding: 90px;
--space-textMarginSm: 8px;
--space-textMarginMd: 16px;
--space-textMarginLg: 24px;
--space-contentMarginSm: 24px;
--space-contentMarginMd: 48px;
--space-contentMarginLg: 64px;
--space-buttonMargin: 32px;
--space-linkMarginSm: 16px;
--space-linkMarginMd: 24px;
--space-tabletExtraPadding: 0px;
--space-modalPaddingHorizontal: 40px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/zendesk-com