Colors

Primaries and grays controlled by the Global Swatch feature.
Primary 1
#0077B3
Primary 2
#F7F7F7
Primary 3
#1F1F23
Secondary 1
#ACEB98
Secondary 2
#B1DDF1
Secondary 3
#F96E46
Secondary 4
#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

Heading 1

Class: All H1 Headings
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

Heading 3

Class: All H3 Headings
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
Heading 5
Class: Display Heading
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
Large Text    Large Link
Class: Text Large
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
Small Text    Small Link
Class: Text Small
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
List Items
Class: Text Fine Print
Font-size: 0.75 EM
Line-height: 1 EM

Buttons

Component, text style and size variations
This is a button
Class: button
Font-size: 1.2 EM
Line-height: 1 EM
Padding top and bottom: 0.5 REM
Padding left and right: 2 REM
Letter spacing: 0.05 EM
Sizes
Default
Small
Icon Buttons
Icon Button
Back link

Navigation Bar

Navbar component

The Navbar symbol below can be placed on any page. If you update it in one instance (like below), it will update across the entire website.

It's common to have multiple different navbars. It's also common to move sub-elements outside of the container and removing the container from navbars. If you do this, make sure to add padding on the left and right hand side of the navbar.

Navbars are typically not inside of a container, they usually site inside of a section or above sections. Add the fixed class to it to make the navbar in the fixed position (this will place it at the top of the page and the navbar will stay on the page while you're scrolling).

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.
X

Connect with us

We never share your details with third parties.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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

Containers on tablet

Class: Main Container
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

Border radius used on elements

Border radius: 4px