Fonts <section>

Heading 1

font-family: "DinPro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 3.25rem
font-weight: 800
line-height: 1.25
margin: 0 0 1.5rem
text-transform: uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 2

font-family: "DinPro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 3rem
font-weight: 800
line-height: 1.25
margin: 0 0 1.5rem
text-transform: uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 3

font-family: "DinPro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 1.75rem
font-weight: 800
line-height: 1.25
margin: 0 0 1.5rem
text-transform: uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 4

font-family: "DinPro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 1.5rem
font-weight: 800
line-height: 1.25
margin: 0 0 1.5rem
text-transform: uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 5
font-family: "DinPro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 1.25rem
font-weight: 800
line-height: 1.25
margin: 0 0 1.5rem
text-transform: uppercase
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Heading 6
font-family: "DinPro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 1rem
font-weight: 800
line-height: 1.25
margin: 0 0 1.5rem
text-transform: uppercase
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Paragraph

font-family: "Helvetica Neue LT Pro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 1.25rem
font-weight: 800
line-height: 1.3
margin: 0 0 1.5rem
text-transform: uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Emphasis
font-family: "Helvetica Neue LT Pro", Arial, "Helvetica Neue", Helvetica, sans-serif
font-size: 1.25rem
font-weight: 800
line-height: 1.3
margin: 0 0 1.5rem
text-transform: uppercase
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Colors <section>

Blue

Hex: #39a9d8
Variable Name: $blue

Light Blue

Hex: #7ad1dc
Variable Name: $lightBlue

Lavendar

Hex: #7778b9
Variable Name: $lavender

Lime

Hex: #c7d528
Variable Name: $lime

Coral

Hex: #eb6a53
Variable Name: $coral

Corporate Colors

Corporate Blue

Hex: #154172
Variable Name: $corpBlue

Corporate Gray

Hex: #727373
Variable Name: $corpGray

Base Colors

White

Hex: #fff
Variable Name: $white

Black

Hex: #000
Variable Name: $black

Light Black

Hex: #222
Variable Name: $lightBlack

Light Gray

Hex: #f4f0f0
Variable Name: $lightGray

Medium Gray

Hex: #dcdcdc
Variable Name: $mediumGray

Dark Gray

Hex: #444
Variable Name: $darkGray

Page Alignment (Horizontal Spacing) <section>

basic full width section

 <section>
  <div class="section__inner">
    @Html.Kentico().WidgetZone()
  </div>
</section>

basic small full width section

 <section class="section--sm">
  <div class="section__inner">
    @Html.Kentico().WidgetZone()
  </div>
</section>

left rail area

main content area

 <section class="section--split">
  <div class="section__inner">
    <div class="section__rail">
      @Html.Kentico().WidgetZone()
    </div>
    <div class="section__main">
      @Html.Kentico().WidgetZone()
    </div>
  </div>
</section>

main content area

right rail area

 <section class="section--split">
  <div class="section__inner">
    <div class="section__main">
      @Html.Kentico().WidgetZone()
    </div>
    <div class="section__rail">
      @Html.Kentico().WidgetZone()
    </div>
  </div>
</section>

Composition Backgrounds <blue-composition>

Composition Padding <blue-composition>

Basic un-classed composition

 <blue-composition> </blue-composition>

Composition with small padding

 <blue-composition class="composition--padded-sm"> </blue-composition>

Composition with standard padding

 <blue-composition class="composition--padded"> </blue-composition>

Composition padding with flush top modifier

Can be used on standard or small padding

 <blue-composition class="composition--padded composition--padded-flush-top"> </blue-composition>

Composition padding with flush bottom modifier

Can be used on standard or small padding

 <blue-composition class="composition--padded composition--padded-flush-bottom"> </blue-composition>

Composition Margin <blue-composition>

Basic un-classed composition

 <blue-composition> </blue-composition>

Composition with small margins

 <blue-composition class="composition--spaced-sm"> </blue-composition>

Composition with standard margins

 <blue-composition class="composition--spaced"> </blue-composition>

Composition margins with flush top modifier

Can be used on standard or small margins

 <blue-composition class="composition--spaced composition--spaced-flush-top"> </blue-composition>

Composition margins with flush bottom modifier

Can be used on standard or small margins

 <blue-composition class="composition--spaced composition--spaced-flush-bottom"> </blue-composition>

Composition Builder <blue-composition>

12 Column Grid

2 Column Grid (always)
<div class="g__c g__c--6">
<div class="g__c g__c--6">
3 Column Grid (Medium Screen Sizes & Up)
<div class="g__c g__c--md4">
<div class="g__c g__c--md4">
<div class="g__c g__c--md4">
4 Column Grid (Large Screen Sizes & Up)
<div class="g__c g__c--lg3">
<div class="g__c g__c--lg3">
<div class="g__c g__c--lg3">
<div class="g__c g__c--lg3">
2/4 Column Grid (Screen < MD = 2 Columns; Screen > MD = 4 Columns)
<div class="g__c g__c--6 g__c--md3">
<div class="g__c g__c--6 g__c--md3">
<div class="g__c g__c--6 g__c--md3">
<div class="g__c g__c--6 g__c--md3">
Grid Builder

CMS Content Messages

Success - No Margin
<div class="cms-message  cms-message--success">{{message}}</div>

Your widget is ready to go.

Warning - No Margin
<div class="cms-message  cms-message--warning">{{message}}</div>

Your widget needs attention.

Error - No Margin
<div class="cms-message  cms-message--error">{{message}}</div>

Your widget is not configured.

Success - Margin 1rem Top/Bottom
<div class="cms-message cms-message--success cms-message--my1">{{message}}</div>

Your widget is ready to go.

Warning - Margin 1rem Top/Bottom
<div class="cms-message cms-message--warning cms-message--my1">{{message}}</div>

Your widget needs attention.

Error - Margin 1rem Top/Bottom
<div class="cms-message cms-message--error cms-message--my1">{{message}}</div>

Your widget is not configured.

Success - Margin 2rem Top/Bottom
<div class="cms-message cms-message--success cms-message--my2">{{message}}</div>

Your widget is ready to go.

Warning - Margin 2rem Top/Bottom
<div class="cms-message cms-message--warning cms-message--my2">{{message}}</div>

Your widget needs attention.

Error - Margin 2rem Top/Bottom
<div class="cms-message cms-message--error cms-message--my2">{{message}}</div>

Your widget is not configured.

Success - Margin 3rem Top/Bottom
<div class="cms-message cms-message--success cms-message--my3">{{message}}</div>

Your widget is ready to go.

Warning - Margin 3rem Top/Bottom
<div class="cms-message cms-message--warning cms-message--my3">{{message}}</div>

Your widget needs attention.

Error - Margin 3rem Top/Bottom
<div class="cms-message cms-message--error cms-message--my3">{{message}}</div>

Your widget is not configured.

Success - Margin 4rem Top/Bottom
<div class="cms-message cms-message--success cms-message--my4">{{message}}</div>

Your widget is ready to go.

Warning - Margin 4rem Top/Bottom
<div class="cms-message cms-message--warning cms-message--my4">{{message}}</div>

Your widget needs attention.

Error - Margin 4rem Top/Bottom
<div class="cms-message cms-message--error cms-message--my4">{{message}}</div>

Your widget is not configured.