Style Guide

Primary Colors

Primary Blue
primary blue
#004D9D
$color-blue
BG: bg-blue
Color: color-blue
Primary White
white
#ffffff
$color-white
BG: bg-white
Color: color-white

Primary Tints compliant with blue typeface on top

Blue Light
blue light
#E5EDF5
$color-blue-light
BG: bg-blue-light
Color: color-blue-light
Blue Tint
blue tint
#F2F6FA
$color-blue-tint
BG: bg-blue-tint
Color: color-blue-tint

Skin colors

Normalskin
normal skin
#96C8EF
$color-normal
BG: bg-normal
Color: color-normal
Dryskin
dry skin
#FFE163
$color-dry
BG: bg-dry
Color: color-dry
Sensitive
very sensitive skin
#EE7573
$color-sensitive
BG: bg-sensitive
Color: color-sensitive
Eczema
eczema prone
#85CBCA
$color-eczema
BG: bg-eczema
Color: color-eczema
Maternity
maternity
#ECCD92
$color-maternity
BG: bg-maternity
Color: color-maternity
Organic
organic range
#295810
$color-organic
BG: bg-organic
Color: color-organic
Sun
sun lotion
#EDBF00
$color-sun
BG: bg-sun
Color: color-sun

Skin colors light compliant with blue typeface on top

Normalskin
normal skin light
#EAF4FC
$color-normal-light
BG: bg-normal-light
Color: color-normal-light
Dryskin
dry skin light
#FFF9E0
$color-dry-light
BG: bg-dry-light
Color: color-dry-light
Sensitive
very sensitive skin light
#FCE3E3
$color-sensitive-light
BG: bg-sensitive-light
Color: color-sensitive-light
Eczema
eczema prone light
#E7F5F4
$color-eczema-light
BG: bg-eczema-light
Color: color-eczema-light
Maternity
maternity light
#FBF5E9
$color-maternity-light
BG: bg-maternity-light
Color: color-maternity-light
Organic
organic range light
#E9EEE7
$color-organic-light
BG: bg-organic-light
Color: color-organic-light
Sun
sun lotion light
#FBF2CC
$color-sun-light
BG: bg-sun-light
Color: color-sun-light

Secondary colors

Sky
sky
#C2E2F7
$color-sky
BG: bg-sky
Color: color-sky
Berry
berry
#EA3657
$color-berry
BG: bg-berry
Color: color-berry
Tropics
tropics
#1BACA7
$color-tropics
BG: bg-tropics
Color: color-tropics
Rosemary
rosemary
#5A7F63
$color-rosemary
BG: bg-rosemary
Color: color-rosemary
Peach
peach
#FCBF83
$color-peach
BG: bg-peach
Color: color-peach
Morningglory
morning glory
#FDC92A
$color-morningglory
BG: bg-morningglory
Color: color-morningglory
Pink
pink
#F9D6E8
$color-pink
BG: bg-pink
Color: color-pink
Lavender
lavender
#D8BEDC
$color-lavender
BG: bg-lavender
Color: color-lavender
Rose
rose
#F08A9B
$color-rose
BG: bg-rose
Color: color-rose
Eggplant
eggplant
#4F4E6F
$color-eggplant
BG: bg-sky
Color: color-sky
Beige
beige
#F1D8CD
$color-beige
BG: bg-beige
Color: color-beige

Secondary light colors compliant with blue typeface on top

Sky
sky light
#F3F9FD
$color-sky-light
BG: bg-sky-light
Color: color-sky-light
Berry
berry light
#FBD7DD
$color-berry-light
BG: bg-berry-light
Color: color-berry-light
Tropics
tropics light
#D1EEED
$color-tropics-light
BG: bg-tropics-light
Color: color-tropics-light
Rosemary
rosemary light
#DEE5E0
$color-rosemary-light
BG: bg-rosemary-light
Color: color-rosemary-light
Peach
peach light
#FEF2E6
$color-peach-light
BG: bg-peach-light
Color: color-peach-light
Morningglory
morning glory light
#FFF4D4
$color-morningglory-light
BG: bg-morningglory-light
Color: color-morningglory-light
Pink
pink light
#FEF7FA
$color-pink-light
BG: bg-pink-light
Color: color-pink-light
Lavender
lavender light
#F7F2F8
$color-lavender-light
BG: bg-lavender-light
Color: color-lavender-light
Rose
rose light
#FCE8EB
$color-rose-light
BG: bg-rose-light
Color: color-rose-light
Eggplant
eggplant light
#DCDCE2
$color-eggplant-light
BG: bg-eggplant-light
Color: color-eggplant-light
Beige
beige light
#FCF7F5
$color-beige-light
BG: bg-beige-light
Color: color-beige-light

Other

Darkblue
dark blue
#002852
$color-darkblue
BG: bg-darkblue
Color: color-darkblue
Middleblue
middle blue
#3371B1
$color-middleblue
BG: bg-middleblue
Color: color-middleblue
Disabled
button disabled
#f3f3f3
$color-disabled
BG: bg-disabled
Color: color-disabled
Disabled On Gray
disabled on light gray
#4F4F4F
$color-disabled-on-gray
BG: bg-disabled-on-gray
Color: color-disabled-on-gray
Disabled On White
disabled on white
#767676
$color-disabled-on-white
BG: bg-disabled-on-white
Color: color-disabled-on-white
Error Red
error red
#D22C01
$color-error-red
BG: bg-error-red
Color: color-error-red

Typography

H1 primary

H2 primary

H3 primary

H4 primary

H1 primary

H2 primary

H3 primary

H4 primary

H1 primary

H2 primary

H3 primary

H4 primary

H1 light

H2 light

H3 light

H4 light

H1 light

H2 light

H3 light

H4 light

H1 light

H2 light

H3 light

H4 light

Body 18 / dark headline

Body 18 / dark


Body 16 / dark

Body 16 / light

Body 18 / dark headline centered

Body 18 / dark centered



Body 16 / dark centered

Body 16 / centered


Alert 16 / dark

Alert 16 / light

Buttons and hovers

Primary button

normal state

Learn more

hover / focus state

Learn more

Primary 'add to cart' button

normal state

Add to cart

hover / focus state

Add to cart

Disabled button

normal state

hover / focus state

Secondary Button

normal state

hover / focus state