Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

Bentley Brand Guidelines · Digital Design BentleyDigital Brand Guidelines 5 6 7 8 Templates Navigation Imagery formats Carousels 1 2 3 4 Brand Logotype Colour Palette Typography 9 10 11 12 Forms Graphic Elements Newsletters Words

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

We have a unique story to tell about the motoring experience so let’s tell it well. Let’s elevate the engineering passion, our authentic story and bespoke motoring. Let’s make it modern and relevant to our customers. Think of this document as both a source of inspiration and your guide. Keep it at your side. Make notes in it. Remember, it is a living document and the beginning of a consistent brand experience for our customers around the world.

Note that these Digital Guidelines refer only to applicable digital elements, so should always be used in conjunction with the Brand Guidelines and the extant digital design guide. When there is overlap, this updated document supercedes the extant digital design guide.

bentley Digital BRAND guidelines brand 2 If you have questions about the Digital Brand Guidelines, please email: brand.guidelines@bentley.co.uk 1 Bentley Brand

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

2 Bentley Digital Logotype The winged ‘B’ emblem was originally designed in 1929 by illustrator W.Gordon Crosby. It quickly came to symbolise the great achievements and rich experiences that surround Bentley. Ever since, we’ve built the car around it. Online, we cherish this heritage. 1.1 introduction 1.2 Digital version & Clear zone 1.3 DEALER SITEs 1.4 DEALER SITEs Horizontal top Meny bentley Digital BRAND guidelines logotype 3

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

Logotype Introduction 2.1 Bentley logo details The Bentley wings and script are put together in a specific way. The complete logo is based on a 10X by 5X grid (where X = 1 Square). Never deviate from these proportions and never attempt to recreate the logo yourself. There are five versions of the Bentley logo, all created for different application. Trademark Whenever the logo is used, please protect its integrity by including this message: “The name Bentley and the ‘B’ in the wings device are registered trademarks.” Bentley has other trademarks registered that also need to be protected. Before producing communications, please seek legal advice to ensure that the correct references are included.

If you are in any doubt about legal requirements please contact your legal department. Bentley Logo Hiearchy Please familiarise yourself with each of our five logos. They’re shown in a descending order of prominence.

1 Iconic 2 Solid 3 Tonal 4 Photographic 5 Simplified 10X 5X A B X 1 Iconic 3 Tonal 4 Photographic 5 Simplified 2 Solid bentley Digital BRAND guidelines logotype 4 The Bentley logo is our unique ‘signature’. It is made from two elements which are always fixed*: Bentley wings Bentley script As long as these symbols appear consistently, people will recognise who we are. Bentley wings The Bentley wings (A) are unique to the Bentley brand.They have been designed specifically by Bentley and cannot be recreated. That’s why the wings are not symmetrical – there are eleven feathers on the right hand side and ten on the left.

The centre oval is always black and the ‘B’ is always white, except when being embroidered in a single tone colour.

Bentley script The Bentley script (B) is a modern adaptation of the words stamped on Bentley engine blocks. It has been created using a bespoke font which evokes our precision and engineering pedigree. It cannot be recreated using any fonts currently available. *The only time the Bentley wings are used without the Bentley script is on the car, selected branded goods and on the product microsite on the web. See section 2.5 and 2.6 for further information.

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

Logotype Digital Version & Clear Zone 2.2 For digital media, the photographic version of the Bentley Logo should always be used.

This logo is in RGB and should never be used for print. Minimum size: 150 x76 pixels Downloadable logos You can download our logos as eps, tif and jpg file formats in both positive and negative versions. Just visit: www.bentleybrand.com If you require a different file format, please email brand.guidelines@bentley.co.uk Clear Zone The clear zone is an imaginary box which surrounds the logo. Its extent is X. It is essential to keep the clear zone free of all markings to preserve the integrity of the logo.

– Always respect the clear zone. For more information about the Bentley logotype, see chapter 2 Logotype in Bentley Core Elements guidelines. Clear zone x x x x Photographic Bentley logo, Positive version Photographic Bentley logo, Negative version bentley Digital BRAND guidelines logotype 5

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

BENTLEY DEALER NAME X 1.5X 2X 2X 4X MINIMUM SPACE 4X MINIMUM SPACE It’s important to maintain the Bentley Brand Guidelines throughout all communication channels. Bentley’s dealers face the customers on a daily basis. Just as important as the physical manifestation of the Bentley Brand in dealer facilities is the experience of the brand online through the dealers’ digital channels.

Bentley branded dealer sites should adhere to the Bentley Digital Guidelines and the Bentley Brand Guidelines. Colours White is the prefered background for all Bentley Dealer sites. Accent colours and how to use them is described in the Colours section.

Navigation and Grids On the following pages, top level navigation, Horizontal Top Menu and grid are described. Dealer logo and design For more information about the design of the Dealer logo, refer to the Logotype chapter in Core Elements. bentley Digital BRAND guidelines logotype 6 Logotype Dealer sites 2.3

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

