style guide

Modular & Reusable

Colors
A conveniently prepared palette to easily adjust all colors.
Primary 1
Primary 2
Primary 3
Primary 4
Gray 1
Gray 2
Gray 3
Gray 4
White
Success
Warning
Danger
Typography
Headings, body and other common text elements.

Display

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Large Text  Large Link 
Body Text  Body Link
Small Text  Small Link
Uppercase Text
Icons - Interface
Common interface iconography
Icons - Social
Common social network icons
Buttons
Component, text style and size variations
Form Inputs
Size and state variations for text inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
* Input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Selectables
Checkboxes and Radios
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Badges
Combine with other components to display metadata
BG Primary 1
BG Primary 2
BG Primary 3
BG Primary 4
BG Gray 1
BG Gray 2
BG Gray 3
BG Gray 4
BG White
BG Success
BG Warning
BG Danger
Avatars
Represent users about the interface
Cards
Structural component for displaying boxed content
subheading

Heading

This is some text inside of a div block.
subheading

Heading

Pellentesque. Mauris, rutrum libero elit ut sit et praesent pellentesque amet. Vel urna, elementum tincidunt enim.