Styleguide

Last Updated: February 23rd, 2022

Typography

Headings:

  • Color: #011638
  • 500 weight
  • DM Sans
  • Line-height: 1.2 em

.heroheading: 82px / 40px / 36px

To apply this to a heading module, add "heroheading" in the "Class" field on the "Advanced" tab. This will work on any heading tag.

Heading 1: 62px / 38px / 34px

Heading 2: 52px / 34px / 30px

Heading 3: 42px / 32px / 26px

Heading 4: 32px / 28px / 24px

Heading 5: 22px / 22px / 22px
Heading 6: 20px / 20px / 20px

Body Copy:

  • DM Sans
  • Color: #3d4f69
  • Size: 18px
  • Line-height: 1.6 em

Screen Width Breakpoints:

  • Desktop: >1440px
  • Tablet: 1440px
  • Mobile: 1024px

Colors

#011638

Primary Blue

Headings
Buttons

#3D4F69

Secondary Blue

Text

#97A0AE

Dark Grey

#C5C9D1

Medium Grey

#F4F5F8

Light Grey

#FFFFFF

White

#2C669B

--darkblue-product

#49C5B1

--darkteal-product

#F1C400

--darkyellow-product

#FA8955

--darkorange-product

#B6C044

--darkgreen-product

#88C5EE

--lightblue-product

#E0ECF7

--darkblue-product-accent

#E7F9F6

--darkteal-product-accent

#FDFAE1

--darkyellow-product-accent

#FFEFE6

--darkorange-product-accent

#EFF2CD

--darkgreen-product-accent

#EBF7FF

--lightblue-product-accent