The horizontal Top Menu option resembles the current bentleymotors.com site. The Bentley branded top menu leaves a large space open for the dealer to display their information. Grid Preferably a four column grid should be used for the design. Each column should be 25% of the total width.

Width and screen resolution The total width of the site should be fixed and consider the minimum screen resolution set for the site. Dealer content 20px 20px 20px BENTLEY DE ALER NAME X 1.5X 2X 2X 4X MINIMUM SPACE 4X MINIMUM SPACE bentley Digital BRAND guidelines logotype 7 Logotype Dealer sites Horizontal Top Menu 2.4

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

bentley Digital BRAND guidelines colour palette 8 3 Bentley Digital Colour Palette 3.1 Brand colours 3.2 Backgrounds for online applications 3.3 accent colours 3.4 Using accent Colours 3.5 accent colours for car models Colour is emotion. Feelings. Attitude. Our feelings of tradition, heritage and authenticity are built on brand colours, while luxury accent colours allow for an artistic and contemporary view of Bentley.

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

bentley Digital BRAND guidelines colour palette 9 Colour Palette Brand Colours 3.1 The Bentley colour palette consists of four brand and 42 accent colours (3.2).

Green is the most significant colour in Bentley’s heritage. From the racing green sported on Bentley’s cars at Le Mans to the lush green hills and landscape of England’s countryside, the Bentley Green flows deep within our bloodline. The green also represents Bentley’s self-confidence and strong, assured design heritage. Please note that the Bentley Racing green specified at right should be used for all future communication.

Of the remaining brand colours, silver express the integrity of our materials and engineering perfection. Black and white comes from Bentley’s racing origins. Using the colours from this palette for all Bentley communications creates consistency across the whole brand. Bentley Racing green Black White Silver Bentley Racing Green R40, G78, B30 Web colour: #284E1E Bentley Silver R190, G193, B198 Web colour: #BEC1C6 Bentley Black R0, G0, B0 Web colour: #000000 Bentley White R255, G255, B255 Web colour: #FFFFFF

Bentley Digital Brand Guidelines - Bentley Brand Guidelines Digital Design

White White is the foundation that most Bentley communication pieces are built upon and is the prime background colour to use for online and digital applications, never Bentley Racing Green.

Black, Silver and Bentley Racing Green Black, Silver and Bentley Racing Green are mainly to be used as backgrounds for menus, lists, fact boxes, etc. Specifically, only Black and White are used as background colours for menus on microsite, while Black is never used as a background colour for menus on dealer sites and the main website. For all text, always use Black. Other colours Accent colours should be used as a background in moderation and only under close Bentley supervision.

Note that some of the accent colours are used as ‘lead’ colours for specific Benley models. bentley Digital BRAND guidelines colour palette 10 Colour Palette Backgrounds for Online Applications 3.2 White R255, G255, B255 #FFFFFF Black R0, G0, B0, #000000 Silver R190, G193, B198 #BEC1C6 Bentley Racing Green R40 G78 B30 #284E1E

bentley Digital BRAND guidelines colour palette 11 Colour Palette Accent Colours 3.3 R202 G227 B233 #CAE3E9 R237 G235 B170 #EDEBAA R213 G210 B202 #D5D2CA R239 G194 B225 #EFC2E1 R224 G230 B230 #E0E6E6 R199 G209 B197 #C7D1C5 R216 G217 B229 #D8D9E5 R247 G230 B84 #F7E654 R220 G214 B178 #DCD6B2 R222 G163 B200 #DEA3C8 R213 G214 B210 #D5D6D2 R219 G232 B196 #DBE8C4 R215 G200 B220 #D7C8DC R235 G183 G0 #EBB700 R242 G175 B0 #F2AF00 R180 G167 B108 #B4A76C R196 G38 B46 #C4262E R164 G174 B181 #A4AEB5 R206 G214 B75 #CED64B R125 G0 B99 #7D0063 R0 G173 B208 #00ADD0 R0 G117 B176 #0075B0 R0 G81 B114 #005172 R131 G56 B32 #833820 R88 G69 B40 #584528 R94 G23 B45 #5E172D R77 G79 B83 #4D4F53 R87 G133 B117 #578575 R79 G50 B76 #4F324C R189 G79 B25 #BD4F19 R170 G156 B143 #AA9C8F R150 G23 B46 #96172E R152 G155 B151 #989B97 R198 G172 B0 #C6AC00 R79 G45 B127 #4F2D7F R179 G153 B93 # B3995D R222 G56 B49 #DE3831 R172 G192 B198 #ACC0C6 R227 G230 B150 #E3E696 R203 G168 B210 #CBA8D2 R194 G222 B234 #C2DEEA R114 G181 B204 #72B5CC As a natural complement to the four brand colours, we have a modern palette of 42 luxury accent colours.

