Hover over a color to view it's variable name and a summary of it's usage.
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.
The following section displays basic elements and their default styles.
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
and block
pre
styles appear.
Here is some
inline code.
Here is a block of "code".
blockquote
formats, typically used in authored content, or comments and replies.
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!
small a
.content--primary
.content--secondary
.content--tertiary
.active
.disabled
.hr--dotted
.hr--thin
.hr--thick
.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.
We are currently using headings 1 through 3, and heading 6.