Flames AAA Styleguide

Colors

Primary Colors

Primary/Acent
#84bee3
Primary/Titles
#331c0c
Primary/Paragraphs
#495057

Secondary Colors

Secondary 1
#e37328
Secondary 1
#868e96

Neutral Colors

Neutral 300
#adb5bd
Neutral 200
#dee2e6
Neutral 100
#f8f9f9
White
#FFFFFF

Typography

NHL Calgary flames

Display 1 Text

Display 1 - 64px/1.098em

Display 2 Text

Display 2 - 48px/1.333em

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 64px/1.297em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 48px/1.333em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 27px/1.259em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 18px/1.667em - Lato

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large - 24px/1.5em - Lato

Bold - Lorem ipsum dolor sit amet

Bold Text - Lato

Bold - Lorem ipsum dolor sit amet

Italic Text - Lato
Block Quote - Lato
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Block Quote - Lato
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit enim tu.
  • Lorem ipsum dolor sit amet.
Bullet List - Lato
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit enim tu.
  4. Lorem ipsum dolor sit amet.
Numbered List - Lato

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large

Cards

Discover latest
Marketing Trends

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dictum sollicitudin diam ac lorem cras tellus facilisis ut. Morbi dictum ut sed.

18+ Hours of Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dictum sollicitudin diam ac.