WEB UI STYLE GUIDELINES

Primary Color Palette

Black - Primary

#010101

Red - Secondary

#d62e2f

White

#ffffff

Color Tints

#010101
#212121
#2e2e2e
#404040
#525252
#666666
#7f7f7f
#9e9e9e
#bfbfbf
#525252
#a12323
#b62728
#d62e2f
#dc4d4e
#e47777

Secondary Color Palette

Blue

#3D5FA0

Yellow

#FFCC01

H1 Display
apotek
Semibold
Font Size: 75px
Line Height: 1
Text Transform: titlecase
Color: #010101
The quick brown fox jumps over the lazy dog.
H1 Display Mobile
Font Size: 48px
Line Height: 1
H1
apotek
Semibold
Font Size: 65px
Line Height: 1
Text Transform: titlecase
Color: #010101

The quick brown fox jumps over the lazy dog.

H1 Mobile
Font Size: 46px
Line Height: 1
H2
apotek
Semibold
Font Size: 60px
Line Height: 1
Text Transform: titlecase
Color: #010101

The quick brown fox jumps over the lazy dog.

H2 Mobile
Font Size: 42px
Line Height: 1
H3
apotek
Semibold
Font Size: 48px
Line Height: 1.06
Text Transform: titlecase
Color: #010101

The quick brown fox jumps over the lazy dog.

H3 Mobile
Font Size: 38px
Line Height: 1.07
H4
apotek
Semibold
Font Size: 40px
Line Height: 1.05
Text Transform: titlecase
Color: #010101

The quick brown fox jumps over the lazy dog.

H4 Mobile
Font Size: 32px
Line Height: 1.06
H5
proxima-nova
Bold
Font Size: 36px
Line Height: 1.15
Text Transform: titlecase
Color: #010101
The quick brown fox jumps over the lazy dog.
H5 Mobile
Font Size: 24px
Line Height: 1.2
H6
apotek
Bold
Font Size: 26px
Line Height: 1.15
Text Transform: uppercase
Color: #010101
The quick brown fox jumps over the lazy dog.
H6 Mobile
Font Size: 20px
Line Height: 1.15
H6 Secondary
apotek
Regular
Font Size: 18px
Line Height: 1.38
Text Transform: uppercase
Color: #010101
The quick brown fox jumps over the lazy dog.
H6 Secondary Mobile
Font Size: 15px
Line Height: 1.46
Paragraph
proxima-nova
Regular
Font Size: 16px
Line Height: 1.44
Font Color: #404040

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Paragraph Mobile
Font Size: 16px
Line Height: 1.54
Paragraph Text Link
proxima-nova
Regular
Font Color: #404040
info@nutrex.com
Primary Button (Default Size)
Large Button
Small Button
Secondary Button
White Button

btn-link-primary

Shop All

btn-link-secondary

Shop All

btn-link-style-1

Shop All

badge badge-new

New

badge badge-sale

51% Off

badge badge-out-of-stock

Out of stock
Form Floating