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
Links
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
