01. Colors02. Typography03. UI Elements04. Components05. Layout06. Other Stuff

Typography

Aa

Open Sans
Bold

Aa

Open Sans
Semibold

Aa

Open Sans
Regular

Headings

The quick brown fox jumps over the lazy dog

H1 - 36PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H2 - 28PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H3 - 24PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H4 - 20PX / 1.3EM - Open Sans
The quick brown fox jumps over the lazy dog
H5 - 24PX / 1.3EM - Open Sans

Paragraphs

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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH TEXT - 16PX/ 1.8EM - Open Sans

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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH TEXT - 16PX/ 1.8EM - Open Sans

Others

Here is a caption to add on an element.

CAPTION - 12PX/ 1.4EM - Open Sans

Here is a label to add to your forms as needed.

LABEL - 16PX/ 1.4EM - Open Sans

Small text that you'll have on the page maybe for a small description.

SMALL - 14PX/ 1.4EM - Open Sans

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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

VERY SMALL - 11PX/ 1.6EM - Open Sans