Zendesk

Overview

Zendesk's design system embodies **Pragmatic Minimalism**—a philosophy that strips away ornament to reveal function, while using strategic color accents to guide user attention and action. The brand serves enterprise customer service teams who need clarity under pressure: agents managing high-volume support, managers tracking performance, and customers seeking fast resolution. The visual language is calm, professional, and deliberately restrained; the interface recedes to let data and workflows take center stage. The emotional response is one of competence and control—users feel equipped to handle complexity.

The brand voice is direct, jargon-aware, and solution-focused. Zendesk speaks to practitioners, not to executives; it uses active verbs, concrete nouns, and avoids corporate platitudes. Example sentence in brand voice: 'Route tickets to the right agent in seconds—your team handles the rest.'

Colors

The color system is built on a neutral foundation (white surfaces, dark grays for text) with three strategic accent roles. **Primary (#d1f470)** is a vibrant lime-green used exclusively for call-to-action buttons, progress indicators, and success states—it commands attention without aggression, signaling 'move forward' or 'complete this action.' **Secondary (#3860be)** is a professional blue deployed for links, focus states, and secondary interactions; it conveys trust and stability. **Tertiary (#17494d)** is a deep teal reserved for status badges, secondary containers, and data visualization accents. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5 → #d8d8d8) to create subtle depth without relying on shadows alone. On-surface text is near-

Typography

The type system uses Vanilla Sans (or Arial as fallback) across all scales, prioritizing legibility and consistency over stylistic variation. Display (60px, 700 weight) anchors hero sections and major page titles; Headline-lg (40px, 600 weight) structures primary content areas; Body-md (16px, 400 weight) is the workhorse for form labels, list items, and body copy. Letter-spacing is tight (−0.04em on display, −0.02em on headlines) to reinforce the pragmatic, no-nonsense tone. Line-height is generous (1.5× on body, 1.2× on headlines) to ensure readability in dense data-heavy interfaces. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) when layered over busy backgrounds to maintain contrast without increasing font size. Label-md (14px, 600 weight) is used for

Layout

The layout grid is a 12-column fluid system with a max-width of 1280px, allowing responsive scaling from mobile (single column) to desktop (full grid). Container padding uses the gutter token (24px) on all sides, creating consistent breathing room. Section separation uses lg spacing (40px) between major content blocks, md spacing (24px) between subsections, and sm spacing (12px) between related items. Modal dialogs and cards use a fixed max-width of 896px to prevent content from becoming too wide to scan. The design favors left-aligned text and left-to-right reading flow. Whitespace is treated as a first-class design element: empty space around form fields (12px padding, 16px margin) reduces cognitive load and makes interactive elements feel 'tappable.' Grid gutters are 24px, allowing 2-co

Elevation & Depth

Depth is conveyed through subtle shadows and surface-color shifts rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with background shifted to surface-container-low (#f0f0f0). Level 3 (Modals/Popovers): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with background at surface (#ffffff) and a subtle border at 1px solid #d7d7d7. Focus states use a 3px inset shadow (0 0 0 3px rgba(56, 96, 190, 0.1)) to indicate keyboard focus without breaking the flat aesthetic. Hover states on cards transitio

Shapes

The shape language is **Soft-Technical**—rounded corners are present but restrained, signaling approachability without sacrificing precision. Buttons use lg radius (16px, or 1rem) to feel clickable and inviting; form inputs use md radius (12px, or 0.75rem) to balance friendliness with functional clarity. Cards and modals use xl radius (24px, or 1.5rem) to create a sense of containment and safety around content. Checkboxes and radio buttons use sm radius (4px) or full radius (9999px) respectively, maintaining the technical feel. The rationale: larger radii (xl, lg) are used on primary interacti

Components

Action Elements Buttons are the primary interaction pattern. **Button-primary** (primary color #d1f470, 48px height, 16px padding horizontal, lg radius) is used for main CTAs like 'Start a free trial' or 'Next.' On hover, the background shifts to primary-fixed-dim (#b8d94a) with a 150ms ease transition; on active, it darkens further to #a8c63a. **Button-secondary** (transparent background with rgba(17, 17, 13, 0.11) fill, 48px height, md radius) is used for secondary actions like 'Cancel' or 'Learn more.' On hover, the background becomes surface-container-high (#e2e2e2). **Button-tertiary** adds a 1px border in secondary color (#3860be) for outline-style buttons, useful in modal footers where primary and secondary buttons coexist.

Containers & Surfaces **Card** elements use surfac

Do's and Don'ts

**Do**

• Do use primary (#d1f470) exclusively for main CTAs and success states—never use it for decorative elements or secondary information.
• Do maintain 24px gutter spacing on all sides of containers to ensure consistent breathing room and prevent content from feeling cramped.
• Do apply the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to cards and the lg shadow (0 16px 40px rgba(0, 0, 0, 0.12)) to modals; never mix shadow depths on the same component type.
• Do use Vanilla Sans at 16px body-md for all body copy and form labels; never drop below 14px (label-md) for readable text.
• Do transition button and card hover states over 150–200ms using ease timing; instant color changes feel jarring and unprofessional.

**Don't**

• Don't use secondary (#3860be) or tertiary (#17494d) for primary CTAs—these are reserved for links, focus states, and status indicators.
• Don't apply shadows larger than lg (0 16px 40px) or blur radii exceeding 12px; this breaks the grounded, pragmatic aesthetic.
• Don't use hard corners (0px radius) on any interactive element; the minimum is sm (4px) for utility elements like badges.
• Don't layer text directly over busy backgrounds without applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels.
• Don't mix rounded radii inconsistently—buttons use lg (16px), inputs use md (12px), cards use xl (24px); stick to this hierarchy.