i. Approachable
Approachable
Great technology should feel intuitive. We present our brand in a way that's welcoming, clear, and easy to understand — no jargon, no barriers, just solutions designed for everyone.
Zendesk Brand System
Brand
style guide
Zendesk's AI-friendly digital design and development library — built on the language of resolution.
01 — Creative Platform
The customer is always human.
When things go sideways, you want service you can count on. You reach out for help, and the support you receive feels just right. Zendesk is behind it all — ensuring you get exactly what you need when you need it.
We're committed to every interaction ending in resolution, no matter what comes your way. So the brands you're loyal to can show up for you, how you want them to. Because you are the customer, and we know the customer is always human.
02 — Brand Expressions
You know if it's on brand if it's…
Five attributes guide every visual and verbal decision. Together they form the unmistakable Zendesk voice — approachable, modern, trusted, connected, and fresh.
ii. Modern
Modern
Innovation is in our DNA. Through bold, forward-thinking expressions of our brand, we communicate that we're not just keeping up with the future — we're building it.
iii. Trusted
Trusted
We're advocates for consistency and quality. Every touchpoint reinforces reliability, from the precision of our design to the confidence we foster in the services we provide.
iv. Connected
Connected
To lead the way, we stay relevant. Our brand speaks to the needs of our customers and reflects the culture of the moment, ensuring we shape the conversation rather than just join it.
v. Fresh
Fresh
Our visual and verbal identity mirrors the elegance of our solutions. Clean, intuitive design proves that embedding AI into customer experiences can be as seamless as it is transformative.
03 — Graphic Language
The language of resolution.
Our design system guides customers from challenge to resolution through clean, intentional choices. Simple forms create clarity; gradients and shapes signal the path forward. Every visual element reinforces our core purpose.
Zendesk logo
A foundational visual device showing the movement toward resolution.
Gradients
Soft edges create depth with sophistication, balancing emphasis with elegant transitions.
Visual symbols
Simple, universal symbols distill complex ideas into the essentials.
Rounded corners
Rounded corners add a sense of approachability and a contemporary feel.
Gradient backgrounds
Backgrounds imply movement toward resolution while providing contrast and accent.
04 — Logo
Logo
The Zendesk logo is made up of two elements: our symbol and wordmark. It is the biggest visual identifier of our brand.
Licorice on Coconut
Coconut on Licorice
05 — Colors
Color palette
Reference these color values for digital (RGB) and print (CMYK and PMS) applications. Matcha is reserved for primary actions and accents — use it sparingly.
Primary colors
Coconut
#FFFFFF
Licorice
#11110D
Matcha
#D1F470
Sesame
#F5F5F2
Secondary palette
Cactus
#A1D78F
Pineapple
#FEEB7E
Shamrock
#2D4C33
Fern
#203524
Matcha scale
000
100
200
300
400
500
600
Sesame scale
100
200
300
400
500
600
700
06 — Typography
Typography
Zendesk Sans is the brand's primary typeface. Zendesk Mono is used for technical detail, supertitles, and metadata. Together they create a clear hierarchy without ornament.
Resolution starts here
A second-tier headline
Supporting heading
Section label
Larger body copy used for ledes and pull quotes — readable from across the room.
The default body size for most product and marketing surfaces — comfortable for sustained reading.
Section · Eyebrow · Label
Small supporting text for captions, footnotes, and metadata.
07 — Components
Components
Pre-built UI elements built from the design tokens. Compose them freely; never modify their internals.
Buttons
Primary buttons use Matcha for high visibility. Limit to one or two per page. Secondary buttons handle less prominent actions.
Form fields
Cards
Design tokens
Consistent colors, spacing, and typography variables for every component.
Components
Pre-built UI elements with responsive properties that adapt to breakpoints.
Responsive
Components with built-in margins organized by breakpoint for consistent layouts.
08 — Spacing
Spacing scale
Greenhouse uses an 8px-based spacing system for consistent layouts. Stick to these values; never improvise.
--s-8
8px
--s-12
12px
--s-16
16px
--s-24
24px
--s-40
40px
--s-56
56px
--s-72
72px
--s-96
96px
--s-128
128px
09 — Imagery
Imagery best practices
Imagery complements messaging and adds vibrancy to layouts. These rules keep our visual language consistent across every surface.
Do
Use rounded rectangles for image masks
Always mask imagery in rounded rectangles to maintain visual consistency with the design system. Avoid circles, polygons, or other shapes.
Rounded rectangle ✓
Circle ✕
Do
Ensure sufficient contrast for blockframes
For product UI screenshots, don't let imagery blend into the background. Use drop shadows or borders to ensure sufficient contrast and definition.
With shadow ✓
No shadow ✕
Don't
Use borders on imagery for web
For general photography and marketing images, avoid adding borders. Let images breathe naturally within the layout.
With border ✕
No border ✓
10 — Shadows
Shadows
Shadows distinguish elements and create hierarchy. Reserve S4 for modals, videos, tours, and other elements above an overlay.
SS1
0px 2px 4px
rgba(0,0,0,0.08)
rgba(0,0,0,0.08)
SS2
0px 4px 12px
rgba(0,0,0,0.05)
rgba(0,0,0,0.05)
S1
0px 8px 24px
rgba(0,0,0,0.08)
rgba(0,0,0,0.08)
S2
0px 16px 28px
rgba(0,0,0,0.08)
rgba(0,0,0,0.08)
S3
0px 24px 36px
rgba(0,0,0,0.16)
rgba(0,0,0,0.16)
S4
0px 10px 50px 20px
rgba(0,0,0,0.3)
rgba(0,0,0,0.3)
11 — Corner Radius
Corner radius
Rounded corners are central to the brand's approachable feel. Use these standardized values across components and surfaces.
Small4px
Medium8px
Large16px
X-Large28px
12 — Focus States
Focus states
All interactive elements get a visible matcha focus ring with a 2px offset. Never remove the focus outline — it's required for keyboard accessibility.