gif loading
Alterna logo
test img

Please rotate to your screen to view Alterna products

Back to Top Back to Top

WEB STYLE GUIDE

Global website to be used for all regions. Regions are not permitted to launch their own website, outside of a landing page to support education, teams and events. Please contact Global SBU for further information or add content to our Global site.

Alterna
Caviar Anti-Aging
My Hair. My Canvas.
PMS 2695C RGB 46.26.71 CMYK 90.100.8.59
PMS black 6c RGB 000000 CMYK 60.60.40.100
White

H1

*H1 is a special tag that we define through its usage for SEO/CMS reasons: it’s used only once in every page and normally operates as the page’s primary headline. The Design team designates the H1 to one primary text element on a given page. If not provided, it is naturally the page title or the prime indicator that defines the page content. Style-wise, an H1 may be the same as an existing H2, an H3, an H4 etc..

H2

SOFIA PRO 40 PX

desktop
light
line-height 100%
letter-spacing 0%

SOFIA PRO 32 PX

mobile
light
line-height 100%
letter-spacing 0%

h3

Chiswick Sans 40 px

desktop
light
line-height 100%
letter-spacing 0%

Chiswick Sans 32 px

mobile
light
line-height 100%
letter-spacing 0%

h4

sofia pro 24 px

desktop
light
line-height 100%
letter-spacing 0%

sofia pro 18 px

mobile
light
line-height 100%
letter-spacing 0%

body

Sofia Pro 16 px

all devices
light
line-height 24
letter-spacing 2%

Link 1

Minion Pro 14 px

all devices
light
line-height 100%
letter-spacing 0%

Link 2

Sofia Pro 12 px

all devices
light
line-height 100%
letter-spacing 0%

big text

Chiswick Sans 72 px

desktop
light
line-height 24
letter-spacing 2%

Chiswick Sans 32 px

mobile
light
line-height 24
letter-spacing 2%

PMS 2074C
RGB 149.105.190 CMYK 51.62.0.0
PMS 2695C RGB 46.26.71 CMYK 90.100.8.59
PMS 258C
RGB 140.71.153 CMYK 51.79.0.0
PMS 2114C
RGB 131.141.200 CMYK 52.38.0.0
PMS 514C
RGB 212.139.200 CMYK 16.55.0.0
PMS 5115C
RGB 81.42.68 CMYK 51.91.21.70

H1

*H1 is a special tag that we define through its usage for SEO/CMS reasons: it’s used only once in every page and normally operates as the page’s primary headline. The Design team designates the H1 to one primary text element on a given page. If not provided, it is naturally the page title or the prime indicator that defines the page content. Style-wise, an H1 may be the same as an existing H2, an H3, an H4 etc..

H2

DIDOT 64 PX

desktop
italic
line-height 100%
letter-spacing 0%

DIDOT 48 PX

mobile
italic
line-height 100%
letter-spacing 0%

H3

DIDOT 40 PX

desktop
italic
line-height 100%
letter-spacing 0%

DIDOT 24 PX

mobile
italic
line-height 100%
letter-spacing 0%

PMS 7475
RGB 71.122.123 CMYK 70.25.36.21
PMS 9501
RGB 185.224.221 CMYK 27.1.14.0
PMS 9501 @ 50% Opacity
PMS 2695C RGB 247.169.161 CMYK 90.100.8.59
PMS 696
RGB 152.72.87 CMYK 16.76.38.27
PMS RED 0331 @ 50% Opacity

H1

*H1 is a special tag that we define through its usage for SEO/CMS reasons: it’s used only once in every page and normally operates as the page’s primary headline. The Design team designates the H1 to one primary text element on a given page. If not provided, it is naturally the page title or the prime indicator that defines the page content. Style-wise, an H1 may be the same as an existing H2, an H3, an H4 etc..

H2

Cera Pro 64 px

desktop
bold
line-height 100%
letter-spacing 0%

Cera Pro 32 px

mobile
bold
line-height 100%
letter-spacing 0%

H3

Cera Pro 40 px

desktop
bold
line-height 100%
letter-spacing 0%

Cera Pro 24 px

mobile
bold
line-height 100%
letter-spacing 0%