# Zendesk: brand book and build spec

Zendesk's 2025 identity is black and white with one bright Matcha green: Licorice type on Coconut, deep Fern bands, soft 40px containers, and warm photos of people with chat cards floating over them. Every element is meant to move a reader from challenge to resolution.

From unfairly.ai/brand-guidelines/zendesk, checked 2026-10-31. Unofficial study; not affiliated with Zendesk.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Resolution as a colour. Zendesk keeps almost everything black, white and green-black, and saves one bright Matcha for the moment of action, so the eye always lands on the button that resolves something. Based on: The guide calls Matcha a symbol of resolution to be used intentionally; on the homepage it appears only on buttons, chips and the "Contact us." line.

## Purpose

Mission: Simplify the complexity of business and make it easy for companies and customers to create connections (paraphrase). (published; https://www.zendesk.com/company/)

Story: Zendesk was created to bring calm to the chaotic world of customer service; its About page jokes that it was born on a desk that was really a door, or a kitchen table (paraphrase). The 2025 brand refresh rebuilt the palette around Licorice, Coconut and Matcha, a tribute to the original Zendesk green. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Everyone is a customer | Life is better when shared customer experiences are painless, frictionless and helpful (paraphrase of the About page). | published: https://www.zendesk.com/company/ |

## Fixed and flexible

Never changes:
- Licorice and Coconut foundation
- Matcha only for intentional accents and primary actions
- Primary logo unaltered in Licorice or Coconut
- People-first photography
- Brief, focused, human copy

The one thing that varies: How much dark green appears: a page can run nearly all white or alternate Fern bands and green-glow panels.

## Positioning

- **Statement**: The AI-first service platform that resolves customer and employee issues faster, with AI agents that improve with every resolution. (observed)
- **Category**: AI-first customer service platform (hero eyebrow: "AI-powered customer service platform") (observed)
- **Audience**: Service leaders and teams, from startups to enterprises, across customer service, employee service (IT/HR) and contact centers. (observed)
- **Problem**: Fragmented legacy stacks and AI tools that work in isolation, need constant retraining and leave teams handling repetitive work (paraphrase). (observed)
- **Promise**: Faster resolutions, stronger loyalty, better outcomes. (observed)
- **Differentiators**: AI trained on billions of real service interactions; AI agents resolve end to end, with Copilot guiding human agents; One platform for customers, employees, or both; Governance built in: 99.9% uptime and major compliance certifications
- **Alternatives**: Intercom, Salesforce and Freshdesk (the footer's Compare links)

## Messaging

Boilerplate (observed): Zendesk is an AI-powered service platform built for the full service lifecycle, backed by 80,000+ customers and more than 19 years of expertise (paraphrase).

Taglines:
- Automate up to 80% of interactions with Zendesk AI agents. (homepage hero H1)
- The only AI-first service platform (platform description in the site navigation: "the only AI-first service platform" (paraphrased label))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Resolution | Every visual and word points at a problem resolved: the brand page frames its whole system around moving customers from challenge to resolution. | 4.8B resolutions delivered | published |
| AI that learns | AI agents improve with every resolution and can automate up to 80% of interactions. | Up to 80% of interactions automated by AI agents; 22,000+ service teams use Zendesk AI | observed |
| Trusted at scale | Security, governance and reliability for service leaders scaling AI. | 99.9% uptime; SOC 2, ISO 27001, CCPA and HIPAA compliance; 80,000+ customers | observed |
| One platform | One system for customer service, employee service and contact center, with no complex tooling. | 80,000+ customers | observed |

They never claim:
- Automation is always "up to" a percentage, never a guarantee (observed on the homepage and Why Zendesk).

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Automate up to 80% of interactions with Zendesk AI agents." | homepage hero | https://www.zendesk.com/ (2026-10-31) |
| "AI that gets smarter with every resolution." | homepage section | https://www.zendesk.com/ (2026-10-31) |

## Voice

Tone words: Confident, Included, Credible.

Traits:
- Confident, but not Arrogant (published)
- Included, but not Exclusive or technical (published)
- Credible, but not Hyped (published)
- Approachable, but not Casual to a fault (published)
- Modern and fresh, but not Trendy (published)

- The brand page: write how we want people to feel, confident, included and credible; keep it brief, focused and human (paraphrase).
- Brand attributes shown on the voice card: approachable, modern, trusted, connected and fresh.
- Copy expresses what it feels like to use the product.
- Homepage voice (observed): short declarative headlines with a number where one exists ("Automate up to 80%..."), sentence case, a full stop at the end of sentence headlines, outcomes over features ("Faster resolutions. Stronger loyalty. Better outcomes.").
- Product UI copy follows Garden: button labels are verbs, one action per button, sentence case; the full content guide moved to an internal space.

Rules a copy check enforces:
- Sentence case headlines
- Keep it brief, keep it focused, keep it human
- Write for how the reader should feel: confident, included, credible
- Button labels are verbs and name a single action
- Button labels in sentence case
- Mark Zendesk with the registered sign (Zendesk®) at its first mention in campaign copy
- Lead with a concrete number when Zendesk publishes one (80%, 4.8B+, 22,000+); never invent one
- Full-sentence headlines end with a full stop; short labels and titles do not
- No exclamation marks
- American spelling
- Write as "we", to "you"

Their words: resolution, resolve, AI agents, service, connection, human.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Coconut | #FFFFFF | paper | Core. The brand canvas and primary background on every touchpoint |
| Licorice | #11110D | ink | Core. Contrast and legibility: all text on light grounds, dark grounds, the logo colour |
| Matcha | #D1F470 | accent | Accent. Bright green tribute to the original Zendesk green and a symbol of resolution; use intentionally |
| Fern | #203524 | accent_secondary | Secondary. Deep green shift from black for hierarchy |
| Shamrock | #2D4C33 | night-panel | Secondary. Mid green, a step lighter than Fern |
| Cactus | #A1D78F | soft green | Secondary. Soft green |
| Pineapple | #FEEB7E | soft yellow | Secondary. Soft yellow |
| Sesame | #F5F5F2 | surface | Secondary. Warm off-white, the subtle shift from Coconut |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Vanilla Sans | Proprietary (Zendesk); not published or downloadable | Figtree | Figtree, "Helvetica Neue", Arial, sans-serif |
| body | Vanilla Sans | Proprietary (Zendesk) | Figtree | Figtree, "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 (Vanilla Sans 500) | --text-display-xl-* | display | 68px | 43px | 1.05 | 0px | 560 |
| Section H2 (Vanilla Sans 500) | --text-display-l-* | display | 42px | 30px | 1.15 | 0px | 560 |
| Stat number (Vanilla Sans 500) | --text-stat-* | display | 72px | 56px | 1 | 0px | 560 |
| Card / band title H3 (Vanilla Sans 500) | --text-title-m-* | display | 26px | 22px | 1.25 | 0px | 560 |
| Footer contact line (Vanilla Sans 500) | --text-contact-* | display | 42px | 30px | 1.15 | 0px | 560 |
| Body (Vanilla Sans 400) | --text-body-* | body | 16px | 15px | 1.45 | 0px | 460 |
| Strong body: quote, card titles, tab labels (Vanilla Sans 600) | --text-body-strong-* | body | 16px | 15px | 1.45 | 0px | 640 |
| Button label (Vanilla Sans 600) | --text-button-* | body | 18px | 18px | 1.556 | 0px | 640 |
| Nav link (Vanilla Sans 600) | --text-nav-* | body | 16px | 16px | 1.44 | 0px | 640 |
| Eyebrow (Vanilla Sans 700 uppercase, +0.75px) | --text-eyebrow-* | body | 14px | 12px | 1.3 | 0.5px | 780 |
| Small: announcement, utility links, footer links (Vanilla Sans 400) | --text-small-* | body | 14px | 13px | 1.5 | 0px | 460 |
| Countdown digits (Vanilla Sans 300) | --text-countdown-* | body | 32px | 32px | 1 | 0px | 300 |

## Layout

Measured on https://www.zendesk.com/company/brand-guidelines/: Zendesk's public brand resources page and its embedded images, the Garden design system (garden.zendesk.com) for product UI rules, and measurements of the homepage (www.zendesk.com) at 1440 and 390, 2026-10-31.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 169px | 16px |
| Section padding | 88px | 48px |
| Container max width | 1102px | full |
| Hero text width | max 656px | full |
| Grid columns | 12 | 4 |
| Gutter | 24px | 16px |
| Card gap | 24px | 24px |
| Navigation height | 110px | 110px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Zendesk's.

Homepage bands, top to bottom (observed):
1. Announcement bar
   - Desktop: 58px tall, one centred row
   - Phone: 146px, stacked and centred
   - Bold title, 14px message, underlined white link; X at right
2. Header
   - Desktop: 110px, sticky, white at 90%
   - Phone: 60px: wordmark, View demo (Matcha), hamburger
   - Primary logo symbol-over-wordmark 84x60 at x 24
3. Hero photo card
   - Desktop: 1408x772 card inset 16px, radius 32px, left-darkening gradient over the photo
   - Phone: text on white, then a 358x396 radius-32 photo card
   - Photo Hero-image_V01.jpg cover; overlay Hero_Homepage__en_us.png bottom right
4. Logo band
   - Desktop: 224px, one row
   - Phone: 4/3/1 centred rows
   - Logos 48px tall desktop, 56px phone
5. Event card
   - Desktop: 1102x494, radius 40px
   - Phone: 358x834 stacked
   - Countdown tiles radius 8px with gradient 1px border
6. Platform intro + 3 timeline cards
   - Desktop: cards 1102x322 radius 40px, 136px gaps
   - Phone: cards 358x315
   - Connector line 2px #D7D7D7 at x 719-720
7. Stats row
   - Desktop: 3 columns
   - Phone: stacked 56px numbers
   - 22K+ / 830M / 4.8B in #70A32A
8. Forethought split
   - Desktop: text x 169 w 515, image 445x334 radius 40px
   - Phone: stacked
   - Matcha NEW chip radius 4px
9. Open Service Directory banner
   - Desktop: 1102x272 radius 40px
   - Phone: 358x470 centred stack
   - Thumbnail 144x144 radius 16px
10. Dark platform panel
   - Desktop: 1150x1023 radius 16px, radial green glow from the bottom
   - Phone: accordion tabs
   - radial-gradient(at 50% 85%, #355E34 25%, #11110D 100%)
11. Two product cards
   - Desktop: 539x565 radius 40px
   - Phone: stacked 358x542
   - Image top 303px, cover
12. Gartner band
   - Desktop: full bleed 760px
   - Phone: stacked
   - Chart 539x584, square corners
13. Testimonial
   - Desktop: card 1102x518 radius 40px
   - Phone: card 358x653 radius 20px
   - Stats strip rgba(17,17,13,0.5) over the image bottom
14. Integrations split
   - Desktop: image 539x436
   - Phone: stacked
   - Logos_Marketplace.png
15. Additional resources
   - Desktop: 258x379 radius 16px
   - Phone: horizontal scroll
   - Eyebrow with 16px icon; Learn more link
16. Pricing card
   - Desktop: 1102x247 radius 40px
   - Phone: 358x346
   - Centred
17. Final CTA + FAQ
   - Desktop: 296px + 263px, one continuous Fern field
   - Phone: stacked full-width buttons
   - Rules rgba(255,255,255,0.13) beside View FAQs
18. Footer
   - Desktop: 1132px tall
   - Phone: accordions
   - Rules 1px #42433E

## Page anatomy

How Zendesk's own landing pages are built, part by part (observed; https://www.zendesk.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Licorice #11110D bar, 58px tall desktop (146px phone), centred row: bold "AI Summit 2026" 14px 700 white, 34px gap, message 14px/19.6px 400 white, then "Register now" 14px 600 white with a 1px white underline; 32px close X (white, 2px stroke) at right x 1392
- desktop: padding 16px 48px; items centred on one line: title x 177, message x 318-1160, link x 1186
- phone: stacked and centred: title 13px 700, message 13px/18.2px in 3 lines, Register now link; X at x 342 vertically centred
- ground: #11110D

**Navigation**
- summary: Licorice announcement bar, then a white two-row header: utility links top right, Zendesk primary logo (symbol over wordmark) at left, five centred menu items, Matcha "Try for free" and ghost "View demo" at right.
- ground: #FFFFFF at 90% opacity (rgba(255,255,255,0.9)), sticky; a fine 1px light grey rule (about #D5D5D2) along its bottom edge
- height: 110px desktop (y 58-168, under the 58px announcement bar); 60px phone (y 146-206)
- border: 1px light grey bottom rule (rendered, about #D5D5D2)
- logo: variant Primary logo, Licorice: Z symbol stacked over the "zendesk" wordmark; px 84x60 (svg viewBox 78.4x56); position x 24, y 87 (vertically centred in the 110px header, sitting lower than the utility row); file https://www.zendesk.com/company/brand-guidelines/
- links: count 5; labels Platform, Products, Solutions, Resources, Pricing; dropdowns 12px chevron-down 8px after the label on all but Pricing; size 16px/23px; weight 600 (Figtree 640); color #11110D; alignment centred group at x 377-922, baseline row y 128; about 34px between items
- utility: Row at y 64-85, right-aligned ending x 1412: person icon + "Sign in", phone icon + "Contact us", globe icon + "Language" (14px/21px 400 #11110D, 16px line icons, 28px between)
- actions:
  - Try for free: Matcha #D1F470 fill, #11110D 16px/23px 600 text, radius 16px, padding 10px 16px, 114x43 at x 1176 y 106
  - View demo: ghost, 1px rgba(17,17,13,0.32) ring, radius 16px, 115x43 at x 1301 y 106, 12px after Try for free
- sticky: the 110px header is sticky (stays at top while scrolling); the announcement bar scrolls away
- phone: shows wordmark-only "zendesk" logo (no symbol, file zendesk-wordmark.svg) about 84px wide, vertically centred, at x 16; Matcha "View demo" button 115x43 at x 217 (the primary on phone is View demo); 32px hamburger (3 lines, #11110D) at x 344; menu hamburger opens a full-screen menu with the same five items as accordions; cta View demo stays visible

**Hero**
- summary: An inset, rounded photo hero: a warm, sunlit photo of a woman in green headphones fills a 1408x772 card with 32px corners, darkened on the left; white type sits in the left half; a two-bubble chat overlay floats bottom right.
- desktop: section card x 16-1424 (16px inset from the viewport on both sides), y 184-956 (16px below the header), height 772, border-radius 32px, overflow hidden, ground #11110D under the photo; photo PLACE THE IMAGE Hero-image_V01.jpg as background-size cover, background-position 50% 50% (the woman sits in the right half, face around x 960-1150, green headphones at x 1100-1290); overlay an ::after layer inset 0: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 60%); this is what darkens the left side behind the copy; text column x 169 (153px inside the card), width 656; content block vertically centred in the card; vertical anchors eyebrow y 368; H1 y 395-609 (3 lines); lead y 633; trial line y 688; email form y 723-771; headline breaks 3 lines exactly: "Automate up to 80%" / "of interactions with" / "Zendesk AI agents."; form input 430x48 at x 169 (white, radius 12px, inset 1px #D5D5D2 ring, placeholder "Enter work email" 15px, 12px padding) + "Try for free" primary 150x48 at x 619 (20px gap); trial line 16px white circle with a Licorice check, 4px gap, "14-day free trial." 14px 700 white then " No credit card required." 14px 400 white; chat overlay PLACE THE IMAGE Hero_Homepage__en_us.png (890x910 transparent PNG, two white chat cards with soft shadows: a customer bubble and an AI agent card with two green checks) at width 300px, right edge at x 1330, bottom edge at y 950 (box about x 1030-1330, y 642-950). It is Zendesk's own static fallback for the animated chat; the live animation cycles through different bubbles; controls 36px white circle pause button with a Licorice pause glyph at x 1374 y 834 inside the card (bottom right); separately the fixed chat launcher (see Chat launcher section); cta size 150x48
- phone: order text first on WHITE (no photo behind): eyebrow, H1, lead, trial line, full-width input, full-width Try for free; then the photo as its own rounded card below; alignment left, 16px gutter; sizes eyebrow 12px/15.6px 700 #11110D y 246; H1 43px/45.2px 500 #11110D in 5 lines ("Automate up to / 80% of / interactions with / Zendesk AI / agents.") y 270-496; lead 15px/21.75px y 520 (2 lines); trial line 13px y 595 with a Licorice check circle; input 358x48 y 630; Try for free 358x48 y 698; photo card x 16 y 794, 358x396, radius 32px, Hero-image_V01.jpg cover with background-position about 75% 50% (her face against the right edge, the phone near the lower centre, warm empty space at left for the chat cards), with Hero_Homepage__en_us.png 269x350 contain at x 61 y 844 over it
- at rest: Static: the chat overlay shows the two cards in Hero_Homepage__en_us.png. No privacy line is visible under the form in the resting screenshot; do not draw one.
- media: Hero-image_V01.jpg (1766x1176) + Hero_Homepage__en_us.png overlay
- type: eyebrow 14px/18.2px 700 uppercase +0.75px #F5F5F2 "AI-POWERED CUSTOMER SERVICE PLATFORM"; H1 68px/71.4px 500 #F5F5F2; lead 16px/23.2px 400 #FFFFFF
- cta: email capture + Matcha "Try for free"
- proof: none in the hero; the logo band follows

**Customer logo band**
- summary: White band: a two-line eyebrow at left and eight monochrome Licorice customer logos in one row.
- ground: #FFFFFF
- desktop: band y 956-1180 (224px), padding 88px 0; label "22,000+ SERVICE TEAMS TRUST ZENDESK AI" eyebrow 14px/18.2px 700 uppercase #11110D, max width 258 (2 lines) at x 169 y 1050; logos 8 logos 48px tall in one row from x 451 to 1271, about 32px apart: Siemens 87, GitHub 55, Uber 51, Box 41, Vimeo 70, Lush 69, Tesco 82, Discord 140 (widths px); vertically centred on the label
- phone: band y 1190-1503, padding 48px 0; label one line centred 12px; logos 56px tall, centred rows of 4 (Siemens, GitHub, Uber, Box), 3 (Vimeo, Lush, Tesco), 1 (Discord), 12px row gap
- anatomy:
  - Logos are flat Licorice #11110D marks on white; files Siemens_Default.png, Github_Default.png, Uber_Default.png, Box_Default.png, Vimeo_Default.png, Lush_Default.png, Tesco_Default.png, Discord_Default.png (each 112px tall at 2x, draw at 48px tall)
  - No dividers, no carousel motion at rest

**Event card (AI Summit)**
- summary: A 40px-radius Fern card split in two: a Shamrock text panel and a Fern countdown panel at left, a two-speaker photo at right.
- ground: #FFFFFF
- desktop: band y 1180-1850, padding 88px 0; card x 169 y 1268, 1102x494, radius 40px, overflow hidden, fill #203524; left top x 169-830, y 1268-1596 (661x328), fill #2D4C33, padding 32px: lockup image AI-Summit-26-lockup-horizontal.png 550x40 at x 201 y 1300; body 16px/23.2px #FFFFFF in 3 lines (w 597) at y 1367; "DIGITAL EVENT" eyebrow 14px 700 #D1F470 y 1455; "NOVEMBER 12, 2026" eyebrow #F5F5F2 y 1481; Register now primary 150x48 at y 1516; left bottom y 1596-1763 (167px), fill #203524: "Secure your spot" 26px/32.5px 500 #F5F5F2 at y 1628; three countdown tiles 188x54 at x 201, 405, 610 (16px gaps), y 1676, radius 8px, fill #2D4C33 with a 1px border drawn as a gradient (to left bottom, rgba(255,255,255,0.2), #FFFFFF, #FFFFFF, rgba(255,255,255,0.2)); digits 32px/32px 300 #FFFFFF centred; right x 830-1271 (441x494) CountdownSpeakers.jpg as background cover, no radius of its own (clipped by the card)
- phone: card x 16 y 1551, 358x834, radius 40px; order Shamrock panel (350px: lockup 310x22, body 15px 6 lines, eyebrows 12px, Register now full width 294x48), speakers image 358x269, Fern countdown panel (216px: title 22px, tiles 147x54 two across then one 310x54 full width)
- anatomy:
  - Countdown at rest shows "12d", "2h", "39m" (a live countdown to November 12, 2026; print exactly these three values)
  - The lockup image is white "AI Summit" with a superscript "26" and "a zendesk event" in white; place the file, do not typeset it

**Platform intro and timeline cards**
- summary: Centred H2 with one word in green, a lead and a Matcha button; below, three translucent 40px cards stacked down the page, threaded on a thin vertical grey connector line, each with a title at left and a product illustration at right.
- ground: #FFFFFF
- desktop: band y 1850-3759; h2 "AI that gets smarter with every resolution." 42px/48.3px 500 #11110D centred, max width 727 at y 1938, 2 lines ("AI that gets smarter with every" / "resolution."); the word "smarter" in #70A32A; lead 16px/23.2px #11110D centred, 2 lines, max 727, y 2059; button Explore the platform primary 212x48 centred at y 2145; connector 2px wide vertical line at x 719-720, rendered #D7D7D7, from y 2265 (fading in from white over the first 60px) down through all three cards to y 3680 (fading out after the last card); it runs behind the cards and shows in the gaps; cards 3 cards x 169 w 1102 h 322, tops at y 2365, 2823, 3281 (136px gaps), radius 40px, fill rgba(17,17,13,0.05) (renders about 95% white on white), 1px solid rgba(17,17,13,0.11) border, padding 40px; card inside title 26px/32.5px 500 #11110D at x 210, top padding 41px, max width 425 (2 lines each: "Every conversation / becomes a learning signal", "Zendesk AI turns signals / into improvement", "Faster resolutions. Stronger / loyalty. Better outcomes."); illustration box x 720-1230 (510x240) at the card top + 41px, image object-fit contain, centred
- phone: h2 30px/34.5px centred 2 lines; lead 15px 4 lines; button full width 358x48; cards 358x315 radius 40px, 160px apart; title 22px/27.5px at 24px padding; illustration 308x154 below the title
- anatomy:
  - Illustrations: RLL_ProductImagery_01__en_gb.png (chat: customer asks about a return, AI agent hands off), RLL_ProductImagery_02__en_gb.png ("Fill knowledge gaps" panel with two topic rows and blue "Generate article" buttons), RLL_ProductImagery_03__en_gb.png (customer asks to return an item; AI agent answers). Transparent PNGs; place them, never redraw
  - Cards carry no buttons, no shadow

**Stats row**
- summary: A centred two-line statement and three big green numbers with small labels.
- ground: #FFFFFF
- desktop: band y 3759-4204, padding 88px 0; h3 "Trillions of data points turned into billions of successful outcomes." 26px/32.5px 500 #11110D centred, max 727, 2 lines, y 3847; stats three columns of the 1102 container (centres x 352, 720, 1087), numbers 72px/72px 500 #70A32A at y 4003, labels 16px/23.2px 400 #11110D centred at y 4093; values "22K+" AI customers, "830M" AI interactions, "4.8B" Resolutions delivered (final values of an odometer roll-up; print them static)
- phone: stats stacked and centred, numbers 56px/56px, labels 15px, 182px pitch (y 4445, 4627, 4809)
- anatomy:
  - No cards, no icons; just type

**Forethought split**
- summary: Two columns: eyebrow with a Matcha NEW chip, H2, body and two buttons at left; a black rounded card with the Zendesk + Forethought logos at right.
- ground: #FFFFFF
- desktop: band y 4204-4714, padding 88px 0; left x 169 w 515: eyebrow "ZENDESK + FORETHOUGHT" 14px 700 at y 4305 with chip "NEW" (Matcha, radius 4px, 51x23) 12px after; H2 42px/48.3px "Standalone AI agents for / any platform" at y 4336; body 16px 3 lines y 4456; buttons y 4566: "Request Forethought demo" primary 271x48 + "Learn more" ghost 136x48, 12px gap; right Photo_ZendeskForethought.png at x 826 y 4292, 445x334, radius 40px, object-fit cover (the file is the Licorice card with both white logos and a thin divider)
- phone: order eyebrow, H2 30px 2 lines, body 15px 4 lines, both buttons full width stacked (12px gap), image 358x269 radius 40px
- anatomy:
  - Column text block vertically centred on the image

**Open Service Directory banner**
- summary: A Fern 40px-radius banner: a square thumbnail, a title with body, and a Matcha button at right.
- ground: #FFFFFF
- desktop: band y 4714-5162; card x 169 y 4802, 1102x272, radius 40px, fill #203524; thumb OSD-blog.png 144x144 radius 16px at x 265 y 4866; text x 441 w 456: "Introducing Open Service Directory" 26px/32.5px 500 #F5F5F2 at y 4883 (1 line), body 16px/23.2px #FFFFFF 3 lines; button "Read the announcement" primary 246x48 at x 929, vertically centred (y 4914)
- phone: card 358x470, padding 32px 24px, everything centred: thumbnail 144, title 22px 2 lines, body 15px 4 lines, button full width 310x48
- anatomy:

**Dark platform panel with tabs**
- summary: A near-black panel lit from below by a green radial glow: centred H2, lead and two buttons, then a tab list at left and a product screenshot with caption at right.
- ground: gradient
- desktop: band section x 145-1295 (1150 wide, 24px wider than the container each side), y 5162-6185 (1023 tall), radius 16px, background radial-gradient(at 50% 85%, #355E34 25%, #11110D 100%); h2 "Designed for AI-first customer / service" 42px/48.3px 500 #F5F5F2 centred at y 5250; lead 16px #FFFFFF centred 2 lines, y 5371; buttons Try for free primary 132x48 + Learn more ghost (white label, rgba(255,255,255,0.32) ring) 136x48, centred, y 5457; tabs panel x 185 y 5569, 1070x528, radius 16px, fill rgba(17,17,13,0.18), overflow hidden; tab list left column 250 wide, 5 rows 106px tall, each with a 1px rgba(255,255,255,0.1) bottom border; labels 16px/22.4px 600 #FFFFFF at x 209, 2 lines in about 160px: "Manage high volume autonomously", "Launch in minutes, not months", "Scale without adding headcount", "Trust every AI-driven resolution", "Modernize voice with Agentic AI". Active row (first) fill rgba(17,17,13,0.32) with a 2px #D1F470 (Matcha) bar on its right edge; inactive rows fill rgba(17,17,13,0.11), labels at 70% white; content image ProductImagery_AIAgent_Messaging_CustomEntityIntent__en_us.png contain in 464x348 at x 613 y 5604 (phone mock with a chat and a soft green glow); caption 16px/23.2px #FFFFFF centred, 3 lines, w 464, y 5977
- phone: section x 0-390, radius 16px, same radial gradient; tabs accordion: 5 rows 62px tall, 1px rgba(255,255,255,0.1) dividers, label 15px 600 left, 21px chevron right; the open row has a 2px #D1F470 top line and shows its image 287x215 and caption 15px; buttons full width 319x48 stacked
- anatomy:
  - Other tab images (shown when each tab is active): ProductImagery_AIAgentBuilder_AIAgent_ProductImagery__en_us.png, ProductImagery_AIAgents_Insights__en_us.png, ProductImagery_QualityAssurance_AIAgent_ProductImagery__en_us.png, ProductImagery_Intent_VoiceAIAgents__en_us.png
  - At rest only the first tab is active

**Two product cards**
- summary: Centred H2 above two Sesame cards side by side, each with a dark product image on top, a title, body and two buttons.
- ground: #FFFFFF
- desktop: band y 6185-7111, padding 88px 0; h2 "Extend the power of AI-first service / across your entire organization." 42px/48.3px centred, max 727, y 6273; cards 2 cards 539x565 at x 169 and 732 (24px gap), y 6458, radius 40px, fill #F5F5F2, overflow hidden; card image top 539x303 object-fit cover: ProductImagery_EmployeeService__en_us.png and ProductImagery_ContactCenter__en_us.png (dark green glow scenes with white UI); card body padding 32px: title 26px/32.5px 500 at y +335 ("Employee Service", "Contact Center"); body 16px 3 lines; buttons at y +485: "Try for free" primary + "Learn more" ghost; "Contact sales" primary + "Learn more" ghost
- phone: cards stacked 358x542, 48px apart; image 358x201; title 22px; buttons full width 310x48 stacked
- anatomy:

**Gartner report band**
- summary: Full-bleed Fern band: eyebrow, title, body and button at left; a white Magic Quadrant chart at right.
- ground: #203524
- desktop: band y 7111-7871 (760px), padding 88px 0, full width; left x 169 w 421, vertically centred: "REPORT" eyebrow 14px 700 #F5F5F2 y 7334; title 26px/32.5px 500 #F5F5F2, 4 lines, y 7360; body 16px #FFFFFF 2 lines y 7514; "Read the report" primary 171x48 y 7600; right Blockframe_GartnerMQ2025_Graph-1.png at x 732 y 7199, 539x584, no radius, object-fit cover (white chart card)
- phone: order eyebrow 12px, title 22px 4 lines, body 15px, button full width, chart 358x388
- anatomy:

**Testimonial carousel**
- summary: Centred H2 and lead, then one big Sesame card: customer logo, bold quote, name and role, a text link, arrow controls; at right a square video still with a translucent stats strip.
- ground: #FFFFFF
- desktop: band y 7871-8756; h2 "Built for businesses of all sizes" 42px centred y 7959; lead 16px centred y 8031; card x 169 y 8150, 1102x518, radius 40px, fill #F5F5F2, padding 32px; left Vimeo_Large.png 160x45 at x 201 y 8182; quote 16px/23.2px 600 #11110D, w 463, 3 lines, y 8247, with curly quotes (published opening, the part we may quote: “There’s a wealth of information in these AI agent conversation logs.”; the site continues for two more lines about using them for support, product and strategy; paraphrase that or end the quote there); name "Noah Kardos-Fein" 16px 700 y 8341; role "Director of Digital Support at Vimeo" 16px 400 y 8368; "Read customer story" text link 16px 600 with underline y 8409; controls prev and next: 56px circles (render #EAEAE7 on Sesame) with 24px Licorice arrow icons at x 193 and x 347, y 8588; between them 4 dots 6px, 14px apart: first filled #11110D, others 1px rgba(17,17,13,0.18) ring; right Vimeo_Image_Testimonials_2x.png 454x454 at x 785 y 8182, radius 20px; stats strip over its bottom 143px: flat even fill rgba(17,17,13,0.5) (reads as a dark green strip over the green photo; no visible blur banding), radius 0 0 20px 20px; two stats centred in halves: "36%" and "30-40%" 40px/40px 500 #F5F5F2 (the % sign at 26px), labels "increase in AI agent volume", "automation rate" 16px 600 #F5F5F2, each in a 195px-wide centred box so the first wraps to 2 lines
- phone: card 358x653, radius 20px, centred content: logo 310x45, image block with stats first, then quote 15px 600 centred, link, controls centred
- anatomy:
  - The quote is the customer's own words; reproduce exactly as published on zendesk.com or use your own customer

**Integrations split**
- summary: H2, body and one Matcha button at left; a grid of partner app tiles fading at top and bottom at right.
- ground: #FFFFFF
- desktop: band y 8756-9368, padding 88px 0; left x 169 w 421: H2 "Connect your ecosystem. / Your way." 42px y 8923; body 16px 3 lines y 9044; "Learn more" primary 136x48 y 9154; right Logos_Marketplace.png at x 732 y 8844, 539x436, object-fit cover (3 columns of white app chips with soft shadows; top and bottom rows faded)
- phone: order H2 30px, body, button full width, image 358x290
- anatomy:

**Additional resources**
- summary: Left-aligned H2 and four equal Sesame cards, each a photo or render on top and a typed eyebrow, title and text link below.
- ground: #FFFFFF
- desktop: band y 9369-10061, padding 88px 0; h2 "Additional resources" 42px left at x 169 y 9457; cards 4 cards 258x379 at x 169, 451, 733, 1015 (24px gaps), y 9593, radius 16px, fill #F5F5F2, 1px transparent border; card inside image 256x192 cover at top (inset 1px): Resources_Product_Platform.png, Resources_Report_CX_Trends.png, Resources_Guide_Zendesk_AI.png, Resources_Article_Customer_Support.png; then padding 24px: 16px line icon + eyebrow 14px 700 uppercase ("PRODUCT" + Matcha "FEATURED" chip, "REPORT", "GUIDE", "ARTICLE") at y 9818; title 16px/23.2px 600 ("A powerful, flexible platform", "CX Trends 2026", "Zendesk AI: the service superpower", "What is customer support?"); "Learn more" text link 16px 600 underlined, aligned across cards at y 9913
- phone: cards horizontal scroll row: same 258x370 cards at 274px pitch starting x 16; the second card shows partly
- anatomy:

**Pricing card**
- summary: One centred Sesame card: H2, lead, primary and ghost buttons.
- ground: #FFFFFF
- desktop: band y 10060-10483; card x 169 y 10148, 1102x247, radius 40px, fill #F5F5F2; inside H2 "Pricing built for your success" 42px centred y 10180; lead 16px centred 2 lines max 695 y 10253; "See plans & pricing" primary 201x48 + "Calculate your ROI" ghost 193x48 centred y 10315
- phone: card x 16, 358x346 radius 40px, padding 24px; H2 30px 2 lines; buttons full width 310x48 stacked
- anatomy:

**Final CTA band**
- summary: Full-bleed Fern band with a small green AI icon before a one-line H2 and two buttons, all centred.
- ground: #203524
- desktop: band y 10483-10779 (296px), padding 88px 0; h2 ai-agent-sparkle-icon.png 42x42 at x 388 then "Launch your first AI agent today" 42px 500 #F5F5F2 centred at y 10571; buttons Try for free primary 132x48 + Get a demo ghost (white) 136x48 centred, y 10643
- phone: h2 30px centred 2 lines with the 30px icon before the first word; buttons full width 358x48 stacked
- anatomy:
  - The icon is a green gradient sparkle-plus-headset glyph; place the file

**FAQ band**
- summary: Same Fern band continues: "Need to know more?" centred and a "View FAQs" toggle between two hairlines; collapsed at rest.
- ground: #203524
- desktop: band y 10779-11042 (263px), padding 88px 0, no visible seam with the band above; title "Need to know more?" 26px/32.5px 500 #F5F5F2 centred y 10867; toggle "View FAQs" 18px 600 #FFFFFF with a 24px chevron-down, centred at y 10926; two 1px rgba(255,255,255,0.13) rules 448px long either side at y 10939 (x 169-617 and x 824-1272)
- phone: title 22px centred; toggle centred, no side rules
- anatomy:
  - At rest the accordion is closed: draw no questions

**Chat launcher**
- summary: Zendesk's own messaging launcher, fixed at bottom right on every screen.
- ground: #11110D
- desktop: launcher fixed 64x64 circle #11110D at right 16px, bottom 16px (x 1360 y 820 in a 900-tall viewport), box-shadow 0 20px 30px rgba(23,73,77,0.15), white 36px speech-bubble icon
- phone: launcher same 64px circle at x 310, bottom right
- anatomy:

**Footer**
- summary: Licorice footer: five link columns, a hairline, a big "How can we help? Contact us." line with social icons at right, a second hairline and a legal row.
- ground: #11110D
- anatomy:
  - Band y 11042-12174; content in the 1102px container from x 169; top padding 94px
  - Columns at x 169, 394, 619, 845, 1070 (225px pitch, 201px wide); headings 16px/23.2px 600 #F5F5F2 at y 11136; links 14px/21px 400 #FFFFFF, 40px pitch starting 43px below the heading; no underline at rest
  - Products: Pricing, Zendesk for customer service, Zendesk for employee service, Zendesk for contact center, Integrations, System status, Sign in, Demo, Zendesk for Enterprise, Zendesk for Small Business, Zendesk for Startups
  - Features: AI agents, Specialized AI agents, Copilot, Zendesk AI, Messaging and live chat, Advanced Data Privacy and Protection (2 lines), Knowledge base, Ticketing, Voice, Community forums, Reporting and analytics, Workforce management, Quality assurance, Live chat, Client portal
  - Resources: Help center, Security, API and developers, Blog, AI research, Events and webinars, Customer stories, Academy, Partners, Professional services, Trial experience & FAQs
  - Company: About us, Newsroom, What is Zendesk?, Careers, Inclusion & Belonging, Accessibility Plan, Sustainability report, Zendesk Foundation, Zendesk Ventures, Legal; then a second heading Compare at y 11576: Zendesk vs. Intercom, Zendesk vs. Salesforce, Zendesk vs. Freshdesk
  - Popular topics: CX Trends 2026, Product updates, Join our research panel, Customer service software, Help desk ticketing software, Live chat software, Forum software, Help desk software, Client portal software, Knowledge base software, Top AI agents
  - 1px #42433E rule across the container at y 11864
  - "How can we help? " 42px/48.3px 500 #F5F5F2 + "Contact us." 42px 600 #D1F470 with a 2px #D1F470 underline, at x 169 y 11929
  - Social icons right-aligned ending x 1271, y 11942: X, Facebook, LinkedIn, YouTube, Instagram, TikTok, white, 32px tall (YouTube 40 wide), 48px pitch (files social-x.svg, social-facebook.svg, social-linkedin.svg, social-youtube.svg, social-instagram.svg, social-tiktok.svg)
  - 1px #42433E rule at y 12051
  - Legal row y 12116, 14px 400 #FFFFFF, 12px apart: Terms of Use, Privacy Notice, Cookie Notice, Cookie settings, Trust Center, then "© 2026 Zendesk, Inc."; band ends y 12174
  - No logo, address or phone number in the footer
- phone: Contact line centred 30px on 2 lines ("How can we help?" / "Contact us."), socials centred row (48px pitch), then a 1px rule and six accordion rows (15px 600 #F5F5F2 heading at x 32, 22px chevron at x 336, 1px #42433E dividers, 62px rows); the first (Products) is open showing its links in a 2-column grid (x 32 and 201, 14px/17.5px, 32px row pitch); legal links centred on 2 lines

**On dark grounds**
- secondary button: ghost with #FFFFFF label and 1px rgba(255,255,255,0.32) ring; hover fill rgba(255,255,255,0.07)
- primary button: still Matcha #D1F470 with #11110D text
- link: #FFFFFF with 1px white underline; footer links no underline
- headline: #F5F5F2 (Sesame), never pure white
- body: #FFFFFF
- muted text: none: dark grounds use #F5F5F2 and #FFFFFF only
- hairline: #42433E on Licorice; rgba(255,255,255,0.1-0.13) on Fern and the gradient panel
- logo variant: white wordmark/primary logo (zendesk-logo-white.svg) where a logo sits on dark; the homepage never puts the logo on dark

## Components

- **button primary** (observed): fill #D1F470, text #11110D, radius 16, height 48, padding 10px 20px, padding x 20, font size 18, weight 640, face body, text style 18px/28px Vanilla Sans 600 (Figtree 640), example Try for free 132x48; Explore the platform 212x48. Matcha fill with Licorice text on every ground, light or dark. Nav size: 43px tall, padding 10px 16px, 16px/23px
  - hover (observed): text rgba(17,17,13,0.7), overlay ::before fill rgba(17,17,13,0.05), transition 0.6s cubic-bezier(0.7, 0, 0.3, 1)
  - focus (observed): outline 2px solid rgba(17, 17, 13, 0.47), outline-offset 3px
- **button secondary** (observed): fill none, text #11110D, radius 16, height 48, padding 10px 20px, padding x 20, font size 18, weight 640, face body, ring px 1, ring #11110D, ring alpha 0.32, example Learn more 136x48; View demo (nav) 115x43. Ghost: transparent with a 1px rgba(17,17,13,0.32) ring (drawn by ::before). On dark grounds the label is #FFFFFF and the ring rgba(255,255,255,0.32); hover fill rgba(255,255,255,0.07). Always sits right of a primary, 12px gap
  - hover (observed): text rgba(17,17,13,0.7), overlay rgba(17,17,13,0.05)
- **text link** (observed): text #11110D, font size 16, weight 640. Inline CTA ("Read customer story", resource "Learn more", announcement "Register now"): 1px underline 2-3px below the baseline in the text colour at rest; on hover the text goes to 70% and the underline sweeps (background-size 250% 1px moving 100% -> 0% over 0.6s cubic-bezier(0.7, 0, 0.3, 1))
- **input** (observed): fill #FFFFFF, radius 12, height 48. inset 0 0 0 1px #D5D5D2 ring, padding 12px, placeholder "Enter work email" 15px #11110D-ish grey
- **card** (observed): fill #F5F5F2, radius 40. Big content cards (event, timeline, product pair, testimonial, pricing, OSD) are radius 40; resource cards radius 16; testimonial image radius 20; no shadows anywhere
- **chip** (observed): fill #D1F470, text #11110D, radius 4. "NEW" / "FEATURED": 14px 700 uppercase +0.75px, height 23px, padding 4px 8px, placed 12px after an eyebrow

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| standard | cubic-bezier(0.7, 0, 0.3, 1) | 600ms | button and link colour fades and the underline sweep on hover (observed computed transition on every CTA) | observed |
| overlay | linear | 100ms | button ::before fill and border on hover | observed |
| baseline-animation-kit |  |  | Video and motion work starts from Zendesk's Baseline Animation Kit (a Google Slides link on the brand page); its contents are not public | published |

## Icon tokens

Grid grid-based (size not published), stroke not published for brand icons; Garden product icons are stroke by default, fill for selected states (published).
| Name | Size | Use |
|---|---|---|
| product-default | 16px | Garden default UI icon |
| product-compact | 12px | Garden compact spaces |
| product-illustration | 32px | Garden: scaled 16px icons for illustration only |

## Signature moves

### Matcha on Licorice

Where: every primary call to action, chips and the one accent link per page.
Do: Matcha #D1F470 fill with Licorice #11110D text on every ground, light or dark, radius 16px. The guide calls Matcha an accent to use intentionally: it marks the action and almost nothing else, so the page reads black, white and green-black with one bright green button per group. One Matcha primary per button group.
Don't: use Matcha for large areas, body text, or as a background; never white text on Matcha.
Example: "Try for free".

### Soft 40px containers

Where: content cards, event card, banners, image frames.
Do: Large rounded rectangles (40px radius at desktop and phone, 32px on the hero, 16px for small cards) in Sesame, Fern or a 5% Licorice tint with a hairline; flat, no shadows. The guide's own imagery uses the same soft-cornered frames.
Don't: add drop shadows or sharp corners to content cards.

### Fern and glow-green dark bands

Where: report, final CTA, event card, product panels.
Do: Dark sections are green-black, not neutral: flat Fern #203524 bands, Shamrock #2D4C33 panels, and a radial glow from #355E34 into Licorice at the bottom centre of product panels. Headlines on them are Sesame #F5F5F2.
Don't: use cold greys or blue-blacks for dark bands.

### People with a floating conversation

Where: hero and brand imagery.
Do: A warm, natural-light photo of one person, with white chat cards (avatar, name, short message; an AI agent card with green checks) floating over a corner. The guide: photography shows moments of connection made possible because something was resolved; product imagery shows capabilities in action.
Don't: use stock poses, abstract tech art or screenshots without people in the hero.

### One green word

Where: section headlines and big numbers.
Do: A single word of a headline (e.g. "smarter") and the stat numbers set in green #70A32A, the rest Licorice. One highlighted word per headline, at most one per section.
Don't: highlight whole lines or use Matcha #D1F470 for text on white (it fails contrast).
Example: "AI that gets smarter with every resolution.", with "smarter" set as color.

## Messaging: rules

The homepage leads with a number and an outcome ("up to 80%", "4.8B+ resolutions") and repeats one idea in every band: AI that improves with every resolution. Sections end on a Matcha action.

Why it works: Resolution is the brand's organising idea on the guidelines page, so the copy keeps returning to resolved problems rather than features.

- Lead with the outcome, then the proof number
- One idea per band, one primary action per band
- "Up to" before any automation percentage

Sources: https://www.zendesk.com/, https://www.zendesk.com/why-zendesk/, https://www.zendesk.com/company/brand-guidelines/

## Voice: rules

Zendesk publishes three feelings for its copy (confident, included, credible) and a three-part rule: brief, focused, human. Its voice card adds five attributes: approachable, modern, trusted, connected, fresh.

Why it works: Service is emotional; copy that sounds calm and human mirrors the experience the product promises.

- Keep it brief, focused and human
- Write for how the reader should feel
- Sentence case headlines and buttons
- Buttons are verbs naming one action
- Zendesk® at first mention in campaign copy
- Don't use jargon or hype
- Don't write long feature lists in headlines

Do and don't:
- Do: "Faster resolutions. Stronger loyalty. Better outcomes.". Brief, focused, human: three short outcomes (homepage).
- Don't: "Revolutionize your omnichannel CX with our best-in-class AI!". Jargon, hype and an exclamation mark.

Real examples, to look at on Zendesk's own pages (not for reuse):
- Voice card from the brand page: the five attributes on Licorice, a Matcha "Contact Sales" button and a customer thank-you bubble: https://www.zendesk.com/company/brand-guidelines/

Sources: https://www.zendesk.com/company/brand-guidelines/, https://garden.zendesk.com/patterns/buttons/, https://garden.zendesk.com/content/

## Logo: rules

Three published variations: the primary logo (Z symbol over the "zendesk" wordmark), the wordmark alone, and the Z symbol alone. The symbol is two shapes, a half-circle-topped triangle pair, read as a Z. On the homepage the primary logo sits top left in the header; on phone only the wordmark shows.

Why it works: The primary logo is called the biggest visual identifier; restricting the symbol keeps the wordmark doing the naming.

|  |  |
|---|---|
| Variations | primary, wordmark, Z symbol |
| Colours | Licorice #11110D or Coconut #FFFFFF |
| Minimum width | 90px primary / 84px wordmark / 50px symbol |
| Clear space | not published |

- Primary logo is the default
- Wordmark alone only where other brand elements already identify Zendesk
- Z symbol alone only in special circumstances, with creative team approval
- Only Licorice or Coconut (black on white, white on black)
- Minimum widths: primary 90px, wordmark 84px, Z symbol 50px
- Co-branding: keep the two logos the same height, separated by twice the Z symbol width with a plus centred between them
- Third-party use needs a license or written permission
- Don't resize disproportionately or distort
- Don't rearrange, rotate or alter the elements
- Don't change the colours or use unapproved variations

Not published: clear space around the logo; print minimum sizes.

Real examples, to look at on Zendesk's own pages (not for reuse):
- Minimum widths for the three variations: https://www.zendesk.com/company/brand-guidelines/
- Logo don'ts: rotated, recoloured yellow, rearranged: https://www.zendesk.com/company/brand-guidelines/
- Co-branding spacing built from the Z symbol: https://www.zendesk.com/company/brand-guidelines/
- Licorice on Coconut and Coconut on Licorice: https://www.zendesk.com/company/brand-guidelines/

Sources: https://www.zendesk.com/company/brand-guidelines/

## Color: rules

A black-and-white foundation (Coconut, Licorice) with one bright accent (Matcha) and five secondary colours: two deep greens (Fern, Shamrock), a soft green (Cactus), a soft yellow (Pineapple) and an off-white (Sesame). The homepage uses Coconut grounds, Sesame cards, Fern and Licorice dark bands and Matcha only on buttons and chips.

Why it works: Black and white leave room for photography of people; Matcha marks resolution, the brand's core idea, and recalls the original Zendesk green.

|  |  |
|---|---|
| Coconut | #FFFFFF |
| Licorice | #11110D |
| Matcha | #D1F470 |
| Fern | #203524 |
| Shamrock | #2D4C33 |
| Cactus | #A1D78F |
| Pineapple | #FEEB7E |
| Sesame | #F5F5F2 |

- Coconut is the default canvas
- Licorice for text and contrast
- Matcha as an intentional accent only
- Secondary colours create hierarchy close to the core palette
- Text on Matcha is Licorice
- Don't flood a layout with Matcha
- Don't use Matcha text on white
- Don't use Pineapple or Cactus for text

Not published: proportions or ratios; contrast pairings; a muted text colour.

Do and don't:
- Do: "Try for free". Matcha button with Licorice text: the accent marks the action.
- Don't: "Resolve more, faster". Matcha text on white has too little contrast; Matcha is a fill, not an ink.

Sources: https://www.zendesk.com/company/brand-guidelines/, https://garden.zendesk.com/design/color/

## Typography: rules

The brand page does not publish a typeface. The site sets everything in Vanilla Sans, a proprietary geometric-humanist sans: headlines 500, body 400, buttons and nav 600, eyebrows 700 uppercase. Headlines are sentence case with no negative tracking.

Why it works: One family at four weights keeps the system quiet so photography and the Matcha button carry the energy.

|  |  |
|---|---|
| Real face | Vanilla Sans (proprietary) |
| Stand-in | Figtree (Google Fonts, OFL), weights mapped up |
| Hero | 68px / 43px phone, 1.05 |
| H2 | 42px / 30px, 1.15 |
| Body | 16px / 15px, 1.45 |

- One family for everything
- Headlines 500 weight, never bold
- Eyebrows 700 uppercase with slight positive tracking
- Sentence case
- Don't use tight negative tracking
- Don't set headlines in bold

Not published: typeface name; type scale; licence.

Sources: https://www.zendesk.com/

## Graphic elements: rules

The guide says simple forms create clarity while gradients and shapes signal the path forward. On the site that means soft 40px rounded containers, Matcha-to-white glows behind brand imagery, white chat cards floating over photos, and glyphs drawn from the Z symbol's half-circles and triangles (the "Z...QK" letter icons on the brand page).

Why it works: The rounded shapes and chat cards make the brand feel like a conversation; the glows add direction without new colours.

- Rounded containers, flat fills
- Gradients as soft glows (Matcha to white, green to Licorice)
- Chat cards as a recurring graphic

Real examples, to look at on Zendesk's own pages (not for reuse):
- Brand page hero collage: letter glyphs, chat card, photo, Matcha panel, type sample: https://www.zendesk.com/company/brand-guidelines/

Sources: https://www.zendesk.com/company/brand-guidelines/, https://www.zendesk.com/

## Iconography: rules

The icon system is built from the primary logo: geometric shapes with rounded and sharp edges, grid-based and precisely spaced, simple enough to be universally recognised, with fresh metaphors. Product UI icons (Garden) are 16px stroke by default, 12px in compact spaces, fill for selected states.

Why it works: Deriving icons from the logo makes even a smile or a sparkle read as Zendesk.

- Build from the logo's geometry
- Grid-based composition
- One clear metaphor per icon
- Garden UI icons: 16px default, 12px compact, 32px only for illustration
- Tooltips on interactive icons

Not published: brand icon grid size and stroke weight.

Real examples, to look at on Zendesk's own pages (not for reuse):
- Brand icons: smiley on its construction grid, sparkle on Fern, a circle on a grid, a Licorice document glyph: https://www.zendesk.com/company/brand-guidelines/

Sources: https://www.zendesk.com/company/brand-guidelines/, https://garden.zendesk.com/design/icons/

## Illustration: rules

Zendesk does not publish an illustration style. Its brand page shows product imagery (UI cards composited with photos) and icon art instead; the homepage uses product UI renders where another brand would use illustration.

- Use product imagery or icons, not drawn illustration

Not published: an illustration style.

Sources: https://www.zendesk.com/company/brand-guidelines/

## Photography: rules

Photography shows people in moments of connection made possible because something was resolved: relatable, compelling stories. The homepage hero is a warm, sunlit portrait (a woman in green headphones on a train); the brand page uses a smiling cyclist with a phone. Natural light, warm tones, a single subject, often holding a phone.

Why it works: Showing the human after the problem is solved sells resolution without showing the software.

- People, not objects
- Moments after something was resolved
- Warm natural light, one clear subject
- Pair with a floating chat card when the story needs the product
- Don't use staged office stock
- Don't show frustration as the main story

Real examples, to look at on Zendesk's own pages (not for reuse):
- Brand page photography example: cyclist smiling at his phone: https://www.zendesk.com/company/brand-guidelines/
- Homepage hero photo: https://www.zendesk.com/

Sources: https://www.zendesk.com/company/brand-guidelines/, https://www.zendesk.com/

## Motion: rules

The homepage animates chat conversations (Rive canvases with static PNG fallbacks), rolls stat numbers up like an odometer, and fades buttons and link underlines over 0.6s on a symmetric ease. Video work starts from Zendesk's Baseline Animation Kit, which is not public.

- 0.6s cubic-bezier(0.7, 0, 0.3, 1) for hover colour and underline
- Provide a static resting state for every animation
- Offer a pause control for looping hero animation

Not published: motion principles, durations or easing.

Sources: https://www.zendesk.com/, https://www.zendesk.com/company/brand-guidelines/

## Interface and layout: rules

A 1102px container with 88px band padding, inset rounded cards and centred section headlines. White bands alternate with Fern bands and big Sesame or Fern cards; the hero is itself an inset rounded photo card.

- Centre section headlines over full-width content
- Two-column splits at 539px halves
- One primary + one ghost button per group

Sources: https://www.zendesk.com/, https://garden.zendesk.com/patterns/buttons/

## Rules: rules

The brand page's do's and don'ts cover colour consistency, minimum sizes, trademark protection and co-branding; Garden adds product rules for buttons and colour.

- Use only Licorice and Coconut for the logo
- Respect minimum logo widths
- License or written permission for third-party logo use
- Use the right versions of both logos when co-branding
- One primary button per view, placed last in a group
- Never rely on colour alone for state; text 4.5:1, icons 3:1
- Don't distort, rotate or recolour the logo
- Don't disable buttons without explaining why

Sources: https://www.zendesk.com/company/brand-guidelines/, https://garden.zendesk.com/patterns/buttons/, https://garden.zendesk.com/design/color/

## Applications

| Format | What | Source |
|---|---|---|
| Brand resources page | Logo, colour, photography, iconography, product imagery and voice summary with download links | https://www.zendesk.com/company/brand-guidelines/ |

## By format

How our engine applies Zendesk's system per format. Our recipe from their rules, not something Zendesk publishes. Level = how much dark green and Matcha the format carries. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Build it the way www.zendesk.com is built (kit.spec.page, homepage voice): Licorice announcement bar, white sticky two-row header with the primary logo, an inset 32px-radius photo hero darkened on the left with a floating chat card, Licorice logo band, 40px-radius Sesame/Fern cards, Fern full-bleed bands, Matcha primary + ghost secondary buttons (radius 16), Licorice footer | which sections and how many cards; a lighter all-white page for simple pages |
| Deck | 2 | Coconut slides with Licorice type, one Fern or Licorice title slide, Matcha only for the key number or call to action, people photography | how many dark slides |
| Social post | 3 | One person photo or a chat card on Fern, sentence-case 500 headline, Matcha accent | photo vs product imagery |
| Email | 1 | White ground, Licorice text, one Matcha button, primary logo top left | a Sesame card for the main offer |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Zendesk: Licorice and white with one Matcha button, soft 40px cards, a warm photo of a person with a chat card.
- **Swap test**: Put another service vendor's logo on it. If the Matcha-on-Licorice action, the Fern bands and the resolution story feel out of place, it is Zendesk enough; if not, it is generic.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Zendesk's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Typeface: not published on the brand page; Vanilla Sans observed on the site, Figtree is our stand-in.
- Type scale, spacing, grid and button specs: not published; all from the homepage measurement (2026-10-31).
- Logo clear space: not published (minimum widths are).
- Colour proportions and contrast pairings: not published.
- The full Creative Guidelines live in a Figma deck linked from the brand page (https://www.figma.com/deck/RQgjYgtqUvPtZBL32CP7Kb); it was not readable without a Figma session and is not used here.
- Garden's content (voice) guidance has moved to an internal Zendesk space.
- Motion principles: only the Baseline Animation Kit link is published; contents not public.
- The homepage uses colours outside the published palette (#70A32A stat green, #355E34 glow); recorded as observed.

Logos and reference images belong to Zendesk. Look at them on Zendesk's own pages; don't reuse them.