visual identity guidelines...weights – light, regular, semi-bold and bold. microsoft office font...

© 2016 GIVERGY LTD.

VISUAL IDENTITY GUIDELINESNOVEMBER 2016

© 2016 GIVERGY LTD.

CONTENTS

Introduction 03

Our values 04

The Giving Brand 05

Logo 06

Typography 11

Colour palette 12

Iconography 14

Imagery 15

Visual language 18

Tone of voice 19

Glossary 20

Contact 21

3© 2016 GIVERGY LTD.

INTRODUCTIONTHE GIVERGY BRAND

At Givergy we’re as passionate about our brand as we are about helping our clients raise more. Our high standards of client service should be mirrored in the way we deport ourselves through our visual identity and all its aspects.

These brand guidelines set the visual standards for the Givergy brand image outlining usage convention for our logos, color palette, typography and infographics; setting out clear rules on the deployment of these components in our brand and marketing collateral.

By following the principles outlined in these guidelines, we can maintain cohesion and consistency across all our communications ensuring that we present Givergy as the number one tech partner to the ‘Giving Generation’.


OUR VALUES

Our culture and core values are an essential part of our business DNA:

RELIABILITY ACCOUNTABILITY INNOVATION SERVICE ETHICS

R. A. I. S. E.


THE GIVING BRAND

The ‘Giving Brand’ for the ‘Giving Generation’

GIVING

TECHNOLOGY

ENERGY


LOGOFULL COLOUR MASTER LOGO

For full colour breakdowns please see the colour guidelines section of this document

C28 M93 Y0 K0R188 G43 B135

C76 M21 Y0 K0R8 G157 B217

C67 M90 Y22 K10R108 G52 B113

C100 M87 Y21 K7R36 G55 B118

C63 M47 Y40 K27R94 G104 B113

The primary gradient is used within the logo, logo icon and as a background colour only.

Venn icon Givergy logotype


LOGO VERSIONSLOGO AND STRAPLINE GUIDELINES

BLACK MONO LOGOFor use on facsimile and other black and white publications.

FULL COLOUR LOGOThe positive version of the logo is always used on clear white or lighter colour tinted backgrounds to maintain legibility.

WHITE-OUT LOGOWhen used on dark and coloured backgrounds, the logo should be all white to maintain legibility. This will provide a striking contrast allowing the logo to be clearly legible.

LOGO WITHOUT STRAPLINEThe Givergy logo without the strapline may be used in rare situations where the strapline is not required or not appropriate. This may include signage, way-finding or internal communications.

LOGO WITH STRAPLINEThe Givergy logo with the strapline should regarded as the primary logo and should be used in the majority of digital and printed collateral. This will include stationery, business cards, advertising and digital and online communications.

Two approved versions of the logo have been created with and without the Givergy strapline. Read our usage guidance to understand when each logo should be used.


LOGO USECLEAR SPACE RULE

The Givergy logo must stand out clearly from its surroundings.

This applies not only to the background, but also to interference from nearby text, photographs and other graphic elements that might compromise the impact of the logo.

It is important to keep the logo clear of any other graphic elements. To ensure this, an exclusion zone or ‘clear space’ rule has been established using the venn icon. This exclusion zone indicates the closest any other graphic message can be positioned in relation to the marque.

The example on this page demonstrates the minimum clear space required which is the height of the venn icon from the logo.

Clear space rule applied to the Givergy logo without a strapline

Clear space rule applied to the Givergy logo with a strapline


LOGO SIZESLOGO POSITIONING

The minimum size for all printed material is 30mm wide and 150 pixels (at 72dpi) for digital on-screen use. The logo should never be used less than this size as this would lead to a compromise in legibility.

For large formats such as banners, billboards and signage, the logo should be proportionally balanced to the size of the document. In all cases, the logo should never:

• Bleed off any edge• Be cropped in any way

The logo must always maintain clear space around it. In large formats such as those stated here, you should maintain a clear space. This will preserve the integrity of the logo and allow for maximum readability.

NOTEThe logo must not be altered or changed in any way and guidelines should always be adhered to. The master logo templates should always be used when putting together collateral.

Minimum size for print applications

30mm

Minimum size for screen use: 150 pixels wide at 72dpi

150 pixels

LOGO SIZE GUIDEMINIMUM SIZE

