Clicking this link will get you banned

Styles

Color Swatches

Hover over a color to view it's variable name and a summary of it's usage.

Typography

We have two font stacks in use - the sans-serif stack is used as the primary font, and the serif stack is used almost solely for authored content.

Primary Font

Open Sans is used as the primary font for all things.
Base font is Normal (400). Semibold is 600. Bold is 700.
Example
Open Sans. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Authoring Font

Freight Text is used for most authored content (body copy).
Always use Book (400).
Example
Freight Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Base Content Styles

The following section displays basic elements and their default styles.

Paragraphs & Copy

Base copy styles are Open Sans Normal 14px with a line height of 20px.
Examples

This is a paragraph. Here is some bold copy. Here is some italic copy. Explicabo fuga eaque doloremque quod iste nisi at quasi distinctio eligendi ducimus a suscipit assumenda repellendus corporis, eum, cum consequatur doloribus mollitia.

Here is some small content.

Code Blocks

This section demonstrates how inline code and block pre styles appear.
Examples

Here is some inline code.

Here is a
  block
of "code".

Blockquotes

This section displays our two blockquote formats, typically used in authored content, or comments and replies.
Examples

This is a blockquote.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, minima, voluptas atque laboriosam quas sequi ex molestias harum sed aut fugit vero soluta. Consectetur, at quod soluta vel natus ab!

This is how a blockquote would appear in a comment.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, minima, voluptas atque laboriosam quas sequi ex molestias harum sed aut fugit vero soluta. Consectetur, at quod soluta vel natus ab!

Links

This section shows the different types of link styles along with the elements or classes to display them that way.
Examples
small a
.content--primary
.content--secondary
.content--tertiary
.active
.disabled

Horizontal Rules

This section shows the different types of horizontal rules along with the elements or classes to display them that way.
Examples

.hr--dotted

.hr--thin

.hr--thick

Alternate Content Styles

This section lists our various content modifier classes and the corresponding styles they produce.
Examples
.content--secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.content--tertiary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.content--error

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.content--success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.content--warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.copy--medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.copy--xsmall

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

.copy--xxsmall

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia saepe inventore error eligendi harum velit iste tenetur cupiditate nobis nulla.

Headings

We are currently using headings 1 through 3, and heading 6.

Heading 1

Bold 52px / 62px
Margin 70px / 20px
Example

This is an H1 Heading

Heading 2

Bold 34px / 40px
Margin 70px / 30px
Example

This is an H2 Heading

Heading 3

Bold 22px / 27px
Margin 14px / 14px
Example

This is an H3 Heading

Heading 6

Bold 12px / 21px
Margin 0 / 30px
Example
This is an H6 Heading