These accent colours lend a touch of vibrancy and eccentricity, supporting and enhancing the artistic and contemporary face of Bentley. They also provide a contrast to the main brand colours and further strengthen our identity as a luxury brand in a class of its own.

Using the colours from this palette for all Bentley communications creates consistency across the whole brand. Others may be added in the future to reflect the times. For examples and guidance on how accent colours are used, please refer to the sections that follow and the Printed Communcations section of the Applications. Note: The colours might appear incorrect on screens and printouts. For the exact shade, always refer to PMS and EC samples. Note: A printed colour will vary in hue and density depending on the surface it is printed on. To overcome this, always print on the paper (or similar) recommended in the Bentley Guidelines.

bentley Digital BRAND guidelines colour palette 12 Colour Palette Using Accent Colours 3.4 Here are a few examples of how the Accent colours could be used to give personality and highlight information. 1 A red pulse heightens the anticipation. 2 In the newsletter, Accent colours can be used to highlight items. 3 The burgundy arrows draws attention to it. 4 Use of accent colours in small amounts to highlight items. 1 2 4 3

bentley Digital BRAND guidelines colour palette 13 Each Bentley model is given its own unique accent colour. Chosen from the palette, this is the ‘lead’ accent colour.

This colour should be used on all communication for this model. See the following page for these accent colours in use. Within the communication materials, you are free to use other accent colours as necessary. Colour Palette Accent colours for car models 3.5 Mulsanne model colour Pantone® 7457 R 202 G 227 B 233 HTML: CAE3E9 Supersports model colour Pantone® 179 R 222 G 56 B 49 HTML: DE3831 Continental Flying Spur model colour Pantone® 7502 R 211 G 191 B 150 HTML: D3BF96 Continental GTC model colour Pantone® 601 R 237 G 234 B 156 HTML: EDEA9C Continental GT model colour Pantone® 268 R 79 G 45 B 127 HTML: 4F2D7F

bentley Digital BRAND guidelines typography 14 4 Bentley Digital Typography The Bentley typefaces used online are Gill Sans Light and Gill Sans Regular. However, as these typefaces are not universally available to all online users, Arial, which has good legibility on screen and is present on virtually all computer systems, is specified here for the majority of the text. All typography should be ranged left, avoiding indents and set in upper and lower case, except where stated. 4.1 primary typeface, Gill sans 4.2 Arial – the fallback typeface for online use 4.3 Text links 4.4 Text at work 4.5 handwritten headlines 4.6 handwritten headline usage

bentley Digital BRAND guidelines typography 15 4.1 Typography Primary typeface – Gill Sans Released in 1928, Gill Sans is a humanist sans-serif typeface designed by Eric Gill, an established English sculptor, graphic artist and type designer. It has become a highly regarded and timeless font with a clean and simple appearance and underlying sophistication. Although strictly contemporary in effect, Gill’s type owes much to the proportions and forms of the Renaissance letter. Always use Gill Sans for internal communication, stationery and online communication.

In external print communication, Gill Sans serves as an important complement to Caslon for Bentley and should have limited, but regular use in captions, information boxes, address lines and similar.

Please note that at Bentley Motors in Crewe, all computer are already set up with the standard Gill Sans font. There is no need to purchase the font if located there. Purchase of typeface You can purchase the Gill Sans typeface from AGFA Monotype. www.agfamonotype.com info@fonts.com Note that Gill Sans Bold is not to be used online.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! Gill Sans Light 24/28 pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! Gill Sans Light italic 24/28 pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! Gill Sans Regular 24/28 pt Gill Sans Regular italic 24/28 pt

bentley Digital BRAND guidelines typography 16 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! Arial Regular 24/28 pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! Arial Bold 24/28 pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 % ! Arial Italic 24/28 pt Arial Bold Italic 24/28 pt 4.2 Typography Arial – the fallback typeface for online use Gill Sans is the primary typeface for online use.

But when Gill Sans cannot be used for technical or other reasons, Arial is the chosen complementary typeface.

Arial, sometimes marketed as Arial MT, is a sans serif typeface and computer font packaged with Microsoft Windows, other Microsoft software applications, Apple Mac OS X and many PostScript computer printers. Arial is the preferred Bentley typeface for Asian languages and the Cyrillic alphabet.

bentley Digital BRAND guidelines typography 17 Links within text blocks are indicated with black and an underline. On roll overs, the section highlight colour is preferably used. When clicked, black returns. 4.3 Typography Text links Nibh et alis dolore feu faci ea Consequip eugiatum nim iusci tie facip ex et lam, volorer ostrud eril ut vel elestie tie magna acil utate dolorer sum zzrit ip ea feugait wisim quisl in vel il utat duissim ipis alit, qui bla alit acilla facillutatue er.

Incinci ncipit, quipit landrem dolore. Acil utate dolorer sum zzrit ip ea feugait wisim quisl in vel il utat duissim ipis alit.

