Skip to content

Commit a90928b

Browse files
danielavrellaDaniel Avrella
danielavrella
and
Daniel Avrella
authored
Branding page v1.0 containing: logos, logo usage, colors, templates a… (#13)
* Branding page v1.0 containing: logos, logo usage, colors, templates and citation * fixed whitespaces and tabs, removed Gemfiles * actually removed gemfiles * fixes in titles and links Co-authored-by: Daniel Avrella <[email protected]>
1 parent 4bcaac9 commit a90928b

File tree

5 files changed

+346
-1
lines changed

5 files changed

+346
-1
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
.jekyll-metadata
22
/_site
3+
Gemfile
4+
Gemfile.lock

‎_includes/branding.html

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
<div class="row section-heading">
2+
<div class="col-lg-4 col-md-6">
3+
<h2 style="text-align:left">Branding</h2>
4+
</div>
5+
</div>
6+
7+
<div class="row">
8+
<div class="col-lg-12 col-md-12">
9+
<p>
10+
If you're looking to use Bokeh branding to promote your work of any nature, please follow the guidelines below. We really appreciate your help.
11+
</p>
12+
</div>
13+
</div>
14+
15+
<br />
16+
<br />
17+
18+
<div class="row section-heading">
19+
<div class="col-lg-4 col-md-6">
20+
<h3>Official Logo</h3>
21+
</div>
22+
</div>
23+
24+
<div class="row">
25+
<div class="col-lg-12 col-md-12">
26+
<p>
27+
Click on the desired description (with an underline) to download the specific file. If you want all files, click on the following button.
28+
</p>
29+
<div>
30+
<a class="btn btn-primary" href="https://static.bokeh.org/branding/bokeh-branding-2021.zip" download>Download Branding Set</a>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<br />
36+
<br />
37+
<br />
38+
39+
<div class="logo-wrapper">
40+
<div class="logos">
41+
<div class="logo-thumb">
42+
<img src="https://static.bokeh.org/branding/logos/bokeh-logo.png">
43+
</div>
44+
<br />
45+
<p class="code-highlight" style="width:90%">
46+
<code>
47+
Use this against white (or light) backgrounds.
48+
</code>
49+
</p>
50+
51+
<table style="width:90%;">
52+
<tr>
53+
<th>Primary Logotype</th>
54+
<th>.png</th>
55+
<th>.jpg</th>
56+
<th>.svg</th>
57+
</tr>
58+
<tr>
59+
<td style="color:#909090;">Size: @1x 490 × 141px</td>
60+
<td><a href="https://static.bokeh.org/branding/logos/bokeh-logo.png" download>For web</a></td>
61+
<td><a href="https://static.bokeh.org/branding/logos/bokeh-logo.jpg" download>For print</a></td>
62+
<td><a href="https://static.bokeh.org/branding/logos/bokeh-logo.svg" download>Vector</a></td>
63+
</tr>
64+
<tr>
65+
<td style="color:#909090;">Size: @2x 979 × 280px</td>
66+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For web</a></td>
67+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For print</a></td>
68+
</tr>
69+
<tr>
70+
<td style="color:#909090;">Size: @3x 1468 × 421px</td>
71+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For web</a></td>
72+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For print</a></td>
73+
</tr>
74+
</table>
75+
</div>
76+
77+
<div class="logos">
78+
<div class="logo-thumb">
79+
<img class="dark" src="https://static.bokeh.org/branding/logos/bokeh-logo-inv.png">
80+
</div>
81+
<br />
82+
<p class="code-highlight" style="width:90%">
83+
<code>
84+
Use this against dark backgrounds.
85+
</code>
86+
</p>
87+
88+
<table style="width:90%;">
89+
<tr>
90+
<th>Logotype white text</th>
91+
<th>.png</th>
92+
<th>.jpg</th>
93+
<th>.svg</th>
94+
</tr>
95+
<tr>
96+
<td style="color:#909090;">Size: @1x 490 × 141px</td>
97+
<td><a href="https://static.bokeh.org/branding/logos/bokeh-logo-inv.png" download>For web</a></td>
98+
<td><a href="https://static.bokeh.org/branding/logos/bokeh-logo-inv.jpg" download>For print</a></td>
99+
<td><a href="https://static.bokeh.org/branding/logos/bokeh-logo-inv.svg" download>Vector</a></td>
100+
</tr>
101+
<tr>
102+
<td style="color:#909090;">Size: @2x 979 × 280px</td>
103+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For web</a></td>
104+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For print</a></td>
105+
</tr>
106+
<tr>
107+
<td style="color:#909090;">Size: @3x 1468 × 421px</td>
108+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For web</a></td>
109+
<td><a href="https://static.bokeh.org/branding/logos/[email protected]" download>For print</a></td>
110+
</tr>
111+
</table>
112+
</div>
113+
114+
<div class="logos">
115+
<div class="logo-thumb icon">
116+
<img src="https://static.bokeh.org/branding/icons/bokeh-icon.jpg">
117+
</div>
118+
<br />
119+
<p class="code-highlight" style="width:90%">
120+
<code>
121+
Use this only as graphic detail, never as a stand alone logo.
122+
</code>
123+
</p>
124+
125+
<table style="width:90%;">
126+
<tr>
127+
<th>Bokeh icon</th>
128+
<th>.png</th>
129+
<th>.jpg</th>
130+
<th>.svg</th>
131+
</tr>
132+
<tr>
133+
<td style="color:#909090;">Size: @1x 72 x 72px</td>
134+
<td><a href="https://static.bokeh.org/branding/icons/bokeh-icon.png" download>For web</a></td>
135+
<td><a href="https://static.bokeh.org/branding/icons/bokeh-icon.jpg" download>For print</a></td>
136+
<td><a href="https://static.bokeh.org/branding/icons/bokeh-icon.svg" download>Vector</a></td>
137+
</tr>
138+
<tr>
139+
<td style="color:#909090;">Size: @2x 144 × 144px</td>
140+
<td><a href="https://static.bokeh.org/branding/icons/[email protected]" download>For web</a></td>
141+
<td><a href="https://static.bokeh.org/branding/icons/[email protected]" download>For print</a></td>
142+
</tr>
143+
<tr>
144+
<td style="color:#909090;">Size: @5x 350 × 350px</td>
145+
<td><a href="https://static.bokeh.org/branding/icons/[email protected]" download>For web</a></td>
146+
<td><a href="https://static.bokeh.org/branding/icons/[email protected]" download>For print</a></td>
147+
</tr>
148+
</table>
149+
</div>
150+
</div>
151+
152+
<br />
153+
<br />
154+
<hr>
155+
<br />
156+
157+
<div class="row section-heading">
158+
<div class="col-lg-4 col-md-6">
159+
<h3>Logo usage</h3>
160+
</div>
161+
</div>
162+
<div class="row">
163+
<div class="col-lg-12 col-md-12">
164+
<p>
165+
When using the logo, please use the following directives:
166+
<br />
167+
<br />
168+
169+
<ul>
170+
<li><strong>DO</strong> make the logo large enough: at least 1 inch (2.54 cm) for print at least and 72 px for web</li>
171+
<li><strong>DO</strong> leave enough margin around the logo - at least around triple the width of the bar in the ”k” character;</li>
172+
<li>Do <strong>NOT</strong> apply transparency to the logotype;</li>
173+
<li>Do <strong>NOT</strong> change the logo proportion by distorting it;</li>
174+
<li>Do <strong>NOT</strong> place text or other elements over the logo.</li>
175+
</ul>
176+
</p>
177+
</div>
178+
</div>
179+
180+
<br />
181+
<hr>
182+
<br />
183+
184+
<div class="row section-heading">
185+
<div class="col-lg-4 col-md-6">
186+
<h3>Colors</h3>
187+
</div>
188+
</div>
189+
190+
<br />
191+
192+
<table style="width:100%; border-spacing:20px;">
193+
<tr>
194+
<th style="width:60px"></th>
195+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #F9AA1A;"></th>
196+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #F05123;"></th>
197+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #ED1557;"></th>
198+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #8B288C;"></th>
199+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #4698D3;"></th>
200+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #19ACAF;"></th>
201+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #2AB356;"></th>
202+
<th style="height:100px; width:100px; border-right: 5px solid white; background-color: #A6CE39;"></th>
203+
</tr>
204+
<tr>
205+
<td style="color:#909090; text-align:right">hex</td>
206+
<td>#F9AA1A</td>
207+
<td>#F05123</td>
208+
<td>#ED1557</td>
209+
<td>#8B288C</td>
210+
<td>#4698D3</td>
211+
<td>#19ACAF</td>
212+
<td>#2AB356</td>
213+
<td>#A6CE39</td>
214+
</tr>
215+
<tr>
216+
<td style="color:#909090; text-align:right">RGB</td>
217+
<td>249,170,26</td>
218+
<td>240,81,35</td>
219+
<td>237,21,87</td>
220+
<td>139,40,140</td>
221+
<td>70,152,211</td>
222+
<td>25,172,175</td>
223+
<td>42,179,86</td>
224+
<td>166,206,57</td>
225+
</tr>
226+
<tr>
227+
<td style="color:#909090; text-align:right">CMYK</td>
228+
<td>0,37,100,0</td>
229+
<td>0,84,100,0</td>
230+
<td>0,100,54,0</td>
231+
<td>54,100,3,0</td>
232+
<td>68,29,0,0</td>
233+
<td>77,9,34,0</td>
234+
<td>78,0,93,0</td>
235+
<td>40,0,100,0</td>
236+
</tr>
237+
</table>
238+
239+
<br />
240+
<br />
241+
<br />
242+
243+
<div class="row section-heading">
244+
<div class="col-lg-4 col-md-6">
245+
<h2 style="text-align:left">Templates</h2>
246+
</div>
247+
</div>
248+
249+
<div class="row">
250+
<div class="col-lg-12 col-md-12">
251+
<p>
252+
Feel free to use our slide decks templates for Google Presentation. Click on the link to open it and create a copy for your own usage.
253+
</p>
254+
<div>
255+
<a class="btn btn-primary" href="https://docs.google.com/presentation/d/1XZC39yg37qcvcQHfEz_UF2_EKbwF3tz6hzHdBzU_Wqc/edit#slide=id.g9427045889_0_2" target="_blank">Open Presentation Template</a>
256+
</div>
257+
</div>
258+
</div>
259+
260+
<br />
261+
<br />
262+
<br />
263+
264+
<div class="row section-heading">
265+
<div class="col-lg-4 col-md-6">
266+
<h2 style="text-align:left">Citation</h2>
267+
</div>
268+
</div>
269+
270+
<div class="row">
271+
<div class="col-lg-12 col-md-12">
272+
<p>
273+
If you find Bokeh useful in your work, a citation is always appreciated.
274+
<br />
275+
<br />
276+
To cite Bokeh in publications, use:
277+
<br />
278+
<p class="code-highlight">
279+
<code>
280+
Bokeh Development Team ({{ site.time | date: '%Y' }}). Bokeh: Python library for interactive visualization
281+
<br />
282+
URL https://bokeh.org
283+
</code>
284+
</p>
285+
<br />
286+
<p>
287+
A <a href="http://www.bibtex.org">BibTeX</a> entry for <a href="https://www.latex-project.org">LaTeX</a> users is:
288+
</p>
289+
290+
<p class="code-highlight">
291+
<code>
292+
@Manual{,<br />
293+
title = {Bokeh: Python library for interactive visualization},{% raw %}<br />
294+
author = {{Bokeh Development Team}},<br />
295+
year = {{% endraw %}{{ site.time | date: '%Y' }}{% raw %}}{% endraw %},<br />
296+
url = {https://bokeh.org/},<br />
297+
}</pre>
298+
</code>
299+
</p>
300+
<br />
301+
Bokeh is <a href="https://github.com/bokeh/bokeh/blob/master/LICENSE.txt">BSD licensed</a>, so you are free to use it whatever you like, be it academic, commercial, creating forks or derivatives, as long as you copy the BSD statement if you redistribute it (see the License for details). Although not required by the Bokeh license, if it is convenient for you, please consider citing Bokeh when using it in your work and also consider contributing any changes back, so that they may be incorporated for the benefit of the entire Bokeh community.
302+
</p>
303+
</div>
304+
</div>
305+
<br />

‎_includes/links.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h6>Project</h6>
1111
<a class="nav-link" href="https://bokeh.org/team/">Team</a>
1212
</li>
1313
<li class="nav-item">
14-
<a class="nav-link" href="https://bokeh.org/citation/">Citation</a>
14+
<a class="nav-link" href="https://bokeh.org/branding/">Branding</a>
1515
</li>
1616
</ul>
1717
</div>

‎branding/branding.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
layout: page
3+
title: Bokeh
4+
---
5+
{% include branding.html %}

‎css/main.sass

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,3 +251,36 @@ img
251251
font-size: 16px
252252
text-align: left
253253
text-justify: inter-character
254+
255+
td
256+
padding: 10px 20px 10px 2px
257+
font-size: 14px
258+
a
259+
text-decoration: underline
260+
261+
.code-highlight
262+
background-color: #f8f8f8
263+
padding: 5px 10px
264+
code
265+
font-size: 13px
266+
color: inherit
267+
268+
269+
.logo-wrapper
270+
display: flex
271+
flex-direction: row
272+
flex-wrap: wrap
273+
justify-content: space-between
274+
.logos
275+
min-width: 50%
276+
.logo-thumb
277+
img
278+
width: 250px
279+
.dark
280+
background-color: #111111
281+
padding: 10px
282+
margin-top: -13px
283+
&.icon
284+
margin-top: 40px
285+
img
286+
width: 72px

0 commit comments

Comments
 (0)