Zendesk以黑白中性色为基底，用荧光绿按钮和深绿色区块突出AI服务内容。编辑式排版、充足留白与以人物摄影为主的首屏，让产品呈现得亲切而利落。
North star · Keep the page calm and editorial, using lime only to direct attention and deep green to mark important story bands.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Soft Ink
#11110d
Primary text, navigation, announcement strip, hero background, and footer.
强调色
Lime Signal
#d1f470
Primary CTA fills, small NEW badges, and selective highlights.
Canopy Green
#355e34
Green gradient detail and secondary brand color, most visible in atmospheric feature treatments.
Leaf Green
#70a32a
Occasional green inline emphasis and numeric highlights, not a dominant surface color.
表层色
Warm Mist
#f5f5f2
Quiet card and section surfaces, including resource and organization-service cards.
Forest Band
#203524
Full-width report and conversion sections that contrast with white content areas.
中性色
Gallery White
#ffffff
Main page canvas, header, and broad content sections; also appears in reverse text on dark bands.
Stone Edge
#d5d5d2
Subtle component edges and inset input or card details.
Cloud Line
#e5e5e4
Thin card borders and other low-contrast separators.
文字 背景 对比度 WCAG #11110d Soft Ink#ffffff Gallery White18.92:1 AAA #11110d Soft Ink#f5f5f2 Warm Mist17.32:1 AAA #11110d Soft Ink#203524 Forest Band1.44:1 不达标 #ffffff Gallery White#f5f5f2 Warm Mist1.09:1 不达标 #ffffff Gallery White#11110d Soft Ink18.92:1 AAA #ffffff Gallery White#203524 Forest Band13.16:1 AAA
字体 字号阶梯：Augmented Fourth（比例约 1.456，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Vanilla Sans 网络字体 · 字重 400 / 600 / 500 / 700 · 占比 100%
免费替代：Inter
All measured text roles, from navigation and body copy to display headlines.
角色 示例 字号 字重 行高 字距 特大标题 Large hero or standout campaign headlines.
Zendesk
72px 500 1.1 0 一级标题 Primary hero headline and key page-level statement.
Zendesk
68px 500 1.05 0 二级标题 Major section headings and prominent feature titles.
Zendesk
42px 500 1.15 0 三级标题 Card, sub-feature, and supporting section headings.
The quick brown fox 敏捷的狐狸
26px 500 1.25 0 正文 Standard explanatory copy and descriptions.
The quick brown fox 敏捷的狐狸
16px 400 1.45 0 辅助文字 Small supporting labels and compact metadata.
The quick brown fox 敏捷的狐狸
14px 400 1.5 0 导航 Primary navigation links, set with stronger weight.
The quick brown fox 敏捷的狐狸
16px 600 1.44 0 眉题 Compact uppercase section labels and report or feature markers.
The quick brown fox 敏捷的狐狸
14px 700 1.3 0.054em
间距与布局 基准单位 8px · 密度：适中
88px 版块间距
8px 元素间距
40px 卡片内边距
1102px 内容最大宽度
2px
4px
8px
10px
12px
16px
20px
24px
32px
40px
88px
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.
圆角与层次 inset · input
inset · card
lg · button
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 25 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 (## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | neutral | Main page canvas, header, and broad content sections; also appears in reverse text on dark bands. |
| Lime Signal | ` | `--color-lime-signal` | accent | Primary CTA fills, small NEW badges, and selective highlights. |
| Soft Ink | ` | `--color-soft-ink` | brand | Primary text, navigation, announcement strip, hero background, and footer. |
| Warm Mist | ` | `--color-warm-mist` | surface | Quiet card and section surfaces, including resource and organization-service cards. |
| Stone Edge | ` | `--color-stone-edge` | neutral | Subtle component edges and inset input or card details. |
| Forest Band | ` | `--color-forest-band` | surface | Full-width report and conversion sections that contrast with white content areas. |
| Cloud Line | ` | `--color-cloud-line` | neutral | Thin card borders and other low-contrast separators. |
| Canopy Green | ` | `--color-canopy-green` | accent | Green gradient detail and secondary brand color, most visible in atmospheric feature treatments. |
| Leaf Green | ` | `--color-leaf-green` | accent | Occasional green inline emphasis and numeric highlights, not a dominant surface color. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Warm Mist) · `--color-surface-2` → ` (Soft Ink) · `--color-surface-3` → ` (Forest Band) · `--color-surface-4` → ` (Stone Edge) · `--color-text` → ` (Soft Ink) · `--color-text-muted` → ` (Gallery White) · `--color-text-subtle` → ` (Warm Mist) · `--color-border` → ` (Cloud Line) · `--color-accent` → ` (Lime Signal) · `--color-accent-2` → ` (Canopy Green) · `--color-accent-3` → ` (Leaf Green) · `--color-on-accent` → ` (Gallery White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 18.92:1 | AAA |
| ` | ` | 17.32:1 | AAA |
| ` | ` | 1.44:1 | fail |
| ` | ` | 1.09:1 | fail |
| ` | ` | 18.92:1 | AAA |
| ` | ` | 13.16:1 | AAA |
| ` | ` | 1.09:1 | fail |
| ` | ` | 17.32:1 | AAA |
| ` | ` | 12.05:1 | AAA |
| ` | ` | 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 (### Feature card
Warm Mist (### 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 (### Announcement strip
Narrow Soft Ink (### Measured component styles
- **Primary button** (“Try for free”): background ## 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 (## 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