Nibh et alis dolore feu faci ea Consequip eugiatum nim iusci tie facip ex et lam, volorer ostrud eril ut vel elestie tie magna acil utate dolorer sum zzrit ip ea feugait wisim quisl in vel il utat duissim ipis alit, qui bla alit acilla facillutatue er. Incinci ncipit, quipit landrem dolore. Acil utate dolorer sum zzrit ip ea feugait wisim quisl in vel il utat duissim ipis alit. Link underlined and highlighted in black within a text block Link highlighted in roll over.

bentley Digital BRAND guidelines typography 18 All typography should be aligned left.

Avoid indents and set in upper and lower case, except where stated. Heading is written in black, all caps, in a large size. Introductory text is in a slightly smaller size, still using black. Body text is written in a smaller size, corresponding 12pt, with a relatively high line height, here corresponding to 16pt. Instead of using black body text uses a dark grey shade, #666666. Link defined by black colour and an underline. 4.4 Typography Text at work Sutrud tate feis nim dolum quat am eugait quat Nibh et alis dolore feu faci eaIscipit wisi. Equat iniat. Ut iustrud ex esectem aliquis dolore feui tisl etre tati iriure modolore te faci blan venit, consequis et laor eet nosto dolorti ncilissit in hendio dolore dolor odolobore dolore dit amconse magnit nis dignim.

Et, vel dolorero odio odionum modolrer at lut accmy nostrud el ulla commy nonsectem voloreet utem dolesenim alit laor illaoreros doluptat. Atum do commodigna faccumsan et, verostrud digna u feugait esscipsum alis dolore diat. Pate vel ilit, sum vent ut lam quipisl deliquis nullumm odignissent inisim aliquat augiam dui erilla feu facinci duismod ionulla at venismolor sequat. Borperat am vel eugue voloreetue modolob ortinim vulla feugait voloborero et wisi bla at. Sustrud tate feuis nim dolum quat am eugait aci blan ero odolmsan hendigna facidunt prat, sis del iure venim zriliquis dolorerci exer Gill Sans Light, all caps, 24pt, #333333 Aligned left.

Limit text to approximately 60 characters.

Intro Gill sans light, 18pt, black Main text Gill sans light, 12pt #333333 Link Gill sans light, 12pt, black, underlined

bentley Digital BRAND guidelines typography 19 Typography Handwritten headlines 4.5 We always use original handwriting, never a script font. Yes, it’s a little more tricky to do, but this is exactly why we should do it. Handwriting is only used for headlines and each one is unique, created for a certain production. They are then scanned in high resolution. These headlines are not translated into different languages. For further guidance on handwritten headlines, please see section 5.5.

Legibility headline The handwritten headlines should remain as they are in English regardless of language, but the Legibility headline (Adobe Caslon Pro Semibold Small Caps) underneath should be in the local language. Sourcing handwritten headlines There is already a large image library of different words and sentences which are available free of charge. When a new handwritten headline needs to be commissioned and purchased, please e-mail brand.guidelines@bentley.co.uk. Note that new headlines will need two to three days of production time before they can be delivered. Legibility headline below Each handwritten headline should always be accompanied by a typed headline in small caps to ensure readability and ease the translation process.

The handwritten headlines should remain as they are in English regardless of language version, but the small caps headline underneath should be in the local language. — Adobe Caslon Pro Semibold Small Caps — Letter spacing: +120 (InDesign) — Letter spacing: +60 (QuarkXpress) — Type size: Depending on format. Minimum size 7.5/8.5 pt cl assic br itish design, h andcr af ted and engineered in crew e. Headline in Greyscale version This version is to be used whenever the headline is placed on a white background. It has different tones of black, which increases the feeling of authenticity in the non-computer generated handwriting.

Headline in Bitmap version This version is to be used whenever the headline is placed on a coloured or image background. It could also be made white. r acing w ith st y le

bentley Digital BRAND guidelines typography 20 To be legible, the handwritten script may not be used in small sizes. When used on top of photograph or other coloured background, the contrast needs to be strong. 1 Handwritten headline in a calm, suitable area in the photo. 2 Handwritten headline in a calm, suitable area in the photo along with supporting typography. 3 Handwritten script used as a page headline, supported by typography in Gill Sans Light.

4 Handwritten script in white on a black background. 4.6 Typography Handwritten headline usage 1 2 3 4

0.0 bentley Digital BRAND guidelines templates 21 5 Bentley Digital Templates W o r k i n p r o g r e s s !

0.0 bentley Digital BRAND guidelines Navigation 22 6 Bentley Digital Navigation A Bentley Motors site should always be easy to navigate with a recognisable navigation system. Note that on handheld devices, the navigation systems need to be adapted to the device’s limits and possibilities. 6.1 Brand 6.2 horizontal Top menu 6.3 HoriZontal drop-down lists 6.4 Double Horizontal Bars 6.5 vertical list menu 6.6 Footer

x x x x x x x Bentley Online Navigation All new Bentley sites should rely on a top horizontal menu as the primary navigation.

