Discover iheart.com design foundations
Learn how iheart.com uses colors and fonts to enhance user experience and design coherence.
Last update: 06/29/2024
ICONS
TYPOGRAPHIES
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
#ffc7d3
100
100
#ff94ab
200
200
#ff6183
300
300
#ff2e5b
400
400
#fa0036
500
500
#c7002b
600
600
#940020
700
700
#610015
800
800
#2e000a
900
900
#000000
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
#b3b3b3
100
100
#999999
200
200
#808080
300
300
#666666
400
400
#4d4d4d
500
500
#333333
600
600
#1a1a1a
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
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f6f8f9
600
600
#d7e0e4
700
700
#b9c8d0
800
800
#9ab0bc
900
900
#7b99a7
950
950
#608090
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
#f6f8f9
600
600
#d7e0e4
700
700
#b9c8d0
800
800
#9ab0bc
900
900
#7b99a7
950
950
#608090
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
#ffffff
100
100
#fefbfc
200
200
#f5d1e2
300
300
#eba8c7
400
400
#e27ead
500
500
#d85592
600
600
#cc2e78
700
700
#a2255f
800
800
#791b47
900
900
#4f122e
950
950
#250816
