Creating a consistent experience is fundamental to designing apps that feel part of the Zendesk product. This document will give you specifications you can use to help you achieve that.

These specifications come from Garden, Zendesk’s design system, that is used for the Zendesk product. While you can use your own design system, it’s encouraged to align to these fundamentals where you can to help create a consistent experience.

Learn how you can use Garden for your app.


Accessibility is a fundamental aspect of design at Zendesk. Not only is it important when considering those with temporary or permanent impairment, it is also shown to improve the usability of products for everyone. Zendesk abides by WCAG 2.1 guidelines and we encourage app developers to follow these guidelines too.

Learn more about Zendesk’s commitment to accessibility.

Spacing and sizing

When you design an app, there are several things to take into consideration due to the amount of space available. In general, try to keep apps as compact and as simple as possible.

Garden components use the base-4 system, meaning things like text sizes and spacings are in multiples of 4px. Garden has a predetermined set of spacing values that can be used to make your experience feel consistent.

Spacing Garden token
4px xxs
8px xs
12px sm
20px md
32px lg
40px xl
48px xll


The Zendesk interface uses the font-family SF font/system font at 14px with a 20px line-height by default, with any bolding using semi-bold.

The SF font is available for free from Apple. Download the SF font family.

Below is a quick summary of typography styles you may need when designing your app:

Component Font Size Line height Garden token Hex value
Default SF Pro - Regular 14px 20px grey-800 #2F3941
Labels SF Pro - Semi-Bold 14px 20px grey-800 #2F3941
Hint & Empty state SF Pro - Regular 14px 20px grey-600 #68737D
Placeholder SF Pro - Regular 14px 20px grey-400 #C2C8CC
Text link SF Pro - Regular 14px 20px blue-600 #1F73B7


The Zendesk interface places strong focus on colour considerations, ensuring things like contrast ratios meet accessibility guidelines.

Below is a list of colors used with our common elements.

Buttons State Garden token Hex value
Default blue-600 #1F73B7
Hover, active and focus blue-700 #144A75
Icons State Garden token Hex value
Default grey-600 #68737D
Hover, active and focus (if interactive) grey-700 #49545C
System status State Garden token Hex value
Error red-600 #CC3340
Warning yellow-700 #AD5918
Success green-600 #038153

Although these are the most commonly used colours within the Zendesk interface, Garden includes a range of colours and shades to make your experience feel like Zendesk.

Disabled components

Avoid using any disabled components anywhere unless there’s a necessary reason. However, in certain cases, you can show disabled buttons to avoid having buttons constantly appear and disappear which can be confusing for the end user.

Dos and Don’ts

1. Keep authentication simple and immediate

Apps that integrate with other services will likely need some form of authentication to get set up. Ideally, this should be accomplished when your app is initially set up, however if your app requires individual agents to sign in, consider the following:

  • Keep settings that affects all users in the Settings page, rather than in the app itself.

  • Keep unauthenticated experiences simple to avoid distraction. Use minimal copy to convey your message, and secondary and tertiary button styles for any call to actions.

2. Make errors clear and recoverable where possible

Providing a great experience means helping users when they run in to trouble. Here are a couple of guidelines that can help you communicate issues effectively to help users recover swiftly:

  • Use simple language to explain what has caused the error, and how the user can resolve it.

  • Use a Garden Alert Notification and display it in context of where the issue is located.

  • Provide a ‘Retry’ action when your app doesn’t behave as expected, for instance if it doesn’t load correctly, or it runs in to an error when performing an action.

  • For form elements, display the error inline. Garden’s form fields have this style built in and available.

3. Consider how your app responds when localized to other languages

Zendesk places great emphasis on creating products that are easy to use by people across the world, and we encourage app developers to do the same.

  • Test how other languages will affect the size and spacing of components in your apps. For instance, buttons may grow in width and wrap in certain cases.

  • If content needs to wrap to cater for other languages, consider the height of your app and adjust accordingly.

Further reading

Learn how Zendesk Garden can be used to create a consistent experience and design and build apps faster.