First level navigation may be supplemented by a second level navigation in the form of either a drop-down list system or an underlying second horizonal navigation bar. For temporary campaign sites and media spaces, it is important to think outside rigid patterns. Thus, Bentley supports other methods of navigation when appropriate. The Bentley navigation should be designed to fit the minimum resolution of 1024x768 pixels.

Navigation Brand 6.1 bentley Digital BRAND guidelines Navigation 23

bentley Digital BRAND guidelines navigation 24 Logo When possible, the preferred position for the Bentley logo is centred. Please refer to previous chapter regarding logo usage. Distribution List options should be evenly distributed between the logo and site sides. Lines When the topline is present in the design of the menu, the lines should top align with the Bentley script. Odd numbers When an odd number of list options are present, the left hand side of the logo should carry the bulk of the options.

6.2 Navigation Horizontal Top Menu x x x x x x x x x x x x x x Odd number of menu items.

bentley Digital BRAND guidelines navigation 25 Drop-down tabs This is a system that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value (first level navigation). When activated, it displays (drops down) a list of values (second level), from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value. The design executions may vary from the example shown, as long as it follows the Bentley Digital Brand Guidelines. Don’t A drop-down list should never contain sub-levels of navigation.

Navigation Horizontal Drop-Down Lists 6.3 x x x x x x x x x x x x x x x x x x x x x

As a drop down list is limited to showing only one option per category when not active, a second horizontal navigation bar is a good complement when a larger menu is needed. The design executions may vary from the example shown, as long as it follows the Bentley Digital Brand Guidelines. Don’t Never use drop-down with second horizontal menu. Translations Consider length of translation with use of a second horizontal menu. Online Navigation Double Horizontal Bars 6.4 x x x x x x x x x x x Ownership Models Distinguished heritage x x x World of Bentley Lorem Ipsum 1 Lorem Ipsum 2 Lorem Ipsum 3 Lorem Ipsum 4 Lorem Ipsum 5 Lorem Ipsum 6 Lorem Ipsum 7 Lorem Ipsum 1 Lorem Ipsum 2 Lorem Ipsum 3 Lorem Ipsum 4 x x x x x x x x x x Models x Lorem Ipsum 1 Lorem Ipsum 2 Lorem Ipsum 3 Lorem Ipsum World of Bentley Lorem Ipsum 1 Lorem Ipsum 2 Lorem Ipsum 3 Lorem Ipsum 4 Lorem Ipsum 5 Lorem Ipsum 3 bentley Digital BRAND guidelines navigation 26

A vertical list menu should be left aligned, never centred or right aligned. A vertical menu should be used as a secondary navigation. List menu texts are set in all caps. Colours and highlights To indicate rollover and active states, a highlight colour may be chosen among the Bentley brand and accent colours. Be sure to keep the number of colours to a minimum to maintain an exclusive design. Active links and On Click is usually indicated by black when on a light background. Don’t – Never centre or right align a vertical menu.

– Never use more than one, excluding black, highlight colour per menu.

– Only one option may be indicated as active at a time. Navigation Vertical Menu 6.5 Link number 1 Link number 2 Link number 3 Link number 4 Link number 1 Link number 2 Link number 3 Link number 4 Link number 1 Link number 2 LInk number 2.1 Link nUmber 2.2 Link number 3 Link number 4 Link number 1 Link number 2 LInk number 2.1 Link nUmber 2.2 Link number 3 Link number 4 Link number 1 Link number 2 LInk number 2.1 Link number 2.2 Link number 3 Link number 4 Link number 1 Link number 2 LInk number 2.1 Link nUmber 2.2 Link number 3 Link number 4 Link number 1 Link number 2 LLink number 3 Link number 4 Link number 1 Link num 2 LInk number 2.1 Link nUmber 2.2 Link number 3 Link number 4 Link number 1 Link number 2 LInk number 2.1 Link nUmber 2.2 Link number 3 Link number 4 Vertical List menu Rollover Active option, in black, with underlying options Only one option may be indicated as active at a time.

Menus should be set in all caps. Never use more than one, excluding black, highlight colour per menu.

Never right or centre align menu lists. Never right or centre align menu lists. Active option bentley Digital BRAND guidelines navigation 27

Navigation Footer 6.6 Menus should be set in Gill Sans Small Caps. The footer should be reserved to only the absolute necessary information and/ or links. Links to legal information, site map and a contact page should in all cases be accessible. Please refer to the current rules and regulations in the country of publishing regarding copyright terms, etc. Links and highlights The footer links never indicate an active state.

Rollover is indicated by the section highlight colour, On Click by the use of black. Footer option On Rollover Footer option On Click bentley Digital BRAND guidelines navigation 28

0.0 bentley Digital BRAND guidelines imagery formats 29 7 Bentley Digital Imagery format Bentley has developed a distinctive photographic style that captures a multi-faceted juxtaposition of opposites – ‘The Fusion of Extremes’. It is a style that highlights the authenticity of our hand-built engineering legacy while still being contemporary, surprising and stylish. Chapter 4 in the Bentley Brand Guidelines gives guidance regarding image selection and cropping. 7.1 16:9 – the prefered format

