Style Guide

Body copy is 18px/28px in Proxima Nova Regular. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur this is bolded text tempus porttitor. This is a link. It is red and bolded. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. This is a hovered link. It is darker and underlined. Nullam quis risus eget urna mollis ornare vel eu leo.

Headings

h1.xl — 60px

h1 — Heading 1 — 50px

h2 — Heading 2 — 46px

h3 — Heading 3 — 42px

h4 — Heading 4 — 38px

h5 — Heading 5 — 34px
h6 — Heading 6 —30px

 

Alternate Headings

h1 — Heading 1 — 36px

h2 — Heading 2 — 32px

h3 — Heading 3 — 28px

h4 — Heading 4 — 24px

h5 — Heading 5 — 20px
h6 — Heading 6 — 16px

Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.

Blockquotes

Blockquotes are Georgia Italic. 24px/36px. On blog posts they extend outside the left margin. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Tweet Quote

Tweet quotes are created using <blockquote class=”tweet”>, which means you’ll need to switch to HTML mode.

Tweet quotes are Georgia Italic. 24px/36px and blue. On click they will open a tweet window.

Buttons

Primary Button
Secondary Button
Black Button
Bordered Button
Subtle Button
Small Button
Large Button

Images

This is an image with a caption. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem.
This is an image with a caption. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem.
Images with .alignleft or .alignright will float left or right, respectively, and can only be up to 40% of the width of the container. Images set to .alignnone can fill full width ofthe container element. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.