Brand Style guide and Application Tool-kit 2016 - uMhlanga UIPumhlangauip.co.za/site/wp-content/uploads/2016/11/... · 2017. 4. 3. · UIP Poster pg22 Directional Signage pg23 Welcome

uMhlanga Rocks Brand Style guide and Application - 2016 Edition

Brand Style guide and Application Tool-kit 2016


CONTENTS

OUR LOGO

The Logo: Primary application pg4

Logo considerations pg5 - pg9

GRaphic eLements

Our Typefaces pg11 - 12

Colour pg13

Imagery pg14

Graphic Devices pg15

‘U’ Graphic pg16

statiOneRy

Letterhead & Business Cards pg18

Email Signature pg19

Website pg20

siGnaGe

UIP Poster pg22

Directional Signage pg23

Welcome Sign pg24

This is the uMhlanga Rocks Brand Style guide. It gives you all of the information you need to bring our brand to life and capture the feeling of this special place. Don’t think of these guidelines as limitations, but as tools, because if you use them in a consistent way, you can create all kinds of great communication for our brand.

If you have any questions about using the identity that aren’t covered here, feel free to ask the brand custodians and they’ll be happy to help you.

IntroductIon

uMhlanga Rocks Brand Style guide and Application - 2016 EditionOUR LOGO


Visual identity / Our lOgO

the LOGOOur logo is at the heart of our brand identity. It’s the thing the public will remember and because of this it becomes shorthand for our brand itself.

Our logo design is simple, clear and honest. We don’t use tricks like shadows and reflections because we believe in a “what you see is what you get” approach. And because we’re consistent and dependable, we use the same version in print, on screen or anywhere else.


2x x

x

x

2x


cLeaR spacinGTo make sure that our logo is always visible and impactful, we’ve got to be sure to give it space to breathe. This is outlined in the image to the right and simply involves leaving clear space around it in all applications.

minimUm LOGO sizeThere are no set sizes for our logo. It can be scaled up and down as needed, as long as it’s always proportional. Just make sure not to stretch or squash it in design.

In print and physical applications, the logo should never be reproduced smaller than 4mm in height. That way we can be sure it will always be legible and clear.

4mm minimum heightNote: the logotype typography has been carefully spaced, and should not be changed, or re-typed.

= X Value



cOLOUR vaRiatiOnThe logo is always reproduced in either the uMhlanga Rocks brand blue or in black and white.

On dark coloured backgounds, use the white version of the logo reversed out of the colour so it stands out. On a white background, use the colour version.


Visual identity / logo rules

backGROUnd imaGesThe logo can be reversed out of an image if the design needs it. Use the grey version on light backgrounds and the white version on dark backgrounds.

When using the logo in this context, make sure it is placed in an area that is uncluttered so that it has maximum visibility.

Light-coloured, uncluttered imagery

Use the logo on colour block

Dark-coloured, uncluttered imagery The UR can also be used on its side and aligned to the right


Visual identity / placement

LOGO pLacementWe try not to use the logo in the dead centre of a graphic, because it looks predictable and dated. Rather use the logo in a corner (as illustrated) so that it underpins everything else that is happening on a page.

uMhlanga Rocks Brand Style guide and Application - 2016 EditionGRaphic eLements


graphic elements / typography

OUR typeFace FISHMONGER IS OUR TYPEFACE. WE USE IT IN TWO WEIGHTS: Regular (ML) & Medium (MR).

Typography is important in the way we communicate because it helps to set the tone of our message. The guidelines on the following pages should be followed closely so that all of our communication is consistent.

aabbcc01234abcdefghijklmnopqrstuvwxyzabcdeFGhiJkLmnOpQRstUvWXyz1234567890

FISHMONGER Medium(MR)

AaBbCc01234abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890

FISHMONGER Regular(ML)


graphic elements / typography


MyRIaD PRO


avEnIR

secOndaRy typeFace: bOdy cOpyAvenir is used for body copy in our designs. We use the medium weight for headlines and the regular weight foreverything else.

teRtiaRy: system FOntIf you have to use a standard system font for the brand (e.g. in PowerPoint), make use of Myriad Pro (bold for headlines and regular for everything else).


graphic elements / colour

