Social Look & Feel

Digital Toolkit Version 0.1

This page is intended as an internal resource to aid in the creation of consistent, high quality digital assets for Genesis’ Digital Channels.

If you have any questions about anything on this page, please feel free to contact Ellie by Email at ellie.lyness@wearegenesis.co.uk

Colour


Palette

Click the swatches below to copy applicable HEX codes to use in your compositions. Alternatively, this palette is available as a .ASE swatch or as swatches in the GENESIS Adobe CC Library.

Burgundy

RGB (8bpc) – 36, 0, 15

HEX – #24030f

Magenta

RGB (8bpc) – 255, 0, 209

HEX – #ff004c

White

RGB (8bpc) – 255,255,255

HEX – #ffffff

Pastel

RGB (8bpc) – 220,237,236

HEX – #dcedec

Cyan

RGB (8bpc) – 0, 189, 209

HEX – #00bdd1


Contrast

WCAG AA Compliance

The below pairings have been selected for their complimentary look and compliance with the WCAG AA Accessibility Standard.

A Greencircle indicates that a colour combination adheres to the AAA standard, while an Orangecircle indicates adherence to the AA standard.

Burgundy

Aa

19.41:1
Magenta

Aa

3.92:1
Cyan

Aa

2.28:1
Burgundy

Aa

19.41:1
Magenta (Multiply)

Aa

8.60:1
White

Aa

2.28:1
Burgundy

Aa

4.95:1
Cyan (Multiply)

Aa

8.60:1
White

Aa

3.92:1
White

Aa

19.18:1
Pastel

Aa

15.86:1
Magenta

Aa

3.36:1

Typography

Our brand typography is guided by three core principles; Clarity, Flexibility, and Accessibility.

With this in mind we speak with 3 core typefaces, Roboto for Clarity, Roboto Flex for Flexibility and, when necessary, Calibri as a compatability fallback.

Until now we have a used a mixture of Roboto and Calibri, at the discretion of the medium and the designer. Going forward, it will be important to establish Roboto as our primary typeface for the sake of clarity as our primary typographic consideration.

Where necessary, if we need to share an editable document with a client, we can make use of Calibri as a compatability fallback due to it’s similarity to Roboto. This however should be viewed as a last resort, not a default.


Primary

Roboto

Our primary typographic styles across both digital and social employ a number of hieracrchical levels defined by a combination of the 8pt Grid and a 1.500x (Perfect Fifths) step factor, assuming 72ppi as a default resolution.

This allows us to create clear levels of hierarchy withing our copy which feed naturally down into the next style, while employing consistent 16pt steps in leading to ensure consistent spacing of elements

In order to compensate for retina displays and physical device sizes, we have also developed a set of social styles based on our standard paragraph styles, which effectively double all of our sizing and leading values. For example, a paragraph in our standard stylesheet will be 16px with 32px leading, on social the equivalent copy would be 32px at 64px leading.

H1 Header 5rem (80px), Bold

H1 Subheader 3rem (48px), Light

H2 Header 3rem (48px), Bold

H2 Subheader 2.5rem (40px), Light

H3 Header 2.5rem (40px), Bold

H3 Subheader 2rem (32px), Light

H4 Header 2rem (32px), Bold

H4 Subheader 1.5rem (24px), Light

H5 Header 1.5rem (24px), Bold
H5 Subheader 1rem (16px), Regular
H6 Header 1rem (16px), Bold
H6 Subheader 1rem (16px), Light

Display

Roboto Flex

In order to maintain consistency with our core typeface while also allowing designers a degree of flexibility, we have selected Roboto Flex as our Display Typeface.

Going forward this will allow us either to establish typographic treatments for specific content pillars, or to be able to create stand-out pieces which need to look a bit different.

Examples

While we work on rolling out our tone of voice, personas and content pillars we have created a few distinct looks for our use on our socials.

Going forward these, looks will likely be linked more clearly to established content pillars. But for now, we have adopted distinct looks for Work, Careers, Award Wins and Insights.

In addition to this, there is also a more loose generic photographic style to use where applicable/desireable.


Careers

Illustrative

Use of our established cyan-to-magenta treatment, pulling out copy using a multiplied brand magenta in both illustration and type. For secondary decorative elements such as the clouds and lines, use white

Photographic

Simple, evocative imagery which either speaks to the role or it’s requirements.


Insights

Illustrative

Pulling copy and imagery in magenta & pastel out from the revised brand burgundy. The connective brand lines here can be overlaid and given a colour dodge blend to simulate the brand magenta.

Photographic

High quality imagery of speakers and venues, avoiding eye contact from the subject to give the photography a candid, investigative feel.


Award Wins

Illustrative

Using a base colour of the Magenta, pull copy, stats and imagery out using pastel, white and the brand cyan with a multiply blend mode applied.

Photographic

Frame winning imagery and work and allow it to speak for itself. Avoid using images of the awards themselves unless there is a specific idea around it’s use. Do not use cheesy photographs of individuals looking at the camera and holding trophies.


Work

Illustrative

Using a pastel background to avoid detracting from the work, find ways to integrate illustrative work and mockups expressively.

Photographic

Hero the work in it’s context, make use of high-quality mockups to showcase the work in situ and allow viewers to understand the visuals at a glance.