styleguide.html 10.3 KB
Newer Older
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
1
2
3
4
{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "styleguide"|capfirst %} — {% trans "for members"|capfirst %} — {{ block.super }}{% endblock %}
5
{% block opengraph_title %}{% trans "styleguide"|capfirst %} — {% trans "for members"|capfirst %} — {{ block.super }}{% endblock %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{% block body %}
<h1>{% trans "styleguide"|capfirst %}</h1>

<p>
    {% blocktrans trimmed %}
    Welcome to the Thalia styleguide. This document describes how Thalia represents itself, online and offline.

    This styleguide is meant to be followed as much as possible. Creativity is not forbidden, as long as you use this styleguide as basis.
    {% endblocktrans %}
</p>

<h1 id="colour">{% trans "Colours" %}</h1>

<p>
    {% blocktrans trimmed %}
22
    Thalia uses a palette of three colours. Each colour can be used as background, foreground and accent colour.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
23
24
25
    {% endblocktrans %}
</p>

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
<div class="row">
    <div class='span4'>
        <h3>{% trans "black"|capfirst %}</h3>

        <p>
            {% trans "Hexadecimal" %}: #000000<br />
            {% trans "RGB" %}: 0 / 0 / 0<br />
            {% trans "CMYK" %}: 91 / 79 / 62 / 92
        </p>
    </div>

    <div class='span4'>
        <h3>{% trans "white"|capfirst %}</h3>

        <p>
            {% trans "Hexadecimal" %}: #FFFFFF<br />
            {% trans "RGB" %}: 255 / 255 / 255<br />
            {% trans "CMYK" %}: 0 / 0 / 0 / 0
        </p>
    </div>

    <div class='span4'>
        <h3>{% trans "magenta"|capfirst %}</h3>

        <p>
            {% trans "Hexadecimal" %}: #E62272<br />
            {% trans "RGB" %}: 230 / 34 / 114<br />
            {% trans "CMYK" %}: 0 / 94 / 21 / 0
        </p>
    </div>
</div>
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
57
58

<p>
59
60
61
    {% blocktrans trimmed %}
    We've established guidelines on how to use which colour in which situation.
    {% endblocktrans %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
62
</p>
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
<div class="row">
    <div class='span4'>
        <h3>{% trans "Option" %} 1</h3>

        <p>
            {% trans "Background" %}: {% trans "white" %}<br />
            {% trans "Foreground" %}: {% trans "black" %}<br />
            {% trans "Accent" %}: {% trans "magenta" %}
        </p>
    </div>

    <div class='span4'>
        <h3>{% trans "Option" %} 2</h3>

        <p>
            {% trans "Background" %}: {% trans "black" %}<br />
            {% trans "Foreground" %}: {% trans "white" %}<br />
            {% trans "Accent" %}: {% trans "magenta" %}
        </p>
    </div>

    <div class='span4'>
        <h3>{% trans "Option" %} 3</h3>

        <p>
            {% trans "Background" %}: {% trans "magenta" %}<br />
            {% trans "Foreground" %}: {% trans "white" %}<br />
            {% trans "Accent" %}: {% trans "black" %}
        </p>
    </div>
</div>
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
94
95
96
97
98
<h1>{% trans "Logo" %}</h1>

<h2>Basis</h2>

<p>
99
    {% url 'styleguide-file' 'font.zip' as font_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
100
    {% blocktrans trimmed %}
101
    Thalia's logo consists of a 'T' formed by the pieces of a <a href="https://en.wikipedia.org/wiki/Tangram" target="_blank">tangram</a> and the text 'Study Association Thalia'. The font that was used for this text is '<a href="{{ font_url }}">Gill Sans MT Condensed</a>'.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
    {% endblocktrans %}
</p>

<p>
    {% blocktrans trimmed %}
    There are three versions of the logo, each one has a different background colour. The combinations of the colours follow the guidelines in the section <a href="#colour">colour</a>.
    In the situation that the background is not white, black or magenta please follow these rules:<br />
    {% endblocktrans %}
    <ul>
        <li>{% trans "In case of a light background, use the logo for the white background." %}</li>
        <li>{% trans "In case of a dark background, use the logo for the black background." %}</li>
        <li>{% trans "In case of a coloured background, use the logo for the magenta background." %}</li>
    </ul>
</p>

<p>
    <img src="{% static 'styleguide/images/logo-versions-example.png' %}" />
</p>

<p>
122
    {% url 'styleguide-file' 'logo.zip' as logo_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
123
    {% blocktrans trimmed %}
124
    You can download the archive with all versions of the logo in PNG, SVG and Illustrator <a href="{{ logo_url }}">here</a>.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
    {% endblocktrans %}
</p>

<h2>{% trans "Variations" %}</h2>

<p>
    {% blocktrans trimmed %}
    Thalia's logo was designed with flexibility in mind. It's possible to create a different variants for each committee, or a special version for an event (for example the symposium).
    These variants have to use the same colour combinations as the normal logo and must follow these rules:
    {% endblocktrans %}
    <ul>
        <li>{% trans "The top title is <strong>always</strong> 'THALIA'." %}</li>
        <li>{% trans "Always use 2 or 3 lines. No more, no less." %}</li>
        <li>{% trans "The text is vertically centered relative to the T" %}</li>
        <li>{% trans "The horizontal distance between the text lines and the T is always the same." %}</li>
    </ul>
</p>

<p>
    <img src="{% static 'styleguide/images/logo-variants-example.png' %}" />
</p>

<p>
148
    {% url 'styleguide-file' 'variant-logo.zip' as variant_logo_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
149
    {% blocktrans trimmed %}
150
    You can download the archive with the Illustrator and EPS files to create a variant <a href="{{ variant_logo_url }}">here</a>.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
    {% endblocktrans %}
</p>

<h1>{% trans "Documents & Presentations" %}</h1>

<p>
    {% blocktrans trimmed %}
    We've got Word-templates for:
    {% endblocktrans %}
    <ul>
        <li>{% trans "Contracts" %}</li>
        <li>{% trans "Invoices" %}</li>
        <li>{% trans "Letters" %}</li>
        <li>{% trans "Minutes" %}</li>
        <li>{% trans "Authorisation forms" %}</li>
        <li>{% trans "Registration forms" %}</li>
        <li>{% trans "Declarations" %}</li>
    </ul>
169
170
    {% url 'styleguide-file' 'documents.zip' as documents_url %}
    {% url 'styleguide-file' 'latex.zip' as latex_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
171
    {% blocktrans trimmed %}
172
173
    You can download these template as <a href="{{ documents_url }}">here</a> as archive. We've also included PDF examples.
    In case you prefer LaTeX then you can download the <a href="{{ latex_url }}">template</a>.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
174
175
176
177
    {% endblocktrans %}
</p>

<p>
178
    {% url 'styleguide-file' 'presentations.zip' as presentations_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
179
    {% blocktrans trimmed %}
180
    Templates for PowerPoint, Keynote and LibreOffice are available <a href="{{ presentations_url }}">here</a>.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
    {% endblocktrans %}
</p>

<h1>{% trans "Posters & Banners" %}</h1>

<p>
    {% blocktrans trimmed %}
    The posters and banners are available in various sizes:
    {% endblocktrans %}
    <ul>
        <li>{% trans "A3 Paper" %}</li>
        <li>{% trans "1920x1080 for the televisions" %}</li>
        <li>{% trans "400 × 280 for the login screens" %}</li>
        <li>{% trans "1594 × 590 for Facebook" %}</li>
    </ul>
    {% blocktrans trimmed %}
    For every size there is a dark and light version. The posters are in black, white and magenta colour variants.
    {% endblocktrans %}
</p>

<p>
202
    {% url 'styleguide-file' 'posters-banners.zip' as posters_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
203
    {% blocktrans trimmed %}
204
    The templates are available for download <a href="{{ posters_url }}">here</a>.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
205
    Although, it's the task of the media committee to create the posters and banners.
206
    So you're always welcome to send an email to <a href="mailto:media@thalia.nu">media@thalia.nu</a> to get yourself a sleek poster for your event.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
    {% endblocktrans %}
</p>

<p>
    {% blocktrans trimmed %}
    Still looking for something different? No problem! Let yourself go. Just make sure you follow the 'rules'.
    And  in case you get lost in the land of Photoshop and Illustrator, just send an email to media@thalia.nu.
    They're always ready to help you.
    {% endblocktrans %}
</p>

<h1>{% trans "Merchandise" %}</h1>

<p>
    {% blocktrans trimmed %}
    We make an exception for the colour palette of the merchandise if it's not possible to print in full colour.
    The preference is to print magenta on black.
    {% endblocktrans %}
</p>

<h1>{% trans "Introshirts" %}</h1>

<p>
230
    {% url 'styleguide-file' 'introshirt.zip' as introshirt_url %}
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
231
232
    {% blocktrans trimmed %}
    The introshirts too are an exception. These shirts are in different colours every year.
233
    The templates for the shirts can be found <a href="{{ introshirt_url }}">here</a>. The sponsorlogos and texts can be changed to those you prefer.
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
234
235
236
    {% endblocktrans %}
</p>

237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<h1>{% trans "Committee promotion" %}</h1>

<p>
    {% blocktrans trimmed %}
    Any committee is allowed to design a piece of clothing especially tailored for promotion and visibility of the assocation and the committee.
    However it would be unwise to have every committee wear the same colour, that would not improve the visibility of the committee.
    That means that committees are free to choose any color they want for their promotional material.
    {% endblocktrans %}
</p>

<p>
    <img src="{% static 'styleguide/images/committee-promotion-front-example.png' %}" />
</p>

<p>
    <img src="{% static 'styleguide/images/committee-promotion-back-example.png' %}" />
</p>

<p>
    {% blocktrans trimmed %}
    To prevent a jungle of different types of designs we would like every committee that wants some kind of clothing
    to use the same design for the front and one of the Thalia colours for the print.
    The standard front design exists of a Thalia-logo variant with the committee name and, if you want to, the wearer's name.
    The design for the back can be whatever you want.
    {% endblocktrans %}
</p>

264
265
266
267
268
269
270
271
272
<h1>{% trans "Website" %}</h1>

<p>
    {% blocktrans trimmed %}
    The website uses a different font for the headers and menu-items, since we don't have a licence to use the Gill Sans MT Condensed font online.
    This font is 'Oswald'. It's open-source and can be downloaded <a href="https://github.com/googlefonts/OswaldFont">here</a>.
    {% endblocktrans %}
</p>

Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
273
274
275
<h1>{% trans "Downloads" %}</h1>

<ul>
276
277
278
279
280
281
282
283
    <li><a href="{{ font_url }}">{% trans "Font" %}</a></li>
    <li><a href="{{ logo_url }}">{% trans "Logos" %}</a></li>
    <li><a href="{{ variant_logo_url }}">{% trans "Logo variant template" %}</a></li>
    <li><a href="{{ documents_url }}">{% trans "Word documents" %}</a></li>
    <li><a href="{{ latex_url }}">{% trans "LaTeX template" %}</a></li>
    <li><a href="{{ presentations_url }}">{% trans "Presentation templates" %}</a></li>
    <li><a href="{{ posters_url }}">{% trans "Poster templates" %}</a></li>
    <li><a href="{{ introshirt_url }}">{% trans "Introshirts" %}</a></li>
Sébastiaan Versteeg's avatar
Sébastiaan Versteeg committed
284
285
</ul>

286
{% endblock %}