cOLOUROur colour palette is shown to the right. It has been carefully chosen to communicate the spirit of our brand so please make sure to use the right specifications for each one when designing communication. Make sure to also use the right reference for the process at hand (e.g. CMYK for printing, Pantone for spot colours, etc.).

pantOne 3262 c

C(72) M(0) y(37) K(0) R(46) G(175) B(163)

pantOne 302 c

C(100) M(74) y(40) K(32)

R(0) G(44) B(75)

pantOne 7408 cC(2) M(27) y(95) K(0) R(243) G(174) B(10)

pantOne 368 c

C(58) M(2) y(100) K(0) R(108) G(178) B(0)

pantOne 171 c

C(0) M(79) y(81) K(0) R(255) G(64) B(38)

pantOne 336 c

C(99) M(36) y(74) K(27) R(0) G(83) B(62)

uMhlanga Rocks Brand Style guide and Application - 2016 Edition 1

graphic elements / graphic device

‘UndeRscORe’ GRaphic We have a special brand shorthand in the uMhlanga Rocks ‘underscore’ device. This graphic device, used with our bold colour palette, helps us to add our special touch to all kinds of communication. Some guidelines for using it are outlined in the following pages.

cLeaR spacinGThere are no set sizes for our underscore graphic. 1/2 the width of the ‘U’ is used as a guide for clearspacing.

1/2 width

= X Value

X

X


‘UndeRscORe’ GRaphic The underscore from the U can be pulled out and rendered in the colours from our palette in a fun, graphic way. Turning it into a pattern like this gives energy and interest to designs, without requiring the full logo.

graphic elements / graphic device

uMhlanga Rocks Brand Style guide and Application - 2016 Edition 1

graphic elements / photographic style

imaGeRyWe portray uMhlanga Rocks using imagery that is light-filled, casual and real. Some examples are given to the right to help you get an idea when sourcing and shooting in future. Make sure that the people are acting naturally and not too posed, and keep the colour treatment light and fresh.


brand assets / website

Website

I’m a residentI’m visiting I’m here for business

A PLACE TO LIVE FREE

SEARCH

Powered by


brand assets / co-branding

I’m a residentI’m visiting I’m here for business

A PLACE TO LIVE FREE

SEARCH

Powered by

of theEdge SeahOME LOCaTIOn GaLLERy COLLECTIOn COnTaCT

cO-bRandinG

Pienetur maximet am estotae magna-

tiae perciet volliquo blant alis et aut

utemper spiendusae vel ma nonsequ

atecturitis voluptatiis doluptatium nima

pere pe eati apit ullabor endita aut offic

te dolorro vitatem re veliqua spisquo

maximai onsequo voloris magnati nim

nam qui venia volluptas eium quae

corepe sumqui sit as simusci tinullabor

aut am dia cus mo esti nis et lam andit-

iument dolumqui dolorest, omnis repe

dollum et et evero dolorepratem quunt

ipid minis elliquos sendi comnis conse-

quamus eic te nam eum fugia conecat

emquis solectatur, incietus essequam

asitas dolo berum aut quam sequossunt

fugit, sim explaboUllam nonem inte nis

everoritas apis nem voluptate velicae

voluptatqui cum es qui cupta volluptat

volorempores ipsaecu llanditaqui con

eaquatiunt fugit qui offictat.

Ibus quae lauda consequae veliaerspe

rerferes aspicab im nimagnate ne il

iduciendam, sitaquiat dendae idem

estibus autem quatus dunt ipicto eligni-

mus volestrum et dolessunt.

Omnimusandi voluptum ut alicae. Hil

iusam litat ullesti onsecus sequostibus

desto velent qui omnistiae et ipsam

iuribus el in cum aperita exera dus

eaquatia alique nis am ipsa volorit, et

velestio enem sincidendias eiundia

uMhlanga Rocks Brand Style guide and Application - 2016 EditionmaRketinG


MArketing collAterAl

Bus Stop sign Posters

siGnaGe


MArketing collAterAl

bROchURe


Brand Style guide and Application Tool-kit 2016

Documents

Brand Style guide and Application Tool-kit 2016 - uMhlanga UIPumhlangauip.co.za/site/wp-content/uploads/2016/11/... · 2017. 4. 3. · UIP Poster pg22 Directional Signage pg23 Welcome