Logo applied to A4 sized document

45mm


35mm


65mm


LOGO APPLICATIONLOGO POSITIONING

For digital applications the logo should be positioned top left to ensure prominence, legibility, and accessibility on all digital and mobile devices.

For print applications the logo must adhere to the correct size and usage for the relevant document size and positioned center aligned or top right.

DIGITAL APPLICATION

PRINT APPLICATION

RAISING THESTAKESAPRIL 2016

SYSTEM SPONSORSHIP & DESIGN SERVICES

AWARD-WINNING FUNDRAISING TECHNOLOGY

www.givergy.com/fundraise [email protected]

Welcome to the UK Demo Event!

CUSTOM ONLINE AUCTIONSMOBILE BIDDING & PLEDGING SOLUTIONS

AWARD-WINNING FUNDRAISING TECHNOLOGY

www.givergy.com/fundraise [email protected]

[email protected] www.givergy.com

1.

How to use the Givergy tablet platformAuction bidding

3.

5.

2.

4.

6.

Select your name & create your pinYou create your 4-digit pin the first time you use the system.

If you are not on the system please tell the Givergy event staff, or tap ‘Register’.

Enter your bid Enter the amount you would like to bid or pledge and then tap ‘Anonymous’ or ‘Confirm’ to submit.

For a snapshot of your bidding and pledge activity simply tap on ‘My Bids’.

Congratulations! You will be informed that your bid has been accepted.

If you are outbid, or under the reserve you will be notified via SMS.

Watch the screensAll screens around the room will beupdated instantly with the ‘New highest bid’ message.

Make your choiceFor the item you would like to bid on simply tap the ‘Place Bid’ button.

Scroll through the items Start by having a look through the lot items on offer.

For more information and an image of each item simply tap your chosen item.

Jorge Neves

Jorge Neves

Jorge Neves


TYPOGRAPHYPRINT AND ONSCREEN

PRIMARY FONTThe typeface – FS Elliot – is characterised by excellent legibility in print and digital areas (from corporate brochure ware through to headlines on website applications). The letter shapes are well proportioned and elegant with a geometric structure. We recommend four weights – Light, Book, Bold and Black.

SECONDARY FONTOpen Sans is a humanist sans serif typeface. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It is optimised for print, web, and mobile interfaces, and has excellent legibility. We recommend four weights – Light, Regular, Semi-bold and Bold.

MICROSOFT OFFICE FONTThe standard recommended system font is Arial (a sans serif typeface) which is highly legible when used in Word and PowerPoint templates. We recommend two weights – Regular and Bold.

FONT USE WITHIN THE LOGOThe Givergy logo has been created by using the font FS Elliot – a modern sans serif font.

BULLET POINTSCircular bullets are the standard format. Bullets are coloured in purple except when white out. Sub-level bullets should be indented with hyphens.

FS ElliotFS Elliot: Light Regular Bold Heavy ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789 £$%&@*!?

Open SansOpen Sans: Light Regular Semi Bold Extra Bold ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789 £$%&@*!?

PRIMARY TYPEFACE Professional use on printed collateral Titles, headlines and body copy

SECONDARY TYPEFACE Digital & print collateral Titles, headlines and body copy for online use

ArialArial: Regular Bold ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789 £$%&@*!?

SUPPORTING TYPEFACE For use on Word & PowerPoint documents

Aa

Aa

Aa


COLOUR PALETTEPRIMARY GRADIENT

GRADIENT ANGLEThe gradient angle must be set to 45°, this symbolises movement and transition and is representative of momentum and progress.

COLOURSThe gradient uses four colours from the Givergy colour palette in the following order: cyan, navy, purple and magenta. When the primary gradient is used each colour must have equal spacing and each share a balanced proportion of the gradient.

This is the Givergy primary gradient. It reflects the seamless synergy between technology and fundraising. It should be used within the logo, and as a background colour only.

GivergyPRIMARY GRADIENT

2Givergy

NAVY

1 Givergy

CYAN

4Givergy

MAGENTA

3 Givergy

PURPLE

Colour order for the Givergy primary gradient

Gradient angle must be set to 45°


COLOUR PALETTECOLOUR USAGE

C: 76

M: 21

Y: 0

K: 0

R: 8

G: 157

B: 217

# 089DD9

