Mielle Design System

Updated: 12/16/2021

Mielle Logo

DOWNLOAD LOGO

File formats included: .eps, .png, .svg

Colors

Primary color - Mielle Pink

HEX E31C79
RGB 227, 28, 121
HSB 332, 88, 89
CMYK 0, 87, 46, 10

Web safe - Maven Rose

HEX BF165E
RGB 191, 22, 94
HSB 334, 88, 75
CMYK 0, 88, 50, 25

The web safe version is best used on sections of the web where you may want to use white text on top of the primary color. The web safe version meets AA web assessibility requirements as they relate to the needs of users with vision impairments.

Secondary color - Mielle Lime

HEX 96AA3B
RGB 150, 170, 59
HSB 71, 65, 67
CMYK 011, 0, 65, 33

Tertiary color - Jet

HEX 2D2926
RGB 45, 41, 38
HSB 26, 16, 18
CMYK 0, 8, 15, 82

Tertiary color - Cultured

HEX F7F7F7
RGB 247, 247, 247
HSB 0, 0, 97
CMYK 0, 0, 0, 3

The tertiary color options are to be used as background and font colors.

Typography

Primary Typeface - Lato

H1 - Lato Bold

Size: 36px / Line Height: 54px / Weight: 700

H2 - Lato Semibold

Size: 32px / Line Height: 48px / Weight: 600

H3 - Lato Semibold

Size: 28px / Line Height: 42px / Weight: 600

H4 - Lato Semibold

Size: 25px / Line Height: 38px / Weight: 600

H5 - Lato Semibold

Size: 23px/ Line Height: 35px / Weight: 600

H6 - Lato Semibold

Size: 21px / Line Height: 32px / Weight: 600

Blockquote - Lato Regular

Size: 17px / Line Height: 24px / Weight: 400

Paragraph - Lato Regular

Size: 16px / Line Height: 26px / Weight: 400

Graphics & Images

Website

Main header graphic (1800 x 800px)

Promo banners include a CTA button.

Mobile header graphic (1080 x 1350px)

The mobile version of the banner is used on custom landing pages.