1. Colors

Primary Color Palette

Nerium Blue

#53abae

Nerium Grey

#B8B9BC

Nerium Charcoal

#565758

Secondary Color Palette - Accent Colors

Apple Green

#8DC63F

Happiness Orange

#ff9404

Dark Grey

#231f20

Tertiary Color Pallette - Background Colors

Light Grey

#F0F2F3

Sky Blue

#EBF4F5

Light Green

#F3F8ED

Light Orange

#FCF4E8

Color Usage

Products: Nerium Blue

Opportunity: Apple Green

Science: Happiness Orange

2. Typography

DESKTOP

H1 Desktop: Source Sans Extralight (200), darken(NeriumGrey, 10)

Size: 3em (48px)
Line Height: 1.05em


TABLET

H1 Tablet: Source Sans Extralight (200), darken(NeriumGrey, 10)

Size: 2.5em (40px)
Line Height: 1.125em


MOBILE

H1 Mobile: Source Sans Extralight (200), darken(NeriumGrey, 10)

Size: 2em (32px)
Line Height: 1.25em


DESKTOP

H2 Desktop: Source Sans Light (300), darken(NeriumGrey, 10)

Size: 2.25em (36px)
Line Height: 1.25em


TABLET

H2 Tablet: Source Sans Light (300), darken(NeriumGrey, 10)

Size: 2em (32px)
Line Height: 1.25em


MOBILE

H2 Mobile: Source Sans Light (300), darken(NeriumGrey, 10)

Size: 1.625em (26px)
Line Height: 1.15em


DESKTOP

H3 Desktop: Source Sans Regular (400), darken(NeriumGrey, 10)

Size: 1.75em (28px)
Line Height: 1.25em


TABLET

H3 Tablet: Source Sans Regular (400), darken(NeriumGrey, 10)

Size: 1.5em (24px)
Line Height: 1.25em


MOBILE

H3 Mobile: Source Sans Regular (400), darken(NeriumGrey, 10)

Size: 1.375em (22px)
Line Height: 1.13em


DESKTOP

H4 Desktop: Source Sans Light (300), DarkGrey

Size: 1.125em (18px)
Line Height: 1.2em


TABLET

H4 Tablet: Source Sans Light (300), DarkGrey

Size: 1.125em (18px)
Line Height: 1.2em


MOBILE

H4 Mobile: Source Sans Light (300), DarkGrey

Size: 1.125em (18px)
Line Height: 1.1em


DESKTOP

H5 Desktop: Source Sans Semibold (600), DarkGrey

Size: 1.125em (18px)
Line Height: 1.2em


TABLET

H5 Tablet: Source Sans Semibold (600), DarkGrey

Size: 1.125em (18px)
Line Height: 1.2em


MOBILE

H5 Mobile: Source Sans Semibold (600), DarkGrey

Size: 1.125em (18px)
Line Height: 1.1em


DESKTOP

Body Desktop: Source Sans Regular (600), DarkGrey
Lorem ipsum dolor posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Size: 1em (16px)
Line Height: 1.375em
Characters: 60-75


TABLET

Body Tablet: Source Sans Regular (600), DarkGrey
Lorem ipsum dolor posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Size: 1em (16px)
Line Height: 1.375em
Characters: 60-75


MOBILE

Body Mobile: Source Sans Regular (600), DarkGrey
Lorem ipsum dolor posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Size: 1em (16px)
Line Height: 1.25em
Characters: 35-40


Typography Usage

Section Headlines: H1, Uppercase


Section Subheads: H2, Uppercase, NeriumBlue


Module Headlines: H4, Uppercase


Section Intro Copy: H4, Sentence Case

DESKTOP

Line Height: 1.75em

TABLET

Line Height: 1.75em

MOBILE

Line Height: 1.5em


Blockquote: Source Sans Regular (400) Italic, DarkGrey

DESKTOP

Size: 1.5em (24px)
Line Height: 1.45em

TABLET

Size: 1.5em (24px)
Line Height: 1.45em

MOBILE

Size: 1.25em (20px)
Line Height: 1.25em

3. Actions

Main CTA Buttons

BUY PRODUCTS DEFAULT

Background Color: NeriumBlue;
SourceSans Regular (400), White;
Chevron Right Background: Lighten(NeriumBlue, 20);
Chevron Color: Darken(NeriumBlue, 10);

buy products

BUY PRODUCTS HOVER

Background Color: Lighten(NeriumBlue, 20);
SourceSans Regular (400), Darken(NeriumBlue, 10);
Chevron Right Background: NeriumBlue;
Chevron Color: White;

buy products

JOIN THE BUSINESS DEFAULT

Background Color: NeriumBlue;
SourceSans Regular (400), White
Chevron Right Background:Lighten(NeriumBlue, 20);
Color: Darken(NeriumBlue, 10)

join the business

JOIN THE BUSINESS HOVER

Background Color: Lighten(NeriumBlue, 20);
SourceSans Regular (400), Darken(NeriumBlue, 10)
Chevron Right Background: NeriumBlue;
Color: Darken(NeriumBlue, 10)

join the business

Action Buttons

DEFAULT

Background Color: NeriumBlue;
SourceSans Semibold (600), White;
Border Radius: 4px;

LEARN MORE

HOVER

Background Color: White;
SourceSans Semibold (600), NeriumBlue;
Border Radius: 4px;
Border: 2px solid NeriumBlue

LEARN MORE

ACTIVE

LEARN MORE

Tabs

DESKTOP INACTIVE

H5 White;
Background Color: NeriumGrey;
Border: 4px solid White;

DESKTOP HOVER

H5 White;
Background Color: NeriumBlue;
Border: 4px solid White;

DESKTOP SELECTED

H5 NeriumBlue;
Background Color: Lighten(NeriumGrey, 25);
Border: 4px solid White;

Tab 1
Tab 2
Tab 3

Tab 1 content

Tab 2 content

Tab 3 content


Text links

LINK WITH CHEVRON

DEFAULT

SourceSans Semibold (600), NeriumBlue;
Size: 1em (16px);

HOVER

SourceSans Semibold (600), Darken(NeriumBlue, 10);
Chevron margin-left: 8px;


UNDERLINED LINK

DEFAULT

SourceSans Semibold (600), NeriumBlue;
Size: 1em (16px);
Bottom-border: 2px solid NeriumBlue;

HOVER

SourceSans Semibold (600), Darken(NeriumBlue, 10);
Bottom-border: 2px solid Darken(NeriumBlue, 10);
Padding-bottom: 4px;


SIDE NAVIGATION

DEFAULT

SELECTED

DEFAULT

SourceSans Regular(400), NeriumGrey;
Size: 1em (16px);

HOVER

SourceSans Regular(400), NeriumBlue;
Size: 1em (16px);
Background: #ebf4f5;

SELECTED

SourceSans Regular(400), NeriumBlue;
Size: 1em (16px);


4. Tables

Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here
Content Goes Here
Content Goes Here

5. Form Elements

Fields



Combos

DEFAULT / INACTIVE

ACTIVE


Error State

Error Message

MODAL WINDOW

Excepteur sint occaecat cupidatat non proident.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CALL-TO-ACTION ×

7. Social

DESKTOP

Square Icon

Icon Over White

TABLET

Square Icon

Icon Over White

MOBILE

White Icon Over Color

8. Miscellaneous

CUSTOM HYPERLINK - H6 (OPPORTUNITY PAGE)

DOWN HYPERLINK (OPPORTUNITY PAGE)

JOIN NOW CTA

JOIN NOW