brand guidelines0.1

brand guidelines0.11

contents

Logo edublocks

Characters

Swatches

Accessibility

Dos and don’ts

Fonts

Layout examples

page 2

page 4

page 8

page 9

page 5

page 6

page 7

Typography

Colour

Primary logotypeThis is the version of the logo that should be used in most cases. It includes the secondary mark, and the clarifying “blocks”.

Grayscale alternative Grayscale alternative

Secondary markThis element can be used independently of the wider logotype. If and when used, consider butting the right-edge up to other objects, eg: an image of a block of colour.

brand guidelinesedublocks0.12

Safe areaThe pink area here defines the space around the logo. No other objects should enter this space, with the exception of other, appropriate colours, or neutral photography.

brand guidelinesedublocks0.13

CharactersThese characters are intentionally playful and should be used as such. It’s also the case that these five are merely examples, and the colours, shape and proportions can and should be experimented with to create diversity in their use.

brand guidelinescharacters0.14

edublocks

brand guidelinesdos and don’ts0.1

Don’t change puzzle orientation

Don’t change the composition

Do use the mark as a stand-alone object Do use colour to emphasise logo Do use images appropriately

Don’t distort any brand elements Don’t sacrifice readability of the logo

Don’t use colours outside of brand palette Don’t change the logo font

5

Brand fonts Geomanistabcdefghijklmnopqrstuvwxyz

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

Source Sans Proabcdefghijklmnopqrstuvwxyz

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

We’ve selected Geomanist as the brand font: strong, simple, geometric. It feels both confident and playful. This can be liscenced from atipofoundry.com

The secondary brand font we have chosen in Source Sand Pro, available for free via Google Fonts.

brand guidelinesfonts0.1

titles buttons call to actions headings quotes feature text

body text paragraph text field labels

6

this is a headingHere is some text in a subtitle

Smaller title on the page

brand guidelineslayout examples0.1

Here we have an example of some larger body text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inven-tore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Here we have an example of smaller paragraph text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

button text

this is a headingHere is some text in a subtitle

Smaller title on the page

Here we have an example of some larger body text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inven-tore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Here we have an example of smaller paragraph text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

button text

7

brand guidelinesswatches0.1

#E71D64RGB 231 29 100

#F89621RGB 248 150 33

#FCC115RGB 252 193 21

#49B04DRGB 73 176 77

#8BC248RGB 139 194 72

#CDDA36RGB 205 218 54

#4455A5RGB 68 85 165

#008FD1RGB 0 143 209

#1B173DRGB 27 23 61

#644A9ERGB 100 74 158

#000000RGB 0 0 0

#FFFFFFRGB 255 255 255

#15BAD4RGB 21 186 212

8

brand guidelinesaccessibility0.1

AAA AA

AA+

13 AA+12 AA+10 AA+

12 AAA10 AAA07 AA+11 AA+

12 AAA10 AAA07 AA+11 AA+

12 AA10 AA

12 AAA10 AAA07 AA+11 AA+

12 AAA10 AAA11 AA07 AA+

13 AA02 AA+03 AA+05 AA+06 AA+

12 AA10 AA13 AA+

13 AAA02 AAA03 AAA

04 AA

05 AAA06 AAA

08 AA

09 AAA

01 AA+

13 AA06 AA02 AA+03 AA+05 AA+

13 AAA02 AAA03 AAA

04 AA

05 AAA06 AAA

08 AA

09 AAA

01 AA+

12 AAA

07 AA10 AAA

11 AA01 AA+08 AA+

12 AAA10 AAA

0102030405060708091011

1213

Passes accessibility test, large or small text can be used on background

Passes accessibility test, but only large text can be used on background

9