Colors

Brand colors

primary
primary dark
primary light
secondary
secondary light
secondary dark

UI colors

Success
Info
Warning
Danger / error
Body
White
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600

Headings

Display 1
Display 2
Display 3

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lead text

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Big label

Left bold
Left regular
Disabled bold
Disabled regular
Error bold
Error regular

Buttons

Forms

Checkboxes

Radios

Inputs

Please provide a valid city.

Alerts

A simple primary alert - check it out!

A simple success alert - check it out!

A simple danger alert - check it out!

A simple warning alert - check it out!

A simple info alert - check it out!

A simple light alert - check it out!

A simple dark alert - check it out!