Colors

Primary - #153465

Primary Light - #199fc7

Secondary - #24c9ff

Grayscales

DARK

Light

Gradients

Primary Gradient
#4d18ff - #A185FF

Light Gradient
#A185FF - #FFFFFF

Alert

Success - #20ce7b

Error - #c7193a

Warning - #ff8622

Typography

Aa

Greycliff CF
Bold

Aa

Greycliff CF
Semibold

Aa

Greycliff CF
Regular

Headings

The quick brown fox jumps over the lazy dog

H1 - 36PX / 1.3EM - Greycliff CF

The quick brown fox jumps over the lazy dog

H2 - 28PX / 1.3EM - Greycliff CF

The quick brown fox jumps over the lazy dog

H3 - 24PX / 1.3EM - Greycliff CF

The quick brown fox jumps over the lazy dog

H4 - 20PX / 1.3EM - Greycliff CF
The quick brown fox jumps over the lazy dog
H5 - 24PX / 1.3EM - Greycliff CF

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH TEXT - 16PX/ 1.8EM - Greycliff CF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH TEXT - 16PX/ 1.8EM - Greycliff CF

Others

Here is a caption to add on an element.

CAPTION - 12PX/ 1.4EM - Greycliff CF

Here is a label to add to your forms as needed.

LABEL - 16PX/ 1.4EM - Greycliff CF

Small text that you'll have on the page maybe for a small description.

SMALL - 14PX/ 1.4EM - Greycliff CF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

VERY SMALL - 11PX/ 1.6EM - Greycliff CF

Buttons

Button
BUTTON - 16PX/1.4EM - Greycliff CF
Large Button with Text
BUTTON - 16PX/1.4EM - Greycliff CF
Ghost Button with Text
BUTTON GHOST- 16PX/1.4EM - Greycliff CF
Light Button
BUTTON LIGHT- 16PX/1.4EM - Greycliff CF
Light Ghost Button
BUTTON GHOST LIGHT- 16PX/1.4EM - Greycliff CF

Messages & Components

Here is a success message

Here is an error message

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Tab 1
Tab 2
Tab 3

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Colors

Primary - #153465

Primary Light - #199fc7

Secondary - #24c9ff

Grayscales

DARK

Light

Gradients

Primary Gradient
#4d18ff - #A185FF

Light Gradient
#A185FF - #FFFFFF

Alert

Success - #20ce7b

Error - #c7193a

Warning - #ff8622

Typography

Aa

Greycliff CF
Bold

Aa

Greycliff CF
Semibold

Aa

Greycliff CF
Regular

Headings

The quick brown fox jumps over the lazy dog

H1 - 36PX / 1.3EM - Greycliff CF

The quick brown fox jumps over the lazy dog

H2 - 28PX / 1.3EM - Greycliff CF

The quick brown fox jumps over the lazy dog

H3 - 24PX / 1.3EM - Greycliff CF

The quick brown fox jumps over the lazy dog

H4 - 20PX / 1.3EM - Greycliff CF
The quick brown fox jumps over the lazy dog
H5 - 24PX / 1.3EM - Greycliff CF

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH TEXT - 16PX/ 1.8EM - Greycliff CF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH TEXT - 16PX/ 1.8EM - Greycliff CF

Others

Here is a caption to add on an element.

CAPTION - 12PX/ 1.4EM - Greycliff CF

Here is a label to add to your forms as needed.

LABEL - 16PX/ 1.4EM - Greycliff CF

Small text that you'll have on the page maybe for a small description.

SMALL - 14PX/ 1.4EM - Greycliff CF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

VERY SMALL - 11PX/ 1.6EM - Greycliff CF

Buttons

Button
BUTTON - 16PX/1.4EM - Greycliff CF
Large Button with Text
BUTTON - 16PX/1.4EM - Greycliff CF
Ghost Button with Text
BUTTON GHOST- 16PX/1.4EM - Greycliff CF
Light Button
BUTTON LIGHT- 16PX/1.4EM - Greycliff CF
Light Ghost Button
BUTTON GHOST LIGHT- 16PX/1.4EM - Greycliff CF

Messages & Components

Here is a success message

Here is an error message

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Tab 1
Tab 2
Tab 3

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.