Discover travelperk.com design foundations
Learn how travelperk.com uses colors and fonts to enhance user experience and design coherence.
Last update: 06/28/2024
ICONS
TYPOGRAPHIES
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
#e3ebfc
100
100
#b5caf8
200
200
#86a9f3
300
300
#5888ee
400
400
#2a66ea
500
500
#144ecc
600
600
#103d9e
700
700
#0b2b6f
800
800
#061941
900
900
#020713
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
#dee4f2
300
300
#b9c6e4
400
400
#95a8d6
500
500
#708ac7
600
600
#4b6cb9
700
700
#3b5697
800
800
#2c4172
900
900
#1e2c4d
950
950
#101728
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
#ffffff
400
400
#ffffff
500
500
#e5fffc
600
600
#b3fff6
700
700
#80fff0
800
800
#4dffea
900
900
#1affe4
950
950
#00e6cb
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
#f5f7fa
600
600
#d3dce9
700
700
#b1c0d8
800
800
#8fa5c7
900
900
#6d8ab6
950
950
#50709f
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
#e3ebfc
100
100
#b5caf8
200
200
#86a9f3
300
300
#5888ee
400
400
#2a66ea
500
500
#144ecc
600
600
#103d9e
700
700
#0b2b6f
800
800
#061941
900
900
#020713
950
950
#000000