7.1 Imagery format 16:9 – the preferred format bentley Digital BRAND guidelines imagery format 30 16:9 16:9 is quickly becoming the standard for video clips online as well as offline.

Today its also the most common format for television sets. Using a standardised media format as a base eases asset generation and asset management for Bentley. The prime reason for Bentley to also use 16:9 for still imagery online is the opportunity to use media dedicated spaces both for still photography and video without having to change the design of the page. Carousel & 16:9 When a navigation carousel is used, the carousel should be included in the 16:9 format to be visible on screen. Large media formats Make sure that any top navigation remains visible, along with any large media spaces used for navigational purposes and/or dominating a page, if so desired.

Keep in mind that navigation logic and ease of use is of utmost importance. 16:9 shape When a media carousel is used it should be included in the total height of the 16:9 format

0.0 Explore Link Item 2 8 Bentley Carousels Carousels are a good way of increasing the content and options available to the user, while maintaining a clean design. A carousel has the benefit of providing a large number of options and links and making them readily available to the user. Still, it is important to keep the content up-to- date and relevant. Links and content should be relevant to the content the user already has chosen to view on the current page or media space. 8.1 Logic bentley Digital BRAND guidelines CAROUSELS 31

Carousels Logic 8.1 Rotation The carousel should revolve one step/ content item at a time when activated.

No continuous scroll on hover or similar. Arrow navigation should be used on both sides of the carousel. Preferably 3 to 5 console items should be used in the carousel. There should always be a clear call to action and/or indication that there is more content to be explored in the carousel than what is visible at a quick glance. Carousels and media spaces When the carousel is part of a larger media space, the carousel should primarily control the content of that specific media space. If a carousel contains links to other webpages, external or internal, it must be clear to the user that he/she is taken away from the current page.

The carousel should also be designed so that it feels like an intergrated part of the media space itself. A clear call to action, in the form of arrows or similar, shows that there is more content to be explored Links that takes the user away from the current page should indicate this. ExploreLink Item 4 Item 3 Item 2 Item 4 Media Space Explore Link Item 3 Item 2 bentley Digital BRAND guidelines CAROUSELS 32

0.0 bentley Digital BRAND guidelines forms 33 9 Bentley Digital Forms Forms should contain the absolute minimum number of input-fields and options necessary to do the job.

Options dealing with colours for car exteriors and interiors, for example, should not be illustrated unless the quality of the illustration does the product justice. 9.1 structure 9.2 Error messages SEND Lorem ipsum Lorem ipsum

Forms Structure 9.1 Forms are built from a consistently applied ‘kit of parts’: a set of boxes or fields, dropdown menus, text and rules. The example shown here is based on a form with 2, 3 and 4 boxes across the maximum available width. If a form should require a different number of boxes across this width, ensure that the box widths are of equal size and that the gap between boxes is 1 line height space. Allow for some flexibility in the event that system text is increased across browsers to prevent form items breaking onto the next line. The first box in each section must be aligned left.

The line height should be appropriate to the content that is placed in the field.

The default height should be 1 line. Text fields that have multiple lines are, in general, used when a user is asked to provide detailed feedback, for example. In these cases, a maximum number of characters that could be entered into the text box should be specified. When using drop-down menus, users shouldn’t have to scroll unnecessarily. Drop-down menu text should be kept short and to the point, preferably one word. The form should be followed by a confirmation page.

SEND CANCEL Lorem ipsum x Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum x bentley Digital BRAND guidelines forms 34

Forms Error messages 9.2 Lorem ipsum Lorem ipsum Error lorem ipsum. Volobor ing er aut veros nonse mod dolortinibh euguer. Error lorem ipsum. Volobor ing er aut veros nonse mod dolortinibh euguer. Lorem ipsum Lorem ipsum Error message in red, inpuT-field heading highlighted Error message text in white on a red background. Input-field heading highlighted. If an error occurs when a form is posted, the user should be notified promptly and clearly.

An initial message should be placed on the top of the form, collecting the relevant feedback.

Each input field that needs correction should be highlighted. SEND CANCEL SEND CANCEL bentley Digital BRAND guidelines forms 35

0.0 10 Bentley Digital Graphic Elements Bentley’s Brand Language is built on contrast. Tradition versus contemporary design. These values should also be expressed through the design of graphical elements as symbols and patterns. It’s important to keep the design of websites and applications refined and clean. Never use more symbols than absolutely necessary to support navigation and usability online. 10.1 buttons, graphic elements 10.2 Iconography 10.3 Patterns bentley Digital BRAND guidelines GRAPHIC ELEMENTS 36

