Website Style Guide

vw

vh

Font-size: 135px

h1 Header

h1 Header

*The outlined style is only used for h1 & h2 header elements.

Font-size: 95px

h2 Header

h2 Header

Font-size: 46px

h3 Header

h3 Header

Font-size: 30px

h4 Header

h4 Header

Font-size: 18px

h5 Headers, 18px
h5 Headers, 18px

Font-size: 18px

h6 Headers, 12px
h6 Headers, 12px

h2 Section Header

Body Copy

Proin semper ante eu sapien vehicula, id auctor quam interdum. Sed velit nulla, mattis eget dapibus non, luctus vitae ante. Morbi non mattis neque. Cras aliquam justo ac erat semper blandit. Nunc diam tortor, bibendum in lectus nec, rutrum ultrices massa. Mauris lobortis posuere odio id rhoncus. Maecenas velit mi, tincidunt nec volutpat et, maximus imperdiet ex. Sed eros metus, tincidunt vel pellentesque et, porta ut urna. Proin ac arcu sed diam feugiat ultrices.

Font-size: 20px

Massa. Mauris lobortis posuere odio id rhoncus. Maecenas velit mi, tincidunt nec volutpat et, maximus imperdiet ex. Sed eros metus, tincidunt vel pellentesque et, porta ut urna. Proin ac arcu sed diam feugiat ultrices.

Font-weight: 400

Proin semper ante eu sapien vehicula, id auctor quam interdum. Sed velit nulla, mattis eget dapibus non, luctus vitae ante. Morbi non mattis neque. Cras aliquam justo ac erat semper blandit. Nunc diam tortor, bibendum in lectus nec, rutrum ultrices massa. Mauris lobortis posuere odio id rhoncus. Maecenas velit mi, tincidunt nec volutpat et, maximus imperdiet ex. Sed eros metus, tincidunt vel pellentesque et, porta ut urna. Proin ac arcu sed diam feugiat ultrices.

Line-height: 30px

Proin semper ante eu sapien vehicula, id auctor quam interdum. Sed velit nulla, mattis eget dapibus non, luctus vitae ante. Morbi non mattis neque. Cras aliquam justo ac erat semper blandit. Nunc diam tortor, bibendum in lectus nec, rutrum ultrices massa. Mauris lobortis posuere odio id rhoncus. Maecenas velit mi, tincidunt nec volutpat et, maximus imperdiet ex. Sed eros metus, tincidunt vel pellentesque et, porta ut urna. Proin ac arcu sed diam feugiat ultrices.

Buttons & Links

Inline Links

Proin semper ante eu sapien vehicula, id auctor quam interdum. Sed velit nulla, mattis eget dapibus non, luctus vitae ante.

Mauris lobortis posuere odio id rhoncus. Maecenas velit mi, tincidunt nec volutpat et, maximus imperdiet ex. Sed eros metus, tincidunt vel pellentesque et, porta ut urna. Proin ac arcu sed diam feugiat ultrices.

Color Sets

Solids

Red

RGBA: 215, 39, 46, 1
HEX: #D7272E

White

RGBA: 255, 255, 255, 1
HEX: #FFFFFF

Light Gray

RGBA: 247, 247, 247, 1
HEX: #F7F7F7

Dark Gray

RGBA: 65, 60, 66, 1
HEX: #413C42

Black

RGBA: 0, 0, 0, 1
HEX: #000000

Gradients

Light to Dark

RGBA: 247, 247, 247, 1
HEX: #F7F7F7

Dark Light Dark

RGBA: 65, 60, 66, 1
HEX: #413C42

Dark to Light

RGBA: 0, 0, 0, 1
HEX: #000000

Drag View Project