Discover trinet.com design foundations
Learn how trinet.com uses colors and fonts to enhance user experience and design coherence.
Last update: 07/02/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
#ffe2d6
100
100
#ffbfa3
200
200
#ff9b70
300
300
#ff773d
400
400
#ff540a
500
500
#d64000
600
600
#a33100
700
700
#702200
800
800
#3d1200
900
900
#0a0300
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
#5e37fb
100
100
#3605fa
200
200
#2b04c8
300
300
#200396
400
400
#160264
500
500
#0b0132
600
600
#000000
700
700
#000000
800
800
#000000
900
900
#000000
950
950
#000000
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
#e0dcff
100
100
#b3a9fe
200
200
#8677fe
300
300
#5a44fd
400
400
#2d12fd
500
500
#1b02d9
600
600
#1502a7
700
700
#0f0174
800
800
#080142
900
900
#02000f
950
950
#000000
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
#f4f5f4
600
600
#daddda
700
700
#bfc5bf
800
800
#a4ada4
900
900
#899489
950
950
#6f7b6f
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
#fee1ee
100
100
#fdafd1
200
200
#fc7eb4
300
300
#fa4c98
400
400
#f91a7b
500
500
#db0662
600
600
#a9044c
700
700
#770335
800
800
#46021f
900
900
#140109
950
950
#000000
