-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (129 loc) · 6.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans" rel="stylesheet">
<link href="assets/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo"></div>
<h1>Style Guidance</h1>
</header>
<div class="content">
<p><strong>This document provides style guidance for branded content from, for and about Code for New Orleans, a brigade of Code for America.</strong></p>
<h2>Colors</h2>
<p>The color palette for the Code for New Orleans brand is taken from the City of New Orleans flag, with accent colors added.</p>
<div class="examples">
<div class="display-example">
<div class="display-example-color">
<div class="color-block brand-bg-red"></div>
<div class="color-text">Brand Red<br/>#D72A00</div>
</div>
<div class="display-example-color">
<div class="color-block brand-bg-blue"></div>
<div class="color-text">Brand Dark Blue<br/>#11194E</div>
</div>
<div class="display-example-color">
<div class="color-block brand-bg-gold"></div>
<div class="color-text">Brand Gold<br/>#EEB500</div>
</div>
<div class="display-example-color">
<div class="color-block brand-bg-accent"></div>
<div class="color-text">Brand Accent<br/>#E8E5E1</div>
</div>
<div class="display-example-color">
<div class="color-block brand-bg-highlight"></div>
<div class="color-text">Brand Highlight<br/>#D1FCFF</div>
</div>
</div>
</div>
<h2>Typography</h2>
<p>Typography on Code for New Orleans materials uses two OFL-licensed fonts: <em>Inconsolata</em> for headers and wordmarks, and <em>Open Sans</em> for other text content.</p>
<div class="examples">
<div class="display-example">
<div class="display-example-narrow">
<p class="wordmark">Code for New Orleans</p>
</div>
<div class="display-example-wide">
<h3>Wordmark</h3>
<p>The "Code for New Orleans" wordmark is set in <em>Inconsolata</em> in the brand dark blue.</p>
</div>
</div>
<div class="display-example">
<div class="display-example-narrow">
<h1>Header 1</h1>
<p class="brand-red mono">Red 54px Bold</p>
<h2>Header 2</h2>
<p class="brand-blue mono">Blue 40px + Border</p>
<h3>Header 3</h3>
<p class="brand-blue mono">Blue 36px</p>
<h4>Header 4</h4>
<p class="brand-blue mono">Blue 32px</p>
<h5>Header 5</h5>
<p class="brand-blue mono">Blue 28px Underlined</p>
<h6>Header 6</h6>
<p class="brand-blue mono">Blue 24px Underlined</p>
</div>
<div class="display-example-wide">
<h3>Headers</h3>
<p>Headers are set in <em>Inconsolata</em> in descending sizes.</p>
<p>The Level 1 header is set in brand red in bold.</p>
<p>The Level 2 header is set with a 1 pixel wide bottom border in brand gold that spans the width of the text area.</p>
<p>All other headers are set in brand dark blue.</p>
<p>Level 5 and level 6 headers are underlined.</p>
</div>
</div>
<div class="display-example">
<div class="display-example-narrow">
<p>Body Text</p>
<p>20px Black</p>
</div>
<div class="display-example-wide">
<h3>Body Text</h3>
<p>Body text is set in <em>Open Sans</em>, 20 pixels size, in black.</p>
</div>
</div>
<div class="display-example">
<div class="display-example-narrow">
<p class="highlight">Pull Quote</p>
<p>28px Blue, Highlight Background</p>
</div>
<div class="display-example-wide">
<h3>Pull Quotes or Highlights</h3>
<p>Pull quotes or highlights are set in <em>Open Sans</em>, 28 pixels size, in brand dark blue.</p>
</p>They are set on a brand highlight sky blue background with at least 20 pixels padding on every side.</p>
</div>
</div>
</div>
<h2>Logo, Display & Variants</h2>
<p>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 <em>Inconsolata</em>, an OFL-licensed font.</p>
<div class="examples">
<div class="display-example">
<div class="display-example-narrow">
<img src="assets/images/cfno-logo.png" alt="Code for New Orleans Logo">
</div>
<div class="display-example-wide">
<p>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.</p>
</div>
</div>
<div class="display-example">
<div class="display-example-narrow">
<img src="assets/images/cfno-logo-initiative.png" alt="Code for New Orleans Logo - Initiative">
</div>
<div class="display-example-wide">
<p>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.</p>
</div>
</div>
<div class="display-example">
<div class="display-example-narrow">
<img src="assets/images/cfno-logo-project.png" alt="Code for New Orleans Logo - Project">
</div>
<div class="display-example-wide">
<p>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.</p>
</div>
</div>
</div>
</div>
</body>
</html>