Primary Colors

• $primary-color
• $primary-color-light
• $primary-color-dark
• $success-color
• $danger-color
• $danger-color-light
• $danger-color-lightest
• $white
• $black

Neutral Colors

• $neutral-color-lightest
• $neutral-color-light
• $neutral-color
• $neutral-color-dark
• $neutral-color-darkest

Text Colors

• $text-color-lightest
• $text-color-light
• $text-color
• $text-color-dark
• $text-color-darkest

Buttons

• .
  Submit Disabled
• .action
  Submit Disabled
• .success
  Submit Disabled
• .danger
  Submit Disabled
• .info
  Submit Disabled
• .clean
  Submit Disabled
• .hollow
  Submit Disabled

• .smallest
  Submit
• .small
  Submit
• .big
  Submit
• .biggest
  Submit

• .wide
  Submit
• .wider
  Submit

Paddings

• $padding-smallest
• $padding-small
• $padding
• $padding-big
• $padding-biggest

Margins

• $margin-smallest
• $margin-small
• $margin
• $margin-big
• $margin-biggest

Spacing

• $spacing
• $spacing-small
• $spacing-smallest
• $spacing-big
• $spacing-biggest

Border Radiuses

• $border-radius-smallest
• $border-radius-small
• $border-radius
• $border-radius-big
• $border-radius-biggest

Form Elements

Typography

• h1 - some header text

• h2 - some header text

• h3 - some header text

• h4 - some header text

• h5 - some header text

• h6 - some header text

• time - 10/24/2015
• label
• this is strong
• a - this is a link
• a.button.action

• p (Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore)

• p.error

• p.secondary

Font Sizes

• $font-size-smallest
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-size-small
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-size
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-size-big
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-size-biggest
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore

Font Weights

• $font-weight-lightest
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-weight-light
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-weight
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-weight-bold
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $font-weight-boldest
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore

Line Heights

• $line-height-smallest
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $line-height-small
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $line-height
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $line-height-big
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore
• $line-height-biggest
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore

Icons

checkmark

• .icon.checkmark.smallest
• .icon.checkmark.small
• .icon.checkmark.
• .icon.checkmark.big
• .icon.checkmark.biggest

checkmark-white

• .icon.checkmark-white.smallest
• .icon.checkmark-white.small
• .icon.checkmark-white.
• .icon.checkmark-white.big
• .icon.checkmark-white.biggest

bubble

• .icon.bubble.smallest
• .icon.bubble.small
• .icon.bubble.
• .icon.bubble.big
• .icon.bubble.biggest

envelope

• .icon.envelope.smallest
• .icon.envelope.small
• .icon.envelope.
• .icon.envelope.big
• .icon.envelope.biggest

circle-arrow

• .icon.circle-arrow.smallest
• .icon.circle-arrow.small
• .icon.circle-arrow.
• .icon.circle-arrow.big
• .icon.circle-arrow.biggest

circle-arrow.right

• .icon.circle-arrow.right.smallest
• .icon.circle-arrow.right.small
• .icon.circle-arrow.right.
• .icon.circle-arrow.right.big
• .icon.circle-arrow.right.biggest

arrow

• .icon.arrow.smallest
• .icon.arrow.small
• .icon.arrow.
• .icon.arrow.big
• .icon.arrow.biggest

arrow.right

• .icon.arrow.right.smallest
• .icon.arrow.right.small
• .icon.arrow.right.
• .icon.arrow.right.big
• .icon.arrow.right.biggest

warning

• .icon.warning.smallest
• .icon.warning.small
• .icon.warning.
• .icon.warning.big
• .icon.warning.biggest

download

• .icon.download.smallest
• .icon.download.small
• .icon.download.
• .icon.download.big
• .icon.download.biggest

cross

• .icon.cross.smallest
• .icon.cross.small
• .icon.cross.
• .icon.cross.big
• .icon.cross.biggest

plus

• .icon.plus.smallest
• .icon.plus.small
• .icon.plus.
• .icon.plus.big
• .icon.plus.biggest

plus.hollow

• .icon.plus.hollow.smallest
• .icon.plus.hollow.small
• .icon.plus.hollow.
• .icon.plus.hollow.big
• .icon.plus.hollow.biggest

Lists

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

HR

Misc

• .elevated
• .elevated-bottom
• .notification[.absolute]
  88

Mixins

• @mixin font-line($pt)
• @mixin vertical-align-middle() # Uses inline-block and vertical-align
• @mixin bg-image-ratio($low, $high)
• @mixin bg-cover($src)
• @mixin block-center()
• @mixin exclude-first($property: margin-top, $value: 10px, $first-value: 0px)