Prior to designing a communication, take a moment to consider its tone. Is it warm? Corporate? Consumer-focused? Exciting?
Choose a pulse that reflects that tone and then use it to create a theme for the rest of the communication. We suggest using just one or two colours and one gradient at a time unless you create graphs or infographics.
We offer a diverse range of services and solutions so our brand also uses a diverse palette. Change is our only constant. This restless pursuit of new innovations is expressed by our use of colours and gradients.
Related: Themes
These are our six primary colours and its hues. We suggest using just one or two colours and one gradient at a time.
Use: Headlines, Buttons, Badges, Icons, Pagination and Slide Controls. Overlays at 30% opacity.
Yellow 700
Yellow 600
Yellow 500
Yellow 400
Yellow 300
Yellow 200
Yellow 100
Orange 700
Orange 600
Orange 500
Orange 400
Orange 300
Orange 200
Orange 100
Raspberry 700
Raspberry 600
Raspberry 500
Raspberry 400
Raspberry 300
Raspberry 200
Raspberry 100
Violet 700
Violet 600
Violet 500
Violet 400
Violet 300
Violet 200
Violet 100
Green 700
Green 600
Green 500
Green 400
Green 300
Green 200
Green 100
Blue 700
Blue 600
Blue 500
Blue 400
Blue 300
Blue 200
Blue 100
Use: White, Grey 0, 1, 2, 3, 4 and 5 for Text, Icons, Dividers, Borders and Buttons. Grey 6 and 7 for Backgrounds and Disabled Elements. For Overlays use Grey 1 or White at 30% opacity.
Neutral 900
Neutral 800
Neutral 700
Neutral 600
Neutral 500
Neutral 400
Neutral 300
Neutral 200
Neutral 100
Neutral 000
Notice
Positive
Warning
Negative
We recommend you use our icons in a fun and light way without overloading the page with too much detail. Our icons can be used in any of our approved primary colours, including the gradients. When using icons on top of a pulse, they should only be in a solid black or white.
Download icon packOur one line icons are formed from a continuous line and reflect our pursuit of innovations and ideas. Any illustrations should feel fluid and hand drawn, using a continuous line with no sharp angles or harsh edges. They should feel energetic whilst still looking graceful.
In addition, we also use solid icons in places where they could be visually more effective than one line icons. But the feel of these illustrations remains the same.
Our UI icons are designated for use in Small Sizes, Inputs and Buttons only.
Our logos consist of a word mark and a logo mark.
Every logo mark is elegantly balanced. The word mark and shapes that create the pulse must never be altered. The two elements can however be used independently. The logo must never be cropped, stretched, condensed or distorted.
The word mark is our most versatile identity. Never boxed off or placed within a frame, it must only appear in our chosen grey or white. The word mark must never use any other typeface and gradients must never be used on a dark background.
The word mark's lower case communicates openness and friendliness. The rounded typeface and dot on the 'i' expresses a soft, approachable yet still professional tone. Used across all our communications, it reflects our personality and helps us to connect with our audience on a more human level.
The grey word mark is the primary version for all white and light coloured backgrounds. It should not be used over a pulse, a gradient or any background where legibility is impeded.
The white word mark is the primary version for placing over pulses, gradients, images and other darker backgrounds. The white version should not be used on light backgrounds or where legibility is impeded.
A key element are our pulses. These are part of a series of organic shapes that embody our personality. They reflect our fluid approach to change, are consistent with the series and tell a story of growth, innovation and inspiration.
The different gradients and warm vibrant colours visualise how our passion for the work we do is infectious to everyone we meet.
We have reduced the weight of the Foundation word mark to retain the emphasis on the HB Reavis word mark while still retaining the eye-catching quality of the word 'Foundation'.
The pulses’ visual softness demonstrates that we are human and people‐centric. And the combination and curvature of two shapes celebrates the way we collaborate and embrace new innovations.
Related: Logos
We use Brandon Grotesque which enhances our engaging, open‐minded personality. We also use Avenir across Mac and PC platforms where Brandon is not available. Importantly, it must never be used as a secondary typeface. However, if it is not available or inappropriate, use Arial.
Related: Colours Grid system Text sections
Use Brandon Grotesque family typeface for Headings, Titles and Statements. For everything else, use Avenir LT Pro.
Brandon Grotesque
AaBbCcDdEeFfGgHh
IiJjKkLlMmNnOoPpQq
RrSsTtUuVvWwXxYyZz
1234567890!@£#$
%^&*()
Avenir LT Pro
AaBbCcDdEeFfGgHh
IiJjKkLlMmNnOoPpQq
RrSsTtUuVvWwXxYyZz
1234567890!@£#$
%^&*()
Use Grey 0, Grey 1, White or any other primary colours for Headings. Use Grey 1 or Grey 2 for Body Text and Grey 3 and 4 for less important text as Captions, Placeholders or Disabled Elements.
In order to help our brand remain consistent around the globe, we use this simple hierarchy style as a guide.
Brandon Grotesque Regular, 52pt / 60pt
Brandon Grotesque Regular, 38pt / 54pt
Brandon Grotesque Regular, 30pt / 36pt
Brandon Grotesque Regular, 24pt / 28pt
Brandon Grotesque Regular, 20pt / 24pt
Avenir LT Pro Heavy, 16pt / 20pt
Avenir LT Pro Roman, 20pt / 32pt
Avenir LT Pro Heavy, 20pt / 32pt
Avenir LT Pro Roman, 18pt / 28pt
Avenir LT Pro Heavy, 18pt / 28pt
Avenir LT Pro Roman, 16pt / 24pt
Avenir LT Pro Heavy, 16pt / 24pt
Avenir LT Pro Roman, 13pt / 20pt
Avenir LT Pro Heavy, 13pt / 20pt
Brandon Grotesque Regular, 28pt / 30pt