Graphic Elements Buttons and graphic elements 10.1 The use of graphic elements, such as buttons and arrows provide key functionality and interest, supporting the site’s content. Together, when correctly applied, they will help the user to navigate efficiently around the content of a page, minimising the number of clicks needed to find a piece of information. Buttons It’s important that buttons are clear and texts are legible. Text inside buttons should be given enough space. If the font size is X pixels the space should be at least X pixels, so the edges are not cramped. Buttons should be set in caps.

The colour of the button should correspond to the main text colour used with one of the defined accent colours as a rollover state, if used. Symbols and arrows in menus The weight, size and colour of the arrow or symbol preceding a text link in a menu or list should correspond to the weight, size and colour of that same text. When a rollover state is used, the symbol or arrow should change with the text, and vice versa. Accent colours Using an accent colour as the non-active state to create extra impact is okay, but remember to use this with restraint. Basic button design in not active versus roll over state.

Buttons x x x Symbols and arrows in menus When a light font is used, the symbol preceding should mimic the weight of the text. Symbol mimicing the weight of the text.

Both symbol and text change colour on roll over. Keep me updated Keep me updated Keep me updated bentley Digital BRAND guidelines GRAPHIC ELEMENTS 37 x x

Graphic Elements Iconography 10.2 Standardised icons A number of icons have been predefined and should always be used consistently across the different Bentley sites. Today these are Newsletter, Download Image, Download PDF and Print selection. x x Newsletter symbol Download Image Download PDF Print Download image Download pdf PRINT x NEWSLETTER x x x x x bentley Digital BRAND guidelines GRAPHIC ELEMENTS 38 View mode symbol VIEW MODE x x View mode symbol VIEW MODE x x

Graphic Elements Patterns 10.3 Patterns We can recognise certain patterns and shapes appearing consistently in all models – diamond stitching, the grille pattern and knurling. These are the more subtle, yet equally strong visual identifiers that create a connection to Bentley. The same shapes can be used as a pattern online to build a stronger identity for the brand. Example of the diamond pattern used in the top horizontal menu. Diamond pattern bentley Digital BRAND guidelines GRAPHIC ELEMENTS 39

0.0 11 Bentley Digital Newsletters As it is important to maintain the Bentley Brand Guidelines throughout all communication channels.

Bentley has defined two separate templates. General newsletter for Bentley Motors own communication, and a separate Dealer newsletter template. 11.1 General Newsletter 11.2 Dealer newsletter bentley Digital BRAND guidelines NEWSLETTERS 40

11.1 Newsletters General Newsletter The General newsletter template forms a foundation for newsletter mailings. The design can support one or more articles across one column. Images All images included in the newsletter should adhere to the Bentley Motors photography matrix. Most important is the quality of the first larger image. Heading Keep the heading of the newsletter short and to the point. Especially as this is what motivates the users to investigate the rest of the mailing, and perhaps download on handheld devices.

263 px 50 px 263 px 560 px 470 px bentley Digital BRAND guidelines NEWSLETTERS 41

11.2 Newsletters Dealer Newsletter The Dealer Newsletter design is restricted to one main article with a header image. Multiple news headlines with links can be added after the main article. A two column space is reserved for dealer contact information. Images All images included in the newsletter should adhere to the Bentley Motors photography matrix. Most important is the quality of the first larger image. Heading Keep the heading of the newsletter short and to the point. Especially as this is what motivates the users to investigate the rest of the mailing, and perhaps download on handheld devices.

263 px 50 px 560 px 225 px 20 px 225 px bentley Digital BRAND guidelines NEWSLETTERS 42

12.1 bentley tone of voice 12.2 storytelling 12.3 brand stories 12.4 product stories 12.5 do and do nots Our voice is the clue to our personality. There’s no better way to reveal our passion for designing and driving hand-built cars than through the words we use. Or, indeed our Britishness. In simple terms, we should write the way we build our cars – by focusing on the end-user and handcrafting the work. 12 Bentley Words “w hen you have extreme power, you don’t need to flaunt it”.

bentley brand guidelines words 43

12.1 Words Tone of Voice bentley Digital BRAND guidelines WORDS 44 The Bentley Tone of Voice is refined, witty, sophisticated and yet personal. It is infused with a twist of British eccentricity that is subtle, vibrant and elegant. Confident yet relaxed. Not so abstract. A more human touch. We’d like to avoid motor industry clichés and tell our passionate engineering stories in a way that only Bentley can. Short anecdotes say far more than flowery prose. Refined The quality of being cultivated, elegant and discerning. Witty Showing or characterised by quick and inventive temperament. Sophisticated Having experience and being stylish – a cosmopolitan.

Personal Being distinctive and concerning character and emotions. Confident yet relaxed The quality of being composed and self-assured. Passionate Showing or caused by strong feelings or a strong belief.

To bring ‘a fusion of extremes’ to life, we should always aim to tell a story that captures the essence of the brand in a more emotional sense. The whole Bentley brand is rich and substantial so there are many authentic stories to be told about the world’s most prestigious driving experience – enabled by the products of exquisite quality. Why a story? Because stories touch people in the heart and mind. Done well, they are memorable and lasting. We believe they will help us better capture the feeling and experience that is distinctively Bentley.

