Project 4: High Level Health

Web, 1x

crafted in

Color palette

Primary
#657857
101, 120, 87
Accent 1
#DB4C00
219, 76, 0
Accent 1 20
#DB4C00 20%
219, 76, 0 20%
Accent 2
#9F9B86
159, 155, 134
Accent 2 66
#9F9B86 66%
159, 155, 134 66%
Accent 2 33
#9F9B86 33%
159, 155, 134 33%
Accent 2 15
#9F9B86 15%
159, 155, 134 15%
Accent 3
#DBC2BC
219, 194, 188
Accent 3 33
#DBC2BC 33%
219, 194, 188 33%
Accent 4
#8B5B4C
139, 91, 76
Dark green
#37412F
55, 65, 47
Dark grey
#424242
66, 66, 66
Medium grey
#828282
130, 130, 130
White
#FFFFFF
255, 255, 255
Background 1
#D7DBDB
215, 219, 219
Background 1 33
#D7DBDB 33%
215, 219, 219 33%
Background 1 50
#D7DBDB 50%
215, 219, 219 50%

Text style catalog

headers/H1/regular/left/dark-grey
AcherusGrotesque, Regular, 28px
Line height: 36px, Letter spacing: 4.2px
headers/H2/bold/center/dark-grey
AcherusGrotesque, Black, 25px
Center, Line height: 28px, Letter spacing: 1.8px
headers/H2/bold/left/white
AcherusGrotesque, Black, 25px
Line height: 28px, Letter spacing: 1.8px
headers/H2/bold/left/dark-green 2
AcherusGrotesque, Black, 25px
Line height: 28px, Letter spacing: 1.8px
headers/H2/regular/left/dark-grey
AcherusGrotesque, Regular, 25px
Line height: 30px, Letter spacing: 3.8px
headers/H3/bold/left/primary
AcherusGrotesque, Black, 20px
Line height: 24px, Letter spacing: 1.8px
headers/H3/bold/left/white
AcherusGrotesque, Black, 20px
Line height: 24px, Letter spacing: 1.8px
headers/H3/bold/left/dark-green
AcherusGrotesque, Black, 20px
Line height: 24px, Letter spacing: 1.8px
headers/H3/bold/right/dark-green
AcherusGrotesque, Black, 20px
Right, Line height: 24px, Letter spacing: 1.8px
headers/H3/bold/centered/white
AcherusGrotesque, Black, 20px
Center, Line height: 28px, Letter spacing: 1.8px
headers/H3/regular/left/white
AcherusGrotesque, Regular, 20px
Line height: 25px, Letter spacing: 1.8px
headers/H3/regular/left/dark-grey
AcherusGrotesque, Regular, 20px
Line height: 24px, Letter spacing: 1.8px
body/large/regular/center/dark-grey
AcherusGrotesque, Regular, 18px
Center, Line height: 25px, Letter spacing: 0.4px
body/large/regular/left/white
AcherusGrotesque, Regular, 18px
Line height: 25px, Letter spacing: 0.4px
body/large/regular/left/dark-grey
AcherusGrotesque, Regular, 18px
Line height: 25px, Letter spacing: 0.4px
body/medium/left/white
AcherusGrotesque, Regular, 16px
Line height: 20px, Letter spacing: 0.4px
body/medium/left/dark-grey
AcherusGrotesque, Regular, 16px
Line height: 20px, Letter spacing: 0.4px
body/medium/right/medium-grey
AcherusGrotesque, Regular, 16px
Center, Line height: 28px, Letter spacing: 0.8px
headers/H4/bold/right/dark-green
AcherusGrotesque, Extrabold, 15px
Right, Line height: 16px, Letter spacing: 1.4px
headers/H4/bold/centered/dark-green
AcherusGrotesque, Extrabold, 15px
Center, Letter spacing: 1.3px
headers/H4/bold/left/dark-green
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/bold/left/dark-grey
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/bold/left/primary
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/bold/left/accent-4
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/bold/left/accent-1
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/bold/left/accent-2
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/bold/left/white
AcherusGrotesque, Extrabold, 15px
Letter spacing: 1.3px
headers/H4/regular/left/dark-grey/caps
AcherusGrotesque, Regular, 15px
Letter spacing: 1.3px
headers/H4/regular/left/dark-grey/lowercase
AcherusGrotesque, Regular, 15px
Line height: 18px
body/small/medium-grey
AcherusGrotesque, Regular, 14px
Line height: 18px, Letter spacing: 0.3px
body/small/dark-grey
AcherusGrotesque, Regular, 14px
Line height: 16px, Letter spacing: 0.3px
headers/H5/bold/centered/accent-1
AcherusGrotesque, Black, 13px
Center
headers/H5/bold/centered/accent-4
AcherusGrotesque, Black, 13px
Center, Letter spacing: 1.1px
headers/H5/bold/centered/white
AcherusGrotesque, Black, 13px
Center
headers/H5/bold/left/bold/dark-grey
AcherusGrotesque, Extrabold, 13px
Letter spacing: 1.1px
headers/H5/bold/right/dark-green
AcherusGrotesque, Extrabold, 13px
Right, Line height: 16px, Letter spacing: 1.3px
headers/H5/regular/left/primary
AcherusGrotesque, Regular, 13px
Letter spacing: 1.1px
headers/H5/bold/left/normal/medium-grey
AcherusGrotesque, Regular, 13px
Line height: 16px, Letter spacing: 0.9px
button/dark-grey
AcherusGrotesque, Regular, 13px
Center, Letter spacing: 1.1px
body/x-small/regular/left/white
AcherusGrotesque, Regular, 13px
Letter spacing: 0.6px
headers/H5/regular/left/white
AcherusGrotesque, Regular, 13px
Letter spacing: 1.1px
headers/H5/regular/centered/dark
AcherusGrotesque, Regular, 13px
Center, Letter spacing: 1.1px
button/white
AcherusGrotesque, Regular, 13px
Center, Letter spacing: 1.1px
headers/H5/regular/left/dark
AcherusGrotesque, Regular, 13px
Letter spacing: 1.1px
body/x-small/regular/left/dark-grey
AcherusGrotesque, Regular, 12px
Line height: 14px
body/x-small/light/left/dark-grey
AcherusGrotesque, Light, 12px
Line height: 15px, Letter spacing: 0.5px
body/x-small/italic/left/primary
AcherusGrotesque, Light Italic, 12px
Line height: 16px, Letter spacing: 0.1px
body/x-small/italic/right/dark-grey
AcherusGrotesque, Light Italic, 12px
Right, Line height: 16px, Letter spacing: 0.8px
headers/H6/regular/primary
AcherusGrotesque, Regular, 10px
Line height: 16px, Letter spacing: 0.7px
headers/H6/regular/white
AcherusGrotesque, Regular, 10px
Line height: 16px, Letter spacing: 0.7px
headers/H6/regular/medium-grey
AcherusGrotesque, Regular, 10px
Line height: 16px, Letter spacing: 0.7px
headers/H6/italic/left/white
AcherusGrotesque, Light Italic, 10px
Line height: 16px, Letter spacing: 0.6px
headers/H6/italic/right/medium-grey
AcherusGrotesque, Light Italic, 10px
Right, Line height: 16px, Letter spacing: 0.7px

Designs

Home
Home Desktop
0
Home Mobile
0
Home Mobile Menu Expanded x1
0
Home Mobile Menu Expanded x2
0
PDP
PDP Desktop
0
PDP Mobile
0
PLP
PLP Desktop
0
PLP Mobile
0
Checkout
Checkout Desktop
0
Checkout Mobile 1
0
Checkout Mobile 2
0
Checkout Mobile 3
0
Our Story
Our Story Desktop
0
Our Story Mobile
0
Styleguide
Styleguide
0