Design Guide

Typography
Headings, body and other
common text elements.
Display one

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
Label
Text Muted
Subheading
Small text

Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum. Integer et augue id enim vestibulum ullamcorper

Larger text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Colors
A complete color swatch
used to color all interface
elements on the website.
 
Primary 1
#333333
Primary hover
#243029
Gray
#333333
Dimgray
#696969
Dark Gray
#111112
Black
#000000
Light Grey
#f7f7f7
White
#ffffff
Success
#51d37e
Review star
#f9bb00
Warning
#e67a00
Danger
#fc4343
Spacing and border radius
A complete spacing guide
Selectors for padding, margin
and space below items
Padding 1x
Padding 2x
Padding 3x
Space 1x
Space 2x
Space 3x
Space 4x
border-radius
Space Bottom 1x
Space Bottom 2x
Space Bottom 3x
Space Bottom 4x
Buttons
Button styles and size variations
use .btn for size and use primary,
outline or other selectors for styling
Icons
Common interface
and social network iconography
 
icon-1x
icon-2x
icon-3x
icon-4x
Image mute
image-muted is grayscale. 
good for logos
Normal image
.image-muted (gray scale 100%)
Shadow
If you need an element to stand out
you can use the .shadow class
.shadow
picture