Discover zendesk.com design foundations
Learn how zendesk.com uses colors and fonts to enhance user experience and design coherence.
Last update: 07/03/2024
ICONS
TYPOGRAPHIES
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
COLORS
CALL TO ACTION
The call to action color is specifically chosen to stand out on the page. It's used on elements that require user interaction or urgent attention, such as "submit" buttons, promotional banners, or important links.
50
50
#f6eaf5
100
100
#e6c6e5
200
200
#d7a3d5
300
300
#c77fc5
400
400
#b75cb4
500
500
#9c4499
600
600
#793576
700
700
#552553
800
800
#321631
900
900
#0e060e
950
950
#000000
HERO
The hero color is used to draw attention to the most important content on the page. It's the main color used on content above the fold.
50
50
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f6efe5
600
600
#e8d8bf
700
700
#dbc29a
800
800
#cdab74
900
900
#bf944f
950
950
#a17a3a
ACCENT
The accent color is used to highlight important elements on the page, such as headings, links, or buttons. It's a secondary color that complements the primary color scheme.
50
50
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#fbfef0
400
400
#ecfcc0
500
500
#ddf990
600
600
#cef75f
700
700
#bff42f
800
800
#aae40c
900
900
#86b309
950
950
#628307
BACKGROUND
The background color is the primary color used in the background of the page. It's a neutral color that provides a backdrop for the content on the page.
50
50
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f6efe5
600
600
#e8d8bf
700
700
#dbc29a
800
800
#cdab74
900
900
#bf944f
950
950
#a17a3a
SURFACE
The surface color is used to create depth and dimension on the page. It's a light color that's used on elements like cards, modals, and other surfaces that need to stand out from the background.
50
50
#b1a472
100
100
#9b8d55
200
200
#7a6f43
300
300
#595131
400
400
#38331f
500
500
#17150d
600
600
#000000
700
700
#000000
800
800
#000000
900
900
#000000
950
950
#000000