C: 100

M: 87

Y: 21

K: 7

R: 36

G: 55

B: 118

# 243776

C: 67

M: 90

Y: 22

K: 10

R: 108

G: 52

B: 113

# 6C3471

Colour is an engaging and vibrant way to display a brand’s character and is an integral part of the identity.

Five colours have been carefully selected to reflect the Givergy brand identity. These colours can be used for typography, charts/graphs, PowerPoint presentations, web links, tabular systems and to highlight specific information within printed material. They can be used as solid colours as well as tints (a full range of tints in 25% grades is permitted).

COLOUR BREAKDOWNSThe colour breakdowns are shown in each instance – CMYK, RGB values and HEX web safe colours. The RGB and HEX colour values shown are for onscreen use only, therefore colours may differ from the CMYK references.

C: 28

M: 93

Y: 0

K: 0

R: 188

G: 43

B: 135

# BC2B87

C: 63

M: 47

Y: 40

K: 27

R: 94

G: 104

B: 113

# 5E6871

75% 50% 25%Givergy CYANPantone Process Cyan C

75% 50% 25%Givergy MAGENTAPantone 2395c

75% 50% 25%Givergy NAVYPantone 287c

75% 50% 25%Givergy PURPLEPantone 520

75% 50% 25%Givergy SLATE GREYPantone Cool Grey 10c

NOTEDue to the nature of the gradients in the Givergy brand identity, Pantone colours should only be used where a spot colour is mandatory. With all printed collateral, CMYK colour values should be preferred.


ICONOGRAPHYSTYLE AND USAGE

This icon style can be used across both print and digital, as a device to highlight content or to be used as interactive buttons. This simple design can be tailored to any design solution.

COLOURIcons can be used in almost all of the brand colours and the primary gradient providing there is adequate contrast

MINIMUM SIZESTo preserve the visibility of icons they should rarely be used any smaller than the recommended minimum sizes specified here.

FULL COLOUR USAGE

30 pixels wide minimum digital size

10mm wide minimum print size

WHITE-OUT COLOUR USAGE


IMAGERYGRAPHIC DEVICE

Using the venn icon as a graphic device, vibrant and dynamic imagery can be deployed across the Givergy brand identity. This graphic system allows for infinite flexibility and can be tailored to all digital and printed collateral.

USAGETwo venn icons of equal size must be set to multiply. Rotate, position and scale these icons to the desired composition but ensuring that there is an equal balance of magenta, cyan and purple in each composition. White space may be utilised in specific corners for contrast.

The following references demonstrate best practice for creating the most effective compositions.

Overlapping two venn icons of equal size


IMAGERYPHOTOGRAPHY

To support the graphic device photography may also be used across digital platforms and printed items. The photographic image style must contain people and express positivity, be engaging and capture emotions.

DOS AND DON’TS: BRAND IMAGERY• Brand imagery must support the message

in a relevant and engaging way

• Be positive, inspiring and eye-catching

• Capture a moment in time

• Be atmospheric

• Be bright and colourful

• Avoid cliché situations or overly-contrived shots

• Avoid overly busy/confusing images

DOS AND DON’TS: EVENT IMAGERY• Professional images

• Focused on people engaging with the Givergy products

• Focused on people expressing emotion at the events

• Colourful, bold and accessible

• Avoid overly dark images

EVENT IMAGERY CURRENTLY IN USE

BRAND IMAGERY CURRENTLY IN USE


IMAGERY MOODBOARDBRAND PHOTOGRAPHY*

* These images have not been purchased and act as a visual guide only.


Data categoryData categoryData categoryData category

Data categoryData categoryData categoryData category

Data categoryData categoryData categoryData categoryData categoryData categoryData category

VISUAL LANGUAGESTATISTICAL INFORMATION

When displaying information it is important for it to be clear and functional.

The charts, graphs and tables within these guidelines can be built in PowerPoint or in desktop publishing packages such as Adobe Illustrator. When used on an A4 document/PowerPoint presentation the line weight of tables should always be 0.5pt and a minimum 7pt type size for captions, titles and axis/percentage values.

The colours used within the data bars, headers and highlight sections should be from the Givergy colour palette. For statistical information requiring further colours, then tints can be added. The boldest highlight colour is used to signify the greatest value and most positive outcome.

