Style Tile

This is some text about the style tile, and how awesome it is and to use it. We will have a link right here to the main page for people to clone it.

LOGO - ON WHITE​

LOGO - ON DARK

ICON - ON WHITE

ICON - ON DARK

FAVICON - ON WHITE

FAVICON - ON DARK

COLORS

Primary – Tomato
Heading 1
#ff4b01
Secondary – Sun
#faa000
Body – Off Black
Body Copy
#313131
Grey – Slate Lite
#879499
Grey – Slate
#3e4749
Color Hex — Colorhexa

TYPOGRAPHY

EXAMPLE

Hero Heading

3rem / 48px

Font Family

Heading 1

2.5rem / 40px

Font Family

Heading 2

2rem / 32px

Font Family

Heading 3

1.75rem / 28px

Font Family

Body Copy

1rem / 16px

Font Family

Small

0.75rem / 12px

Font Family

Typography Ratio — Visual Type Scale

Heading 1

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.

Heading 2

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.

BUTTONS & LINKS

Duis cursus, mi quis viverra ornare, this is an example of an inline link. Eros dolor interdum nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

This is a regular link.

Duis cursus, mi quis viverra ornare, this is an example of an inline link. Eros dolor interdum nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

This is a regular link.

ICONOGRAPHY ( SVG )

BLOCKQUOTES

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

— AUTHOR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

— AUTHOR

HORIZONTAL RULES \ DIVIDER

FORMS & FIELDS

TESTIMONIALS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
Designer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
Designer

IMAGE OVERLAY ( EXAMPLE )

Lorem ipsum

BRAND NAME

Lorem ipsum

BRAND NAME

SECTION - TITLE ( EXAMPLE )

Heading 2

Alt Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing 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.