Style Guide

Our brand, and how we use it.

Headings

This is a standard paragraph preceding specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

H2 - Heading Two

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

H3 - Heading Three

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

H4 - Heading Four

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

H5 - Heading Five

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

Lead Text

It’s 2015 and you’re ready to get serious about your music. You might have a multitude of goals you’d like to accomplish: maybe you’re ready to make the jump from hobby to career, maybe you’re ready to produce your album, or maybe you’re ready to play your first show.

This is a standard paragraph following specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

Blockquote

This is a standard paragraph preceding specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

"We enjoy the technical aspects of design and development, so Cedaro is going to be our digital playground of sorts, where we share tips, tricks and code, open source as much as possible, and release a few products to keep it afloat — basically just having fun and helping people by doing what we enjoy."

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

Pull Quote

This is a standard paragraph preceding specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

"A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines."

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

Image Caption

This is a standard paragraph preceding specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

A placeholder image.
Image Caption: This is a placeholder image.

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

Preformatted Text

This is a standard paragraph preceding specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

function blazersix_is_token_valid( $url ) {
$parts = parse_url( $url );

if ( isset( $parts['query'] ) ) {
wp_parse_str( $parts['query'], $query_args );

if ( isset( $query_args['token'] ) && $query_args['token'] == blazersix_get_url_token( $url ) ) {
return true;
}
}

return false;
}

Similar to the first paragraph, this is a standard paragraph, except it follows specially formatted content. Its purpose is to demonstrate how the formatted content should interact with surrounding text.

Brand Colors

Typography

Various weights of Proxima Nova are used throughout the site. Main content areas, such as blog posts or page content, are set at 18px.

color: #5c5f66;
font-family: Proxima Nova;
font-size: 18px;
font-weight: 400;
line-height: 1.5;

A reduced size of 16px is used for text that doesn’t serve as the main content of the page, text that is split into multiple columns, and the account admin UI.

color: #5c5f66;
font-family: Proxima Nova;
font-size: 16px;
font-weight: 400;
line-height: 1.5;

Buttons

Primary :hover Primary button, used for calls-to-action. .button

Small :hover Smaller version primary button. .button .button--small

Secondary :hover Alternate button style. .button .button--secondary

Secondary :hover Alternate button inverted style. .button .button--secondary-alt

Form button styles. button, input[type="button"], input[type="reset"], input[type="submit"]

Overlay :hover Alternate button style on dark/photographic background. .button .button--overlay