Dolore odio Lorem ipsum Dolore odio

Dolore odio 1.00% 2.00%

Magna feugiat 1.00% 2.00%

Adipiscing elit sed 1.00% 2.00%

Amet sed eros 1.00% 2.00%

Feugiat nulla 1.00% 2.00%

Lorem ipsum 1.00% 2.00%

*Lorem ipsum dolore odio magna sed laoreet in hendrerit odio nulla.

Bubble chart

Field 1Field 2Field 3Field 4

Source: Autem vel eum iriure sed dolor sed hendrerit

76%

47%

21%

18%

Target bar chart

Field 1Field 2Field 3Field 4

45

0

35

15

Source: Autem vel eum iriure sed dolor sed hendrerit Source: Autem vel eum iriure sed dolor sed hendrerit

Field 1Field 2

Bar chart

Axis title

0

5

10

15

20

25

Jan 07 Jan 08 Jan 09 Jan 10 Jan 11

TablePie charts


TONE OF VOICEHOW WE WRITE

As you’ll see, we have been through a rigorous process to define our unique qualities. We have also distilled these qualities into the following key characteristics that should be applied to the way we write and what we say.

BE CONFIDENTThe business’ ability, offering and personality should always be expressed with conviction. We are expert at what we do and have the track record to back up what we say. We are confident, but not arrogant.

BE EMPATHETICExpress affinity with and understanding of our communities and clients.

BE STRAIGHTFORWARD AND SUCCINCTTell it like it is, avoiding verbosity and jargon. Our target audiences are busy, so less is certainly more.

BE CONVERSATIONALEnsure that the language used is open and relaxed. It’s a two-way thing with our clients; so don’t be stuffy or formal when you don’t need to be.

BE FRIENDLYBring personality into the written word demonstrating that the firm is human. After all, we have great face-to-face relationships with our clients, so make sure all written communications achieve the same.

BE PROFESSIONALFinally, copy should always reiterate the firm’s professional standing, ability and values (RAISE, page 4). We are real people and we really know what we’re doing.

1 2 3

4 5 6


GLOSSARY

Align: To relate typography and/or graphic elements on the same horizontal or vertical line.

Brand: A unique set of differentiating promises communicated through a name and its related identifier that link a product, service, or company to its customers.

Crop: To eliminate portions of photographs or illustrations.

Font: A complete set of characters in a given type style.

Grid: A series of vertical and horizontal intersecting lines that serves as a guide in the arrangement of graphic elements and typography to achieve a planned and consistent layout.

Icon: A bold symbol which, through its unique character, instantly conveys an idea.

Layout: The visual arrangement of graphic elements on a page.

Logo: A brand name rendered in a dedicated type treatment, sometimes accompanied by a stylised symbol, all set in a fixed configuration.

Margin: A blank border surrounding the printed portion of a page.

Lower case: The smaller form of an alphabetical letter, as opposed to a capital letter.

Point (pt): A standard typographic unit of measure.

Sans serif: A typeface without serifs (the short, decorative lines appearing at the top and bottom of the strokes of each letter). Arial is an example of a sans serif typeface.

Serif: The short, decorative lines appearing at the top and bottom of the strokes of letters in typefaces such as Times New Roman.

Solid colour: Colour applied without shading or tinting.

Spread: Facing pages of a book, magazine or other printed material.

Spread: The full view of a document or publication when it is opened out flat.

Title case: When the leading letter in a sentence is capitalised. Also writing a word with its first letter as an upper case letter and the remaining letters in lower case.

Typeface: A complete set of typographic characters of a single design, including its various weights and styles.

Typography: The use of type, including its selection, specification and relationship to a given layout.

Widow: A widow is a very short line – usually one word, or the end of a hyphenated word – at the end of a paragraph or column. A widow is considered poor typography because it leaves too much white space between paragraphs or at the bottom of a page.

© 2016 GIVERGY LTD. 21

CONTACT

For everything from high resolution assets to detailed implementation advice, we’re here to help you get it right first time.

Get in touch

Lisa Vecchio, Head of Marketing

T +44 (0) 203 846 8907E [email protected]

Jamie O’Reilly, Graphic Designer

T +44 (0) 203 846 8907E [email protected]

visual identity guidelines...weights – light, regular, semi-bold and bold. microsoft office font...

Documents