Our guide to consistency.

Transcription

1 Our guide to consistency. Welcome to our branding guidelines. Nothing too rigid, but enough to help lay the foundations for what we build.

2 We are the premium local digital team. We are the special situations digital team. What we stand for: We are bold and brave - we take our own route. Clients get more than they expect. We treat clients and their teams as individuals. We are always learning. We are always verging beyond our comfort zone. We are human. We keep our feet on the ground and handle ourselves with integrity and are humble. We are not the client. Our team enjoy their work, our environment and culture. We put the cherry on top. Where we stand: We are a premium brand. Working at a local and national level. The

3 The

4 RocketMill logo on a light background: Gradient Grey 1: C:0 M:0 Y:0 K:50 R:147 G:149 B:152 # Grey 2: C:0 M:0 Y:0 K:70 R:109 G:110 B:113 #6D6E71 Orange 1: C:0 M:35 Y:85 K:0 R:251 G:176 B:54 #FBB040 Orange 2: C:0 M:60 Y:100 K:0 R:245 G:130 B:32 #F58220 Flat Grey: C:0 M:0 Y:0 K:50 R:147 G:149 B:152 # Orange: C:0 M:50 Y:100 K:0 R:247 G:148 B:30 #F7941E Two lower case o characters are used to determine the minimum margins of the logo. Although the icon on top is preferred, it is possible to have it to the left of the type (separated by the width of a lower case c character), providing their is credible design reasoning. This logo version works best on pure white, but can be used on any tint of grey less than or equal to C:0 M:0 Y: K:10. Pantone Grey: Cool Grey 9C / PANTONE 8001C (Metallic) Orange: PANTONE 144C The

5 RocketMill logo on a dark background: Gradient Grey 1: C:0 M:0 Y:0 K:30 R:188 G:190 B:192 #BCBECO Grey 2: C:0 M:0 Y:0 K:10 R:230 G:231 B:232 #E6E7E8 Orange 1: C:0 M:35 Y:85 K:0 R: 251 G: 176 B: 54 #FBB040 Orange 2: C:0 M:60 Y:100 K:0 R: 245 G: 130 B: 32 #F58220 Flat Grey: C:0 M:0 Y:0 K:20 R:209 G:211 B:212 #D1D3D4 Orange: C:0 M:50 Y:100 K:0 R:247 G:148 B:30 #F7941E Using the logo on dark is a good way of associating prestige with the brand, and can be used the same amount as the logo on a light background. Like the previous, the icon on top is preferred, it is possible to have it to the left of the type (separated by the width of a lower case c character), providing their is credible design reasoning. This logo version works best on 90% black, but can be used on any tint of grey greater than or equal to C:0 M:0 Y: K:70. Pure black is also allowed. Pantone Grey: Cool Grey 9C / PANTONE 8001C (Metallic) Orange: PANTONE 144C The

6 PANTONE 158C C:0 M:60 Y:100 K:0 R:245 G:130 B:32 #F58220 PANTONE 382C C:30 M:0 Y:100 K:0 R:191 G:215 B:48 #BFD730 RocketMill Orange: PANTONE 144C C:0 M:50 Y:100 K:0 R: 247 G: 148 B: 30 #F7941E RocketMill Silver: Cool Grey 9C / PANTONE 8001C (Metallic) C:0 M:0 Y:0 K:50 R: 147 G: 149 B: 152 # PANTONE 144C C:0 M:50 Y:100 K:0 R:247 G:148 B:30 #F7941E 90% 90% PANTONE 143C C:0 M:35 Y:85 K:0 R:251 G:176 B:64 #FBB040 80% 90% 70% 90% 80% 90% 70% 60% 50% 70% 80% 60% 50% 80% 70% 60% 30% 40% 50% 60% 40% 40% 30% 50% 20% 30% 20% 40% 10% 20% This chart shows RocketMill s two primary house colours at the far left, with their respective tints/associative colours spawning off of them. The tints should be considered for elements such as gradients - and should not be used in place (or without the presence) of the primary colours at full tint. The secondary colours (Lime Green and Deep Purple) are there if minimal variation is a necessity. They should be used sparingly and with haste. Ideally, there should only be one colour used alongside the black/grey palette. However, two can be used if it is more of a benefit to the context of the design. PANTONE Black C C:20 M:20 Y:20 K:100 R:19 G:12 B:14 #130C0E PANTONE 274C C:100 M:100 Y:35 K:35 R:32 G:28 B:80 # 221F72 The

