Style Guide

Fonts

Font-name?

Headings

Font-name?

Miscellaneous

Font-name?

Paragraphs

Buttons

Headings

Lorem ipsum dolor

Heading 1 <h1>

Lorem ipsum dolor

Heading 2 <h2>

Lorem ipsum dolor

Heading 3 <h3>

Lorem ipsum dolor

Heading 4 <h4>

Paragraphs

Lorem ipsum dolor maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.

Paragraph 1

Lorem ipsum dolor maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.

Paragraph 2

Lorem ipsum dolor maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.

Paragraph 3

Lorem ipsum dolor maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.

Monospace

Buttons

Links

Primary Button

Secondary Button

Tertiary Button

Text Link

Lightest 1 (class="white")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Lightest 2 (class="white-bold")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Light 1 (class="light")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Light 2 (class="light-bold")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Bright 1 (class="bright-inverse")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Bright 2 (class="bright")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Dark 1 (class="dark")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Dark 2 (class="dark-bold")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Darkest 1 (class="black")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.
 

Darkest 2 (class="black-bold")

This is my heading 1

This is my heading 2

This is my heading 3

This is my heading 4

This is my paragraph 1

This is my paragraph 2

This is my paragraph 3

This is my monospace font style.