Design

By following these simple guidelines you can create bold and impactful, uniquely identifiable design that reflects the brand as it was intended to be.

Logos
Download assets
The GBG logo
The GBG logo is simple and bold, and reflects the character of the brand.
Logo variations
The logo is available in dark or light variants. It is recommended that the dark logo is used on white or lighter colour backgrounds and the dark logo is used on black or darker coloured backgrounds. Please avoid using the logo over busy patterns or photos.
GBG logo dark
SVG / PNG / EPS
GBG logo light
SVG / PNG / EPS
Logo usage
Our logo works best when it has enough room to breathe. Follow these simple spacing rules. Allow a minimum space of 50% of the size of the G around the logo. Please ensure that the logo is no smaller than 50px on screen and 35mm on print applications.
Logo guidelines
Typography
Download assets
Urbane and Helvetica Now are the two typefaces that make up the GBG brand. Urbane is used for display treatments as large scale headings. Helvetica Now is a simple classic and highly readable font designed for legibility in longer form copy.
Urbane
An all-purpose workhorse family with wide application. The larger x-height gives an open readability even in small sizes, while the range of weights and styles make a large and versatile family.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Helvetica Now
Helvetica® Now is a new chapter in the story of perhaps the best-known typeface of all time. Available in three optical sizes—Micro, Text, and Display—every character in Helvetica Now has been redrawn and refit; with a variety of useful alternates added.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Type scale
The typographic scale below has different weights and styles to help you lay out compositions for both desktop and mobile. The scale is largely based on the widely used 8px system to ensure precision and continuity in screen-based type applications.
Building trust in a digital world
Heading Extra Large
Font: Urbane
Weight: Demi bold (600)
Size: 64pt
Line height: 120%
Letter spacing: -2%
Building trust in a digital world
Heading Large
Font: Urbane
Weight: Demi bold (600)
Size: 56pt
Line height: 120%
Letter spacing: -1%
Building trust in a digital world
Heading Medium
Urbane Demi bold (600)
40px / 56px
0% Letter spacing
Building trust in a digital world
Heading Small
Font: Urbane
Weight: Demi bold (600)
Size: 32pt
Line height: 120%
Letter spacing: 1%
Building trust in a digital world
Heading Extra Small
Font: Urbane
Weight: Demi bold (600)
Size: 18pt
Line height: 120%
Letter spacing: 2%
eyebrow
Eyebrow Medium
Font: Urbane
Weight: Medium (500)
Size: 18pt
Line height: 120%
Letter spacing: 4%
eyebrow
Eyebrow Small
Font: Urbane
Weight: Medium (500)
Size: 14pt
Line height: 120%
Letter spacing: 6%
Building trust in a digital world
Paragraph Extra Large
Font: Helvetica Now Text
Weight: Regular (400)
Size: 32pt
Line height: 150%
Letter spacing: 0%
Building trust in a digital world
Paragraph Large
Font: Helvetica Now Text
Weight: Regular (400)
Size: 26pt
Line height: 150%
Letter spacing: 0%
Building trust in a digital world
Paragraph Medium
Font: Helvetica Now Text
Weight: Regular (400)
Size: 18pt
Line height: 150%
Letter spacing: 0%
Building trust in a digital world
Paragraph Small
Font: Helvetica Now Text
Weight: Regular (400)
Size: 14pt
Line height: 150%
Letter spacing: 1%
Building trust in a digital world
Label Medium
Font: Helvetica Now Text
Weight: Bold (700)
Size: 18pt
Line height: 150%
Letter spacing: 0%
Building trust in a digital world
Label Small
Font: Helvetica Now Text
Weight: Bold (700)
Size: 14pt
Line height: 150%
Letter spacing: 0%
Recommended colour use
To ensure good legibility and contrast, it is recommended that the following colours are applied. Please see the accessibility section for more detail.
Headers, Subheaders
INK900P
Body copy
INK600
Colour
Download assets
The GBG colour scheme is bold, bright, refined and impactful, and is a central element of the brand personality. Each colour is given a code - this is used to ensure consistent colour naming across all applications. It is structured by name followed by shade, and is suffixed with a 'P' to denote a primary shade.
Primary shades can be used widely whereas other shades should be used sparingly, primarily for illustrative application.
Brand colours
The brand colours are the most widely used part of the colour scheme, and can be used on all applications.
INK
INK is the primary brand colour, and should make up a large proportion of your design.
INK900P
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 15, 15, 26
CMYK: 94, 85, 55, 82
Pantone 426C
WCAG: AAA
INK800
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 36, 36, 51
CMYK: 86, 78, 50, 63
WCAG: AAA
INK700
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 61, 61, 77
CMYK: 76, 67, 45, 45
WCAG: AAA
INK600
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 92, 92, 102
CMYK: 62, 53, 41, 32
WCAG: AAA
INK500
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 128, 128, 140
CMYK: 52, 42, 32, 15
WCAG: AA
INK400
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 156, 156, 166
CMYK: 42, 33, 26, 7
WCAG: AAA
INK300
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 184, 184, 191
CMYK: 31, 24, 20, 3
WCAG: AAA
INK200
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 212, 212, 217
CMYK: 20, 14, 13, 0
WCAG: AAA
INK100
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 242, 242, 242
CMYK: 6, 4, 5, 0
WCAG: AAA
GRAPE
BG500P
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 120,120,255
CMYK: 67, 57, 0, 0
Pantone 272C
WCAG: AAA
BG900
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 40,40,85
CMYK: 97, 92, 33, 31
WCAG: AAA
BG800
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 60,60,128
CMYK: 91, 84, 15, 3
WCAG: AAA
BG700
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 80,80,170
CMYK: 80, 73, 0, 0
WCAG: AAA
BG600
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 100,100,212
CMYK: 74, 65, 0, 0
WCAG: AAA
BG400
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 160,160,255
CMYK: 45, 39, 0, 0
WCAG: AAA
BG300
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 185,185,255
CMYK: 32, 28, 0, 0
WCAG: AAA
BG200
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 215,215,255
CMYK: 18, 16, 0, 0
WCAG: AAA
BG100
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 240,240,255
CMYK: 7, 6, 0, 0
WCAG: AAA
Secondary colours
Secondary colours can be used for accents and illustrative purposes.
OCEAN
BO500P
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 70,200,190
CMYK: 64, 0, 33, 0
Pantone 3262C
WCAG: AAA
BO900
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 0,99,89
CMYK: 88, 35, 61, 30
WCAG: AAA
BO800
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 13,124,113
CMYK: 84, 28, 57, 13
WCAG: AAA
BO700
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 29,147,135
CMYK: 79, 20, 51, 3
WCAG: AA
BO600
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 52,173,161
CMYK: 72, 5, 43, 0
WCAG: AAA
BO400
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 125,215,210
CMYK: 51, 0, 24, 0
WCAG: AAA
BO300
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 160,225,220
CMYK: 40, 0, 19, 0
WCAG: AAA
BO200
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 200,240,235
CMYK: 25, 0, 12, 0
WCAG: AAA
BO100
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 235,250,250
CMYK: 9, 0, 4, 0
WCAG: AAA
CORAL
BC500P
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 232,110,90
CMYK: 3, 68, 61, 0
Pantone 7416C
WCAG: AAA
BC900
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 109,3,0
CMYK: 33, 100, 98, 51
WCAG: AAA
BC800
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 137,20,14
CMYK: 28, 100, 100, 34
WCAG: AAA
BC700
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 170,43,34
CMYK: 23, 93, 90, 16
WCAG: AAA
BC600
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 201,74,61
CMYK: 16, 81, 75, 5
WCAG: AAA
BC400
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 240,150,140
CMYK: 1, 51, 38, 0
WCAG: AAA
BC300
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 240,180,170
CMYK: 4, 37, 28, 0
WCAG: AAA
BC200
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 250,210,200
CMYK: 0, 24, 19, 0
WCAG: AAA
BC100
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RGB: 250,240,240
CMYK: 2, 7, 5, 0
WCAG: AAA
Accessibility
Accessibility by design is a priority at GBG. To give you an idea of colour contrast, please see the WCAG ratings associated with each colour in the charts above. This gives you an idea of what colour text to use over our brand colours, but is by no means exhaustive, we recommend reading the WCAG guidelines provided by W3.
If you have any questions regarding accessibility please get in touch.
Colour usage examples
The following guidelines will give you an idea of how the colour palette should be used.
Text over the primary colour or anything lighter in the scale should be INK900. For any background darker than the primary colour, text should be white.
Building trust in a digital world
Tick
Building trust in a digital world
Cross
Building trust in a digital world
Tick
Building trust in a digital world
Cross
Building trust in a digital world
Tick
Building trust in a digital world
Cross
Building trust in a digital world
Tick
Building trust in a digital world
Cross
Building trust in a digital world
Tick
Building trust in a digital world
Cross
Photography
We use photography to make our content relatable and to add context to our products. As part of an illustration, a photo can be used to demonstrate where an end user is involved with a process. This can help to explain a complex process.
Before briefing a photographer, get in touch with the creative team so we can advise what would be best for your project. We may already have a suitable image in stock.
Guidelines
The examples below show examples of how photography should and should not be used.
Photos can be used that depict our end users or customers to give context and support an idea or concept.
Never use stock photography containing off-brand graphic overlays.
Photography isn’t always the best way to illustrate an idea. Never use photography unless it helps to support messaging.
Avoid images that are posed and unnatural.
Avoid images that are posed and unnatural.
Avoid clichés and visual metaphors in photography.
Photography in illustration
At GBG, we use photography to add context to our illustration. Photos of people represent the human interaction with our products and make our illustrations more relatable to our target audience.
When choosing a photo for an illustration, consider who the target audience is for the product or campaign, where they might be and what they might be doing.
The following examples show the type of photo we prefer to use in illustration. A simple portrait with balanced lighting and neutral, plain backgrounds.
This example shows how a product works and shows where people are involved with the process.
This example shows how a target audience can be defined to give context and make an illustration relatable.
People
Photographs of people should have a natural feel, we don't use images that look staged.
For photos of people such as GBG staff, avoid busy, colourful or dark backgrounds. Avoid cluttered or messy backgrounds, make sure the subject clearly stands out from the background but doesn't clash, a soft focus can be used to draw attention to the subject.
For images including devices, please ensure cables are hidden and desks are clean and tidy (perhaps accessorise with a nice plant!).
Colours should feel balanced - not too bright or too dark. Ensure the subject is well lit but balanced without harsh light or shadows. Generally, we like photos of people to have a slightly warm tone.
People should always have breathing room, with negative space around their head. Generally, give people a bit more space than you think you need to allow space for cropping in post-production.
Inclusivity is central to our ethos at GBG, please be sure to include everyone.
Staff photos should feel friendly and natural. Allow plenty of natural light, and use artificial lighting to supplement and add balance to a shot.
Office photos should feel casual, relaxed and natural. Depth of field can be used to focus on a subject.