Primary colors

The primary application colors are neutralized to allow sparse use of the primary blue and content to take center stage.

Anchor
#404040
Primary
#3887be
Gray
#eeeeee
Light
#f8f8f8
<div class='pad2 clearfix center'>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-denim row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Anchor</h5>
      <strong class='small quiet'>#404040</strong>
    </div>
  </div>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-blue row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Primary</h5>
      <strong class='small quiet'>#3887be</strong>
    </div>
  </div>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-gray row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Gray</h5>
      <strong class='small quiet'>#eeeeee</strong>
    </div>
  </div>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-light row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Light Gray</h5>
      <strong class='small quiet'>#f8f8f8</strong>
    </div>
  </div>
</div>

Contextual colors

Styles for info, success, warning, and error messages. Every color in this palette was chosen to work beautifully together.

Success
#56b881
Danger
#ee6565
Warning
#f1f075
Info
#f0f8fc
<div class='pad2 clearfix center'>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-green row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Success</h5>
      <strong class='small quiet'>#56b881</strong>
    </div>
  </div>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-red row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Danger</h5>
      <strong class='small quiet'>#ee6565</strong>
    </div>
  </div>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-yellow row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Warning</h5>
      <strong class='small quiet'>#f1f075</strong>
    </div>
  </div>
  <div class='col-sm-3 pad1'>
    <div class='pad2 fill-light-blue row7 round-top keyline-top keyline-right keyline-left'>
    </div>
    <div class='pad1 keyline-all round-bottom strong'>
      <h5>Info</h5>
      <strong class='small quiet'>#f0f8fc</strong>
    </div>
  </div>
</div>

Background fills

Select from one of many fill-* classes to add background color to your container.

.fill-dark #404040
.fill-gray #eeeeee
.fill-light #f8f8f8
.fill-white #ffffff
.fill-blue #3887be
.fill-light-blue #f0f8fc
.fill-turquoise #3bb2d0
.fill-denim #3c4e5a
.fill-navy #28353d
.fill-navy-dark #222b30
.fill-purple #8a8acb
.fill-green #56b881
.fill-yellow #f1f075
.fill-red #ee6565
.fill-orange #ee8a65
<div class='pad2'>
  <div class='fill-dark pad2 dark contain'>
    <span class='fill-darken0'>.fill-dark</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #404040
    </span>              
  </div>
  <div class='fill-gray pad2 contain'>
    <span class='fill-darken0'>.fill-gray</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #eeeeee
    </span>              
  </div>
  <div class='fill-light pad2 contain'>
    <span class='fill-darken0'>.fill-light</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #f8f8f8
    </span>              
  </div>
  <div class='fill-white pad2 contain'>
    <span class='fill-darken0'>.fill-white</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #ffffff
    </span>              
  </div>
  <div class='fill-blue pad2 dark contain'>
    <span class='fill-darken0'>.fill-blue</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #3887be
    </span>              
  </div>
  <div class='fill-light-blue pad2 contain'>
    <span class='fill-darken0'>.fill-light-blue</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #f0f8fc
    </span>              
  </div>
  <div class='fill-turquoise pad2 dark contain'>
    <span class='fill-darken0'>.fill-turquoise</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #3bb2d0
    </span>              
  </div>
  <div class='fill-denim pad2 dark contain'>
    <span class='fill-darken0'>.fill-denim</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #3c4e5a
    </span>              
  </div>
  <div class='fill-navy pad2 dark contain'>
    <span class='fill-darken0'>.fill-navy</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #28353d
    </span>              
  </div>
  <div class='fill-navy-dark pad2 dark contain'>
    <span class='fill-darken0'>.fill-navy-dark</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #222b30
    </span>              
  </div>
  <div class='fill-purple pad2 dark contain'>
    <span class='fill-darken0'>.fill-purple</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #8a8acb
    </span>              
  </div>
  <div class='fill-green pad2 dark contain'>
    <span class='fill-darken0'>.fill-green</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #56b881
    </span>              
  </div>
  <div class='fill-yellow pad2 contain'>
    <span class='fill-darken0'>.fill-yellow</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #f1f075
    </span>              
  </div>
  <div class='fill-red pad2 dark contain'>
    <span class='fill-darken0'>.fill-red</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #ee6565
    </span>              
  </div>
  <div class='fill-orange pad2 dark contain'>
    <span class='fill-darken0'>.fill-orange</span>
    <span class='pin-topright pad0y pad1x fill-darken0 small'>
      #ee8a65
    </span>              
  </div>
</div>

Darken & Lighten

Lighten or darken backgrounds and create endless variety using our nifty .fill-darken and .fill-lighten helpers.

.fill-darken0
.fill-darken1
.fill-darken2
.fill-darken3
.fill-lighten0
.fill-lighten1
.fill-lighten2
.fill-lighten3
<div class='pad2 fill-blue'>
  <div class='fill-darken0 pad2 dark contain'>
    <span class='fill-darken0'>.fill-darken0</span>
  </div>
  <div class='fill-darken1 pad2 dark contain'>
    <span class='fill-darken0'>.fill-darken1</span>
  </div>            
  <div class='fill-darken2 pad2 dark contain'>
    <span class='fill-darken0'>.fill-darken2</span>
  </div>            
  <div class='fill-darken3 pad2 dark contain space-bottom'>
    <span class='fill-darken0'>.fill-darken3</span>
  </div>            
  <div class='fill-lighten0 pad2 dark contain'>
    <span class='fill-darken0'>.fill-lighten0</span>
  </div>            
  <div class='fill-lighten1 pad2 dark contain'>
    <span class='fill-darken0'>.fill-lighten1</span>
  </div>            
  <div class='fill-lighten2 pad2 dark contain'>
    <span class='fill-darken0'>.fill-lighten2</span>
  </div>            
  <div class='fill-lighten3 pad2 dark contain'>
    <span class='fill-darken0'>.fill-lighten3</span>
  </div>            
</div>
Made with in Norcross by the UX Team.