Zendesk Design System Deep Dive

1. Brand Overview

Zendesk’s design system is exactly what you’d expect from a mature SaaS company that’s been around the block: confident, clean, and ruthlessly consistent. This is a brand that sells customer service software, but their interface reads more like a modern editorial site than a clunky enterprise dashboard.

The vibe is utilitarian with personality. The palette leans into deep, grounded neutrals (#11110d, #17494d) with sharp accents (#92bf3b, #1eaeDB in hover states). Typography is crisp and human — “Vanilla Sans” everywhere, supported by Arial fallbacks. No trendy variable fonts, no gratuitous display type. They clearly value clarity over ornament.

The system is built on an 8px grid, with occasional oddball values (1px, 3.2px, 5.6px) that hint at micro-alignment tweaks for specific components. Border radii range from tight (2px) to fully rounded (100%), but the bulk of the UI lives in the 4px–16px range — enough softness without going full bubble.

Buttons and CTAs pop with high-contrast fills, hover states that flip color logic, and focus rings that are unapologetically visible. Inputs follow the same pattern — subtle by default, vivid when active. Shadows are minimal and functional; most depth comes from color changes and borders.

If you’re building for Zendesk, the guiding philosophy is: keep it readable, keep it accessible, keep it on-brand. Every token feels intentional. You’ll be hard pressed to find rogue colors or inconsistent spacing. This is a system that’s been stress-tested across dozens of products and markets.

2. Color System

2.1 Primary Colors

The main brand color in UI terms is #17494d — a deep teal that’s used for text, borders, and some button fills. It’s confident and professional without being sterile. Psychologically, teal sits between blue’s trustworthiness and green’s growth — perfect for customer service software.

It’s contrasted with #11110d (near-black) for primary text, and #ffffff for backgrounds and inverse text. Accent greens (#92bf3b) and bright blues (#1eaeDB in hover states) inject energy into calls-to-action.

Compared to competitors like Intercom (pastels) or Salesforce (bright blue), Zendesk’s palette is darker, more grounded. It feels more “enterprise” but with enough accent pop to stay friendly.

2.2 Complete Palette

2.3 Color Relationships

#11110d on #ffffff is high-contrast — easily passes WCAG AAA for body text. #17494d on white also passes comfortably. The accent green #92bf3b on white is borderline for small text but fine for large UI elements.

Dark mode isn’t explicitly defined here, but the palette could invert easily: deep teal or near-black as background, white as text, accent green/blue as highlights.

Hover states often invert foreground/background colors, which can create stark visual changes — intentional for clickability.

2.4 Usage Guide

• Best combos: #17494d text on #ffffff background; #92bf3b fill with #11110d text for CTAs; #1eaeDB hover fills with white text.
• Avoid: Putting accent green on deep teal — low contrast.
• Functional: Keep #000000 for outlines, #555555 for secondary text, and #f5f5f2 for subtle backgrounds.

3. Typography

3.1 Font Families

Primary font: Vanilla Sans, fallback Arial. This is clearly a custom or proprietary font — not on Google Fonts or Adobe Fonts. It’s everywhere: headings, links, buttons, captions.

Secondary: ABC Social appears in some buttons/headings — likely for brand-specific flair. Arial pops up in a couple form elements (fallback scenarios). There’s also WistiaPlayerInter for embedded video player UI, with Helvetica fallback.

No variable fonts. No external font hosts listed — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The scale is wide: giant hero headings at 94px, all the way down to 11px uppercase captions. Weight shifts are used to signal importance — headings can be 400, 500, 600, or 700 depending on context.

Body text seems to sit around 16px–20px, comfortable for reading. Buttons often use 18px — slightly larger than body, making them stand out without screaming.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Most values are multiples of 8px: 8, 16, 24, 32, 72, 104. There are micro-values (1px, 2px, 3.2px, 4px, 5.6px) for borders, icon alignment, and fine-tuned padding.

Frequency shows heavy use of 1px (borders/dividers), 12px (padding inside inputs/buttons), and 16px (component gaps).

4.2 Layout

Breakpoints span from tiny (98px) to huge (1600px). Key ones: 400px, 768px (tablet), 1120px (desktop), 1600px (large desktop). This suggests a responsive system that adapts across small mobile to wide monitors.

No explicit max container widths in data, but given breakpoints, likely around 1120px for main content.

5. Visual Elements

Border Radius System

Values range:

• 1px: micro elements (span)
• 2px: small buttons, cookie settings
• 4px: links, tooltips
• 8px: cards, tooltips
• 12px: inputs, select
• 16px: large buttons, containers
• 20px, 40px: larger rounded blocks
• 100%: circular avatars/testimonials

Most UI sits in 4px–16px. Full rounds (100%) are reserved for avatars or circular buttons.

Shadow System

Minimal shadows. Main one: rgba(17, 17, 13, 0.47) 0px 0px 0px 1px inset — used for inputs to give depth. Occasional large drop shadows (rgba(0,0,0,0.3) 0px 10px 50px 20px) for modals.

No heavy neumorphism or glow. Depth is functional.

Borders & Dividers

1px borders dominate, often in brand colors (#17494d) or semi-transparent black. Some top-only borders (1px 0px 0px) for section dividers.

6. Components

6.1 Buttons

Primary CTA Button

• Default: bg rgb(209, 244, 112) (#d1f470), text #11110d, padding 10px 20px, radius 16px, no border.
• Hover: text white, bg bright blue #1eaeDB, outline rgba(17,17,13,0.47) 2px solid.
• Active: text rgba(17,17,13,0.7), bg rgba(17,17,13,0.11).
• Focus: text white, bg #1eaeDB, outline black 2px solid.

Text Link Button

• Default: transparent bg, text #16140c, padding 12px 12px 0.
• Hover: white text, bg #1eaeDB.
• Focus: same as hover plus black outline.

Cookie Setting Button

• Default: white bg, text #17494d, padding 12px 0, radius 2px.
• Hover: white text, bg #1eaeDB.
• Focus: white text, bg #1eaeDB, black outline.

Dark Teal Button

• Default: bg #17494d, white text, border 1px solid #17494d, padding 12px 10px.
• Hover: white text, bg #1eaeDB.
• Focus: white text, bg #1eaeDB, black outline.

6.2 Links

Variants:

• Blue (#0000ee) underline, hover to #3860be no underline.
• White text, underline invisible, hover to #3860be.
• Near-black text underline invisible, hover to #3860be.
• Accent green text, no underline, hover to #3860be.
• Deep teal text underline, hover to #3860be.

6.3 Forms

Email Input

• Default: bg rgba(17,17,13,0.05), text #11110d, radius 12px, inset shadow in brand color.
• Focus: bg #1eaeDB, white text, black border.

Select

• Default: transparent bg, text #11110d, radius 12px, inset shadow brand color.
• Focus: outline brand color 2px, inset shadow brand color.

6.4 Cards

No explicit card component in data, but given border-radius 8px + shadows, likely minimal bg with inset or subtle drop shadow.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black-near: #11110d;
  --color-black-true: #000000;
  --color-white: #ffffff;
  --color-deep-teal: #17494d;
  --color-off-white: #f5f5f2;
  --color-accent-green: #92bf3b;
  --color-mid-gray: #555555;
  --color-transparent-white: rgba(255,255,255,0.02);
  --color-near-white: rgba(255,255,255,0.992);

  /* Typography */
  --font-primary: "Vanilla Sans", Arial;
  --font-secondary: "ABC Social", Arial;
  --font-video: "WistiaPlayerInter", Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-3-2: 3.2px;
  --space-4: 4px;
  --space-4-8: 4.8px;
  --space-5: 5px;
  --space-5-6: 5.6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-12-992: 12.992px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-72: 72px;
  --space-104: 104px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-40: 40px;
  --radius-50: 50px;
  --radius-60: 60px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-inset-brand: rgba(17,17,13,0.47) 0px 0px 0px 1px inset;
  --shadow-large-drop: rgba(0,0,0,0.3) 0px 10px 50px 20px;
}

8. AI Coding Assistant Prompt

# Zendesk Design System Specification

You are a Zendesk design expert. Build UIs matching their visual language exactly.

## Brand Context
Zendesk's design language is clean, accessible, and grounded. Colors are deep and confident with bright accents. Typography is humanist sans-serif with clear hierarchy. All spacing adheres to an 8px grid, with occasional micro-adjustments.

## Color Palette
- Near Black: #11110d — Primary text, UI chrome
- True Black: #000000 — Focus outlines, borders
- White: #ffffff — Backgrounds, inverse text
- Deep Teal: #17494d — Brand text, buttons, links, borders
- Off-White: #f5f5f2 — Background variant for panels
- Accent Green: #92bf3b — CTAs, success accents
- Mid Gray: #555555 — Secondary text, icons
- Transparent White: rgba(255,255,255,0.02) — Overlays
- Near White: rgba(255,255,255,0.992) — Overlays

## Typography
Fonts:
- Primary: "Vanilla Sans", Arial
- Secondary: "ABC Social", Arial
- Video player: "WistiaPlayerInter", Helvetica

Type scale:
| Level | Size | Weight | Line Height | Use |
| H1 Large | 94px | 400 | 1.00 | Hero titles |
| H1 Medium | 85px | 500 | 1.05 | Page titles |
| H1 Small | 62px | 400 | 1.52 | Section titles |
| H2 | 53px | 500 | 1.15 | Subheadings |
| Body Large | 20px | 400/600/700 | 1.45 | Body text |
| Body Medium | 16px | 400/600/700 | 1.38–1.44 | UI text |
| Caption | 14px | 400/700 | 1.50 | Small annotations |
| Label Small | 11px | 700 | 1.00 | Uppercase labels |

## Spacing & Grid
Base: 8px grid.
Values: 1px, 2px, 3.2px, 4px, 5.6px, 8px, 10px, 11.2px, 12px, 12.992px, 15px, 16px, 20px, 24px, 32px, 72px, 104px.
Map: Button padding 10–20px, card gaps 16–32px, section gaps 72–104px.

## Border Radius
- xs: 2px — small buttons, toggles
- sm: 4px — links, inline UI
- md: 8px — cards, tooltips
- lg: 12px — inputs, selects
- xl: 16px — large buttons
- full: 100% — avatars, circular buttons

## Shadows & Depth
- Inset: rgba(17,17,13,0.47) 0px 0px 0px 1px inset — inputs
- Large drop: rgba(0,0,0,0.3) 0px 10px 50px 20px — modals

## Component Specifications

### Primary Button
Default:
- background: #d1f470
- color: #11110d
- padding: 10px 20px
- border-radius: 16px
- font-size: 18px, font-weight: 600
- no border

Hover:
- background: #1eaeDB
- color: #ffffff
- outline: rgba(17,17,13,0.47) solid 2px

Focus:
- background: #1eaeDB
- color: #ffffff
- outline: #000000 solid 2px

Active:
- background: rgba(17,17,13,0.11)
- color: rgba(17,17,13,0.7)

### Secondary Button (Dark Teal)
Default:
- background: #17494d
- color: #ffffff
- border: 1px solid #17494d
- padding: 12px 10px
- border-radius: 2px

Hover/Focus:
- background: #1eaeDB
- color: #ffffff
- outline: #000000 solid 2px

### Navigation Links
Blue variant:
- default: #0000ee underline
- hover: #3860be no underline

### Input Fields
Email:
- default: bg rgba(17,17,13,0.05), inset shadow brand color, radius 12px
- focus: bg #1eaeDB, color #ffffff, border #000000 solid 1px

Select:
- default: transparent bg, inset shadow brand color, radius 12px
- focus: outline brand color solid 2px, inset shadow brand color

## Layout & Responsive Rules
Breakpoints:
- Mobile: <400px
- Tablet: 768px
- Desktop: 1120px
- Large desktop: 1600px

## Interaction Rules
- Transition: 150ms ease for hover/focus/active
- Focus rings always visible
- Hover states invert fg/bg colors

## DO
- Use only defined palette
- Maintain 8px grid
- Keep border radius consistent per component category
- Make focus outlines visible
- Use Vanilla Sans for all headings and UI text

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Remove focus outlines
- Use shadows excessively

## Code Examples

```css
.btn-primary {
  background: #d1f470;
  color: #11110d;
  padding: 10px 20px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 18px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaeDB;
  color: #ffffff;
  outline: rgba(17,17,13,0.47) solid 2px;
}
.btn-primary:focus {
  outline: #000000 solid 2px;
}
.btn-primary:active {
  background: rgba(17,17,13,0.11);
  color: rgba(17,17,13,0.7);
}

.input {
  background: rgba(17,17,13,0.05);
  border-radius: 12px;
  padding: 12px;
  box-shadow: rgba(17,17,13,0.47) 0px 0px 0px 1px inset;
}
.input:focus {
  background: #1eaeDB;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR — Zendesk’s design system is disciplined, accessible, and grounded in deep neutrals with confident accents. Typography is consistent, spacing is tight on an 8px grid, and interaction states are bold enough to be noticed.

Brand Keywords:

• enterprise-confident
• accessible-bold
• teal-grounded
• humanist-readable