User interface design fundamentals

Introduction

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

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

Typography

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

Colors

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.