Style Guidance

This document provides style guidance for branded content from, for and about Code for New Orleans, a brigade of Code for America.

Colors

The color palette for the Code for New Orleans brand is taken from the City of New Orleans flag, with accent colors added.

Brand Red
#D72A00
Brand Dark Blue
#11194E
Brand Gold
#EEB500
Brand Accent
#E8E5E1
Brand Highlight
#D1FCFF

Typography

Typography on Code for New Orleans materials uses two OFL-licensed fonts: Inconsolata for headers and wordmarks, and Open Sans for other text content.

Code for New Orleans

Wordmark

The "Code for New Orleans" wordmark is set in Inconsolata in the brand dark blue.

Header 1

Red 54px Bold

Header 2

Blue 40px + Border

Header 3

Blue 36px

Header 4

Blue 32px

Header 5

Blue 28px Underlined

Header 6

Blue 24px Underlined

Headers

Headers are set in Inconsolata in descending sizes.

The Level 1 header is set in brand red in bold.

The Level 2 header is set with a 1 pixel wide bottom border in brand gold that spans the width of the text area.

All other headers are set in brand dark blue.

Level 5 and level 6 headers are underlined.

Body Text

20px Black

Body Text

Body text is set in Open Sans, 20 pixels size, in black.

Pull Quote

28px Blue, Highlight Background

Pull Quotes or Highlights

Pull quotes or highlights are set in Open Sans, 28 pixels size, in brand dark blue.

They are set on a brand highlight sky blue background with at least 20 pixels padding on every side.

Logo, Display & Variants

The logo of Code for New Orleans is modeled after a self-closing HTML tag with the "tag name" as the iconic three golden fleur-de-lis symbols found in the New Orleans city flag. Below the symbol, the wordmark "Code for New Orleans" is set in Inconsolata, an OFL-licensed font.

Code for New Orleans Logo

The logo should be displayed on a white background with at least 1 em (the height of the "M" character) of space surrounding it on all sides.

Code for New Orleans Logo - Initiative

The wordmark may be altered to read "an initiative of Code for New Orleans", set on two lines so that the "Code for New Orleans" wordmark is on its own line.

Code for New Orleans Logo - Project

The wordmark may be altered to read "a project of Code for New Orleans", set on two lines so that the "Code for New Orleans" wordmark is on its own line.