Words Storytelling 12.2 How and why we use storytelling – Establish relevance with key target audience.

– Position the brand and deliver core messages. – Inject a distinctive tonality into the brand. – Create a vibrancy within traditional values. – Enhance the real sense of history and heritage. – Elevate the warm, human element within the brand. – Initiate and nurture lasting relationships and loyalty. bentley Digital BRAND guidelines WORDS 45

Words Brand stories 12.3 Be sophisticated, yet down-to-earth. Example: “This company was created by driving enthusiasts who would rather be racing than admiring their cars in garages.” Do: – Attitude – Pride – Bentley spirit – Straightforward Focus on: – Modern as a state of mind, not a new set of clothes – Relevant modern values: authenticity, individuality, design. – Relevant engaging stories that dramatise the brand experience. – A more accessible contemporary style – A ‘fusion of extremes’ in our writing (macro v micro / gutsy v sublime / short v long).

Take the ‘windy journalist’ approach.

Example: “An ever-present from the very earliest days of the company, when founder W.O.Bentley created cars that could thrill and cosset in equal measure, the secret behind every Bentley has been the ability to provide the fusion of extreme power, comfort and refinement – the must-have ingredients for the perfect Grand Tourer.” Do not: – Long sentences – Multiple clauses – Flowery prose – Abstract Use the canned ‘Wikipedia’ feeling. Example: “Grand Touring is about enjoying every moment you spend in a Bentley; every bend in the road, every mile of every journey.” Do not: – You’ve heard it before (clichés) – School teacher feeling – Talking at the reader – Impersonal Do: Do not: bentley Digital BRAND guidelines WORDS 46 More than pure entertainment or a random collection, brand stories should be carefully selected to dramatise the brand strategy, language and experience.

They are factual and based on facts from reliable sources and key publications (e.g., Bentley the Story, The Definitive Works, etc.).

Applications – Brand Book – Advertising – Exhibition and events – Website – Direct marketing – Official statements

Words Product stories 12.4 – Dare to be more engaging and personal. – Connect “no compromises” attitude of Bentley to the successful, cosmopolitan standards of the target audience – Dial up the spirited sense of adventure of Bentley – it’s obsession with fusing power and refinement in hand-crafted, well- engineered cars – in an era where many manufacturers are doing the opposite. – Focus on relevant and passionate stories: authenticity, design, individuality – Maintain a high energy and dynamic feeling.

Example: “To achieve exhilirating heights of performance, you need both courage and a healthy sense of curiosity. After the launch of the launch of the wildly popular Bentley Continental GT Speed, the engineers and designers at Crewe started to wonder how they could make it even more engaging, even more extreme.” – Presume to know the reader too well (you always lose). – Use long, unwieldy sentences. – Be afraid to retell old stories in a fresh new way, while adding new, relevant ones.

Example: “The advanced Electronic Stability Programme (ESP) that operates in unison with the all-wheel drive has been retuned for both the Supersports Coupé and Convertible, with a new dynamic setting that moderates ESP intervention at low speeds, providing a greater degree of driver interaction and control, and then reinstates power more quickly after the traction control system is triggered, giving the spirited driver a greater sense of control and the ability to exploit the full potential of the new engine.” Do: Do not: bentley Digital BRAND guidelines WORDS 47 Product stories should be used to describe the key features or messages of a Bentley, the specifications of a product or the best way of doing something.

It needs to be accurate, but doesn’t have to be dry. The intention is to add to the knowledge of your audience.

Applications – Feature Book – Card Deck – Other Product brochures – Website – Technical documents – Service invitations – Signage – Internal documents – Forms and reports – Packaging

Shown opposite are some general rules to bear in mind – and also some things to avoid. Above all, keep the message accurate. Writing for the web People respond to website pages differently from printed pages.They tend to scan rather than read and prefer messages to be short. As a result, writing for Bentley online communications brings special challenges. Shown opposite are some general rules to bear in mind – and also some things to avoid.

Always remember – less is more. Words Do and do nots Do not replace surprising words with obvious ones Do not use slang Do not deviate too far from the key message Avoid talking exclusively about “us” Avoid writing sentences over 20 words long Do not overuse bullet points – lists can be daunting Don’t make the reader wade through reams to get there Avoid wasting energy on abstract thoughts Avoid writing paragraphs over 5 lines or sentences over 20 words Don’t try and say it all on one page Tell an interesting story Take pride in correct grammar Bring out benefits, not just features Always think of your audience Make one major point at a time Summarise the key points Help the reader go straight to what they want Use meaningful words for hyperlinks Use real examples and active language Use graphics to express ideas more concisely Link to additional information 12.5 Do: Do (Web-specific): Do not: Do not (Web-specific): bentley Digital BRAND guidelines WORDS 48 Please see Chapter 8 in the Bentley Brand Guidelines for more guidance.