Colors
Primaries and grays controlled by the Global Swatch feature.
Primary 1
#0077B3
#0077B3
Primary 2
#F7F7F7
#F7F7F7
Primary 3
#1F1F23
#1F1F23
Secondary 1
#ACEB98
#ACEB98
Secondary 2
#B1DDF1
#B1DDF1
Secondary 3
#F96E46
#F96E46
Secondary 4
#3B3355
#3B3355
Typography
Headings, body and other common text elements.
Display Heading
Class: Display Heading
Font: DM Sans
Weight: 700
Font-size: 6 EM
Line-height: 1 EM
Font: DM Sans
Weight: 700
Font-size: 6 EM
Line-height: 1 EM
Heading 1
Class: All H1 Headings
Font: DM Sans
Weight: 300
Font-size: 4 EM
Line-height: 1.3 EM
Font: DM Sans
Weight: 300
Font-size: 4 EM
Line-height: 1.3 EM
Heading 2
Class: All H2 Headings
Font-size: 3 EM
Line-height: 1.6 EM
Font-size: 3 EM
Line-height: 1.6 EM
Heading 3
Class: All H3 Headings
Font-size: 2.5 EM
Line-height: 1.6 EM
Font-size: 2.5 EM
Line-height: 1.6 EM
Heading 4
Class: All H4 Headings
Font-size: 2 EM
Line-height: 1.6 EM
Font-size: 2 EM
Line-height: 1.6 EM
Heading 5
Class: Display Heading
Font-size: 1.5 REM
Line-height: 1.6 EM
Font-size: 1.5 REM
Line-height: 1.6 EM
Heading 6
Class: All H6 Headings
Font-size: 1 EM
Line-height: 1.3 EM
Font-size: 1 EM
Line-height: 1.3 EM
Large Text Large Link
Class: Text Large
Font-size: 1.5 EM
Line-height: 1.6 EM
Font-size: 1.5 EM
Line-height: 1.6 EM
Body Text Body Link
Class: Text Body
Font-size: 1.2 EM
Line-height: 1.6 EM
Font-size: 1.2 EM
Line-height: 1.6 EM
Small Text Small Link
Class: Text Small
Font-size: 0.75 EM
Line-height: 1.3 EM
Font-size: 0.75 EM
Line-height: 1.3 EM
Fine Print Text Fine Print Link
Class: Text Fine Print
Font-size: 0.75 EM
Line-height: 1 EM
Font-size: 0.75 EM
Line-height: 1 EM
Class: Text Fine Print
Font-size: 0.75 EM
Line-height: 1 EM
Font-size: 0.75 EM
Line-height: 1 EM
Buttons
Component, text style and size variations
Navigation Bar
Navbar component
Contact Form
Contact form component can be placed on any page. If you update in one instance, it will update across the entire website. By default, the component is hidden until triggered.
Form Selectables
Styling for checkboxes, selects and radios.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cards
Use these when you have multiple sets of content to display with images.
Card one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Card two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Card three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Extra Styles
Here we are defining extra styles like the max-width of our container element, our padding for each breakpoint, and the border radius which we're utilizing.
Containers on desktop
Class: Main Container
Max-width: 1600px
Padding top and bottom: 2 REM
Padding left and right: Auto
Max-width: 1600px
Padding top and bottom: 2 REM
Padding left and right: Auto
Containers on tablet
Class: Main Container
Max-width: 100%
Padding top and bottom: 2 REM
Padding left and right: 1 REM
Max-width: 100%
Padding top and bottom: 2 REM
Padding left and right: 1 REM
Containers on mobile landscape and portrait
Class: Main Container
Max-width: 100%
Padding top and bottom: 2 REM
Padding left and right: 1 REM
Max-width: 100%
Padding top and bottom: 2 REM
Padding left and right: 1 REM
Border radius used on elements
Border radius: 4px