Style Guide

Containers

Fullscreen Container
Class: "block-container--fullscreen"
Modifiers: "green", "gray", "black"

  • Used in:
  • Bulleted List
  • Image Gallery with Text
  • Name list
  • Title + Paragraph and Button
  • Text and Image
  • Centered CTA
  • 4 column CTA
  • Carousel - Homepage
  • Upcoming News - Homepage
  • Partner block
  • Single Blog / Press Release CTA
Max Container
Class: "block-container--max"

For the Header and Footer bottom.
Large Container
Class: "block-container--large"

Mainly for areas without a colored background.
  • Used in:
  • People block
  • Image Gallery with Text
  • Accordion
  • 3 column CTA
  • Upcoming Events - homepage
  • Testimonial Carousel
  • Related Articles
Medium Container
Class: "block-container--medium"

  • Used in:
  • Image and Caption
Narrow Container
Class: "block-container--narrow"

  • Used in:
  • WYSIWYG
  • Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Finibus Bonorum et Malorum Llrem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Colors

Primary
Orange
#E7571C
Black
#1A1919
Mariano Blue
#6A8AA7
Light Gray
#EFEFEF
Dark Sea Green
#9DAD8E

Typography

Primary
Aktiv Grotesk Extended

ÀÁÂÃABCDEFGHIJKLMNOPQRSTUVWXYZ àáâãäåabcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()+ ÆÇÈØ£×ßåæç
Aa
Secondary
Aktiv Grotesk

ÀÁÂÃABCDEFGHIJKLMNOPQRSTUVWXYZ àáâãäåabcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()+ ÆÇÈØ£×ßåæç
Aa
Accent
Chantal

ÀÁÂÃABCDEFGHIJKLMNOPQRSTUVWXYZ àáâãäåabcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()+ ÆÇÈØ£×ßåæç
Aa
Buttons
Rift

ÀÁÂÃABCDEFGHIJKLMNOPQRSTUVWXYZ àáâãäåabcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()+ ÆÇÈØ£×ßåæç
Aa
Heading Sizes
font-family: ‘Aktiv Grotesk Extended’
font-weight: 800
font-size: 70px (desktop), 40px (mobile)
line-height: 0.92
Heading 1
font-family: ‘Aktiv Grotesk‘
font-weight: 800
font-size: 50px (desktop), 30px (mobile)
line-height: 1.25
Heading 2
font-family: ‘Aktiv Grotesk‘
font-weight: 800
font-size: 30px (desktop), 20px (mobile)
line-height: 1.16
Heading 3
font-family: ‘Aktiv Grotesk‘
font-weight: 800
font-size: 20px
line-height: 1.5
Heading 4
font-family: ‘Rift‘
font-weight: 600
font-size: 16px
line-height: 1
Heading 5
Paragraphs
font-family: ‘Aktiv Grotesk‘
font-weight: Regular 400
font-size: 16px (desktop) - 14px (mobile)
line-height: 1.62
Body Copy. A series of
sentences together
which make a paragraph.
font-family: ‘Aktiv Grotesk Extended‘
font-weight: Medium 500
font-size: 30px
line-height: 1.26
Pull quote.
A series of words that
make up a sentence.

List Styles

Unordered List
  • Primary Unordered list Item
    • Secondary Unordered list Item
      • Tertiary Unordered list Item
  • Primary Unordered list Item
Ordered List
  1. Primary Unordered list Item
    1. Secondary Unordered list Item
      1. Tertiary Unordered list Item
  2. Primary Unordered list Item

Link Styles

This is the appearance of a link on light background.

This is the appearance of a visited link.

This is the appearance of a link that goes to an external website.

This is the appearance of a text link on a dark background.

This is a working text link.

Buttons

Primary Button

Default

Button

Hover

Button

Active

Button

Focus

Button

Disabled

Button

Working button

Button
Primary Button (Dark Background)

Default

Button

Hover

Button

Active

Button

Focus

Button

Disabled

Button

Working button

Button
Secondary Button

Default

Button

Hover

Button

Active

Button

Focus

Button

Disabled

Button

Working button

Button
Secondary Button (Dark Background)

Default

Button

Hover

Button

Active

Button

Focus

Button

Disabled

Button

Working button

Button

Other interactive elements

Content Cards

Content card with custom image

Body

Diet that Beats them All

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Read more

Content card with default image

Body

Diet that Beats them All

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Read more
Content teaser

Content teaser with custom image

Body
January 1st, 2025
John Doe

Diet that Beats them All

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Content teaser with default image

Body
January 1st, 2025
John Doe

Diet that Beats them All

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Slick controls

Default

Hover

Working controls

Form

Complete form
Name(Required)
Email(Required)
Please let us know what's on your mind. Have a question for us? Ask away.
0 of 600 max characters
Radio