Style Guide

UI style guide helps build and further maintain your website or application by ensuring that typography, colors and all crucial UI elements are used in the same way all around on every single page - hooked directly into the CSS file.

Font style: Montserrat Bold

Typography / Headlines

Heading H1

Faux H1

Heading H2

Faux H2

Heading H3

Faux H3

Heading H4

Faux H4

Heading H5

Faux H5

Heading H6

Faux H6

Font style: Montserrat Regular

Typography / Body Copy

I'm small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean nibh et justo cursus id rutrum.

I'm default paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. I'm Default text Link. enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

I'm large paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum cursus, mi quis viverra ornare, lorem ipsum.

I'm default block quote. Lorem ipsum dolor sit amet, consectetur elit suspendisse lorem eros elementum, lorem ipsum dolore.

I'm defaul list item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. I'm Default text Link. enim in eros elementum tristique cursus, mi quis viverra.
I'm defaul list item
I'm defaul list item

I'm ordered list item
I'm ordered list item
I'm ordered list item

Color Palette

Active Colors

Active

Hover

Secondary Action

Typography Colors

Headings

Default Copy

Light Copy

Other Colors

Purple

Darker Purple

Blue

Darker Blue

Red

Grey Colors

Light Grey

Tint

Call to Action

I'm Default Button

I'm Default Link