-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathbranding.html
160 lines (148 loc) · 6.69 KB
/
branding.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
---
permalink: /branding/
layout: default
suffixes:
- Colours,
- Fonts,
- Icons,
- Logos,
- Us
title: Branding Guidelines
---
<h1>{{page.title}}</h1>
<p>When creating resources and communications for CodeWith, please adhere to these guidelines.</p>
<h2>Fonts</h2>
<p>CodeWith’s display typeface, to be used for titles, headings, and generally large text, is Boogaloo, which is
available to view and download at Google fonts: <a href="https://fonts.google.com/specimen/Boogaloo" target="_blank"
rel="noopener">Boogaloo</a></p>
<p>CodeWith’s body typeface, to be used for the main textual content of web pages and documents, is Roboto, which is
available to view and download at Google fonts: <a href="https://fonts.google.com/specimen/Roboto" target="_blank"
rel="noopener">Roboto</a></p>
<h2>Colours</h2>
<br />
<div class="row">
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#1f5237" />
</svg>
<p class="colour-label">#1f5237</p>
</div>
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#00793c" />
</svg>
<p class="colour-label">#00793c</p>
</div>
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#009545" />
</svg>
<p class="colour-label">#009545</p>
</div>
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#00b050" />
</svg>
<p class="colour-label">#00b050</p>
</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#a52a2a" />
</svg>
<p class="colour-label">#a52a2a</p>
</div>
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#000000" />
</svg>
<p class="colour-label">#000000</p>
</div>
<div class="col-4 col-md-2 text-center">
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24" fill="#f8f8f8" stroke="#000" stroke-width="0.5" />
</svg>
<p class="colour-label">#f8f8f8</p>
</div>
</div>
<br />
<p>CodeWith’s colour palette can also be found on Coolors: <a
href="https://coolors.co/1f5237-00793c-009545-00b050-a52a2a-000000-f8f8f8" target="_blank"
rel="noopener">CodeWith's Colour Palette</a></p>
<p>Please ensure that text-background pairings have sufficient colour contrast for everyone to read. See information
from the WCAG on colour contrast <a
href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast" target="_blank"
rel="noopener">here</a> and a useful contrast checking tool <a href="https://contrastchecker.com/"
target="_blank" rel="noopener">here</a>.</p>
<h2>Logo</h2>
<p>Variations of CodeWith's logo are provided below in SVG and PNG format, along with guidelines for their usage.</p>
<h3>Full CodeWith Logo</h3>
<div class="row">
<div class="col-5 col-lg-3 card text-center">
<img class="img-fluid" src="{{site.url}}/images/logo/logo.svg" aria-labelledby="logo-label-full-svg">
<br />
<h4 id="logo-label-full-svg">CodeWith Logo (SVG)</h4>
</div>
<div class="col-5 col-lg-3 card text-center">
<img class="img-fluid" src="{{site.url}}/images/logo/logo.png" aria-labelledby="logo-label-full-png">
<br />
<h4 id="logo-label-full-png">CodeWith Logo (PNG)</h4>
</div>
<div class="col-12 col-lg-5">
<h4 class="mt-3">Full CodeWith Logo</h4>
<p>Use in graphics with light backgrounds. Ensure that the logo is large enough for the tagline to be
legible. If it is not, omit the tagline.</p>
</div>
</div>
<h3>Full CodeWith Logo (White)</h3>
<div class="row">
<div class="col-5 col-lg-3 card text-center white-asset">
<img class="img-fluid" src="{{site.url}}/images/logo/logo-white.svg" aria-labelledby="logo-label-full-white-svg">
<br />
<h4 id="logo-label-full-white-svg">CodeWith Logo (White) (SVG)</h4>
</div>
<div class="col-5 col-lg-3 card text-center white-asset">
<img class="img-fluid" src="{{site.url}}/images/logo/logo-white.png" aria-labelledby="logo-label-full-white-png">
<br />
<h4 id="logo-label-full-white-png">CodeWith Logo (White) (PNG)</h4>
</div>
<div class="col-12 col-lg-5">
<h4 class="mt-3">Full CodeWith Logo (White)</h4>
<p>Use in graphics with dark backgrounds. Ensure that the logo is large enough for the tagline to be
legible. If it is not, omit the tagline.</p>
</div>
</div>
<h3>CodeWith Keyboard Icon</h3>
<div class="row">
<div class="col-5 col-lg-3 card text-center">
<img class="img-fluid" src="{{site.url}}/images/keyboard-green.svg" aria-labelledby="logo-keyboard-green-svg">
<br />
<h4 id="logo-keyboard-green-svg">CodeWith Keyboard Icon (SVG)</h4>
</div>
<div class="col-5 col-lg-3 card text-center">
<img class="img-fluid" src="{{site.url}}/images/keyboard-green.png" aria-labelledby="logo-keyboard-green-png">
<br />
<h4 id="logo-keyboard-green-png">CodeWith Keyboard Icon (PNG)</h4>
</div>
<div class="col-12 col-lg-5">
<h4 class="mt-3">CodeWith Keyboard Icon</h4>
<p>Use with light backgrounds. If accompanying with text, follow the font guidelines.</p>
</div>
</div>
<h3>CodeWith Keyboard Icon (White)</h3>
<div class="row">
<div class="col-5 col-lg-3 card text-center white-asset">
<img class="img-fluid" src="{{site.url}}/images/noun-keyboard-licensed-white.svg" aria-labelledby="logo-keyboard-white-svg">
<br />
<h4 id="logo-keyboard-white-svg">CodeWith Keyboard Icon (White) (SVG)</h4>
</div>
<div class="col-5 col-lg-3 card text-center white-asset">
<img class="img-fluid" src="{{site.url}}/images/noun-keyboard-licensed-white.png" aria-labelledby="logo-keyboard-white-png">
<br />
<h4 id="logo-keyboard-white-png">CodeWith Keyboard Icon (White) (PNG)</h4>
</div>
<div class="col-12 col-lg-5">
<h4 class="mt-3">CodeWith Keyboard Icon (White)</h4>
<p>Use with dark backgrounds. If accompanying with text, follow the font guidelines.</p>
</div>
</div>