Visual Identity System Usage
System Overview
Our design sytem combines all the elements which make up our visual identity. Used correctly, we can produce exciting designs with a high degree of flexibility and consistency.
This section of the guide will give a detailed insight as to how these assets can be used, to ensure a strong and coherent brand style.
Digital Media
Here you can see the design system elements used in our composition, for the construction of our brand communications.
Throughout this section of the guide, you will see examples of how these elements are used and should be referred to when creating brand outputs.
It's important to note that apart from the logo, not all the elements shown here need to be present on every piece of communication.
When you look at visual examples throughout these guides, you will see the flexibility of our system while maintaining an overall look and feel which is distinctly boxxe.
Correct usage of brand elements are explored on the following pages.
01.
This section will show a step-by-step breakdown of how to use the boxxe system in it's simplest form.
Then the section will show some examples of how the system can be further pushed to produce more creative outcomes and show off the flexibility that is built into the design system.
Here we see some standard digital display formats. At this point only a 10px grid with 20px margins is visible. Note for extreme letterbox formats such as Leaderboards the top and bottom margins are reduced to 10px and the opposite for extreme portrait formats.
02.
The first step is to decide on a composition. This consists of splitting the format into an image area and a boxxe colour area in either white, black, or boxxe blue.
The grid is used to determine the position of the split. Images may bleed off the layout on as many sides as needed. All images here bleed off on 3 sides.
03.
Next the boxxe logo and vision line are added, using the grid for both size and position. The logo and vision line both sit in the corners, guided by the margin.
Note: for smaller formats the boxxe tagline is removed from the logo as there are insufficient pixels to render it at such a small size.
The TM symbol is also dropped from the vision line. The boxxe logo and the vision line share a width.
This relationship keeps them consistent on any format.
04.
Headlines and any other copy can now be added, on the digital grid, half a grid square is used as a gap between headline text blocks.
Note: some formats may not require additional text beyond the logo and vision line.
Headline text normally is set within coloured blocks to add emphasis. In the digital formats shown here they are either 3 or 4 grid squares high with the text being scaled with the block.
The length of the block is governed by the amount of text, if possible snapping to the nearest grid square.
At this point all elements are present and these formats are acceptable final artwork using the core system, however further embellishment may be added, (see next page).
05.
In order to provide greater visual interest, balance or to break up negative space, additional coloured blocks may be added as embellishment.
The minimum size of these embellishments is one grid square, embellishment blocks appear only in boxxe blue, black or white.
Blocks here are used in a number of ways: to reduce the number of sides an image bleeds on by adding a block colour stripe as a visual framing device.
To break up rectangular images and add greater interest.
To add brand ownership and interest to areas of negative space.
To provide balance for layouts.
06.
Beyond the basics of the brand system, further creativity such as image cut-outs and layering is
also encouraged.
Designs that push the design system further should always be subject to checks by the brand guardians to assure that the look and feel of the boxxe brand is being maintained.
Print Media
Print media uses the same style as digital formats. Images may bleed off on any number of sides or may be contained within the layout.
Seen here is a print advertisement in an A4 format in both headline only and body copy formats.
A4 print media also extends into editorial design, in this case a copy-light editorial spread similar to an advertorial.
A4 print media includes copy-heavy documents such as white papers, booklets and brochures.
A5 formats are used for leaflet advertising or small booklets. A similar grid is used to construct the A5 layout with slightly smaller dimensions.
Pull-up stands again use a similar template, using a squared grid to position layout elements.
Large format poster advertisements such as 48 sheet billboards also follow the brand system.
The boxxe blue is an ultra-saturated colour that gives a striking presence in digital media and has been designed as a digital first brand.
Printed media works on a different principle of producing colour called CMYK, making a blue tone by overlaying Cyan and Magenta ink dots in the print process.
Due to the differences between on-screen and printed collateral, colour matching will be a close approximation to the on-screen boxxe blue.
Print materials use a similar grid system to digital media. This grid governs placing and size of all elements.
