Styleguide

Typography

Display

Class Name: text-display

Heading 1

Class Name: text-h1 or by default, use the h1 tag

Heading 2

Class Name: text-h2 or by default, use the h2 tag

Heading 3

Class Name: text-h3 or by default, use the h3 tag

Heading 4

Class Name: text-h4 or by default, use the h4 tag

Heading 5
Class Name: text-h5 or by default, use the h5 tag

Body 1

Class Name: text-body-one or by default, use the p tag

Body 2

Class Name: text-body-two

Eyebrow

Class Name: text-eyebrow

Class Name: text-links

Colors

Primary Orange
#E2542D

Class Name (for text): primary-orange
Class Name (for background): bg-primary-orange

Primary Black
#1B1A17

Class Name (for text): primary-black
Class Name (for background): bg-primary-black

Primary Dark Blue
#090D2B

Class Name (for text): primary-darkblue
Class Name (for background): bg-primary-darkblue

Primary Dark Violet
#7C1AB0

Class Name (for text): primary-darkviolet
Class Name (for background): bg-primary-darkviolet

Primary Bright Violet
#9924D9

Class Name (for text): primary-brightviolet
Class Name (for background): bg-primary-brightviolet

Neutrals Black
#1D1519

Class Name (for text): neutrals-black
Class Name (for background): bg-neutrals-black

Neutrals Gray
#757171

Class Name (for text): neutrals-gray
Class Name (for background): bg-neutrals-gray

Neutrals Lightgray
#F9F9F9

Class Name (for text): neutrals-lightgray
Class Name (for background): bg-neutrals-lightgray

Neutrals Peachgray
#F3E6E9

Class Name (for text): neutrals-peachgray
Class Name (for background): bg-neutrals-peachgray

Neutrals Lightgray 2
#E0DEDE

Class Name (for text): neutrals-lightgray2
Class Name (for background): bg-neutrals-lightgray2

Neutrals White
#F3F4F6

Class Name (for text): neutrals-white
Class Name (for background): bg-neutrals-white

Neutrals Brown
#954B27

Class Name (for text): neutrals-brown
Class Name (for background): bg-neutrals-brown

Neutrals Periwinkle
#A5BDFF

Class Name (for text): neutrals-periwinkle
Class Name (for background): bg-neutrals-periwinkle

Neutrals Orange
#DF7D62

Class Name (for text): neutrals-orange
Class Name (for background): bg-neutrals-orange

Gradients

Gradient 1

Class Name: bg-gradient-1

Gradient 2

Class Name: bg-gradient-2

Gradient 3

Class Name: bg-gradient-3

Gradient 4

Class Name: bg-gradient-4

Gradient 5

Class Name: bg-gradient-5

Gradient 6

Class Name: bg-gradient-6

Gradient 7

Class Name: bg-gradient-7

Gradient 8

Class Name: bg-gradient-8

Buttons

Primary Button

Request Demo
Class Name: custom-btn custom-btn-orange

Secondary Button

Request Demo
Class Name: custom-btn custom-btn-violet

Text Button

See All Features
Class Name: custom-btn custom-btn-violet

Outline Button

See All Features
Class Name: custom-btn custom-btn-outline