7 Title Heading - Museo Slab 500 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !? Sub Heading - Asap ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !? Body Copy - Helvetica/Arial Bold, Regular & Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !? Body Copy should ideally be a tint, unless this causes legibility issues. For body copy in prose, the leading (line-height) and tracking (letterspacing) of the type should be at least 140% of the font size e.g. 14pt will require a minimum of 20pt tracking and leading. Type should always be left-aligned as priority, but center-aligned is allowed if it brings benefit to the design in question. Museo Slab works well in uppercase for maxium impact, but can be used in Title/Sentence case too if necessary. Asap should only be used in Title/Sentence case (sentence case is priority). Smaller sizes for body copy is preferred. The

8 If it isn t needed, there s no need to include it. The mentality to the minimal RocketMill design approach. Characteristic Typography A prominent design Minimal, Detailed Background tool, using emotive words with character and identity. This will often be the focal point of the layout. Background space should be readily available in order to let the design breathe. Backgound textures like noise and Heading One paper are also crucial, Iconic Swirl Taken from a part of the flame in the logo, this tool can be used alongside the typography to add prestige. We re premium local. Etiam erat lacus, sagittis ac pharetra in, ornare in est. Vestibulum eleifend imperdiet diam vel ultrices. Nulla commodo vestibulum semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum elit mi, vitae feugiat est. Vivamus nec velit convallis libero varius commodo. Integer ac enim ut turpis pulvinar molestie. Etiam erat lacus, sagittis ac pharetra in, ornare in est. Vestibulum eleifend imperdiet diam vel ultrices. Nulla commodo vestibulum semper. as they connote precision and attention to detail. Circles Another crucial design tool - Used primarily for box-outs and calls to action. Multiples can Simple Type also be used in a The tone of the type should be creative context. interesting, human, digestible and to the point. N.B. RocketMill in prose should always be formatted as RocketMll. The Slice Etiam erat lacus, sagittis ac pharetra in, ornare in est. Vestibulum eleifend imperdiet diam vel ultrices. Nulla commodo vestibulum semper. Positioning Bottom right should be a popular spot for print docs. It should always match the higher end when matched with the slice. A crucial element to the RocketMill brand, the cut is at 3.8 from horizontal and always ascends from left to right. The Treatments Colours Typefaces Grids/Layouts

9 This textured slice is usually a prominent one. It works using a lot of precision and attention to detail. The engraved type (left) works perfectly with this concept, and a subtle black > white > black transparent gradient overlay can give it more depth. The textures used should convey prestige, and should be subtle. A shade of grey can also be used, usually in smaller doses than the textured slice (above). This slice should be smooth and not have any picture texture. However, subtle vectored patterns (left) are a good way of breaking up the solid colour. Drop Shadows: The slice drop shadow should always fall on the darker side, as demonstrated here: The Treatments Colours Typefaces Grids/Layouts

10 Simple vectors (icons) are the main image tool for this stage of the RocketMill brand. Lined patterns are also a prominent tool, using a repetitive spirograph technique Bold circles are a good tool to add splashes of colour. These however, should not be overdone. RocketMill is a brand that embraces the importance of their staff, and portrays them as mini-celebrities. The images need to be casual, yet professional. Images with little or no background are necessary, allowing them to fit in to the minimal surroundings. The

11 26 & 27 Basepoint Business, And Innovation Centre, Metcalf Way, Crawley, West Sussex, RH11 7XX