Brand Guidelines

Winston Francois, December 2022, Version 1.0

LogoColorsTypographyPhotographyUI KitApplications

Social Avatars

The WF signature logo is used individually without the wordmark, creating a bold and iconic symbol to be used across all social platforms.

Download Avatars

Ensure our balanced proportions are always used. This may be the first interaction with our brand for some consumers.

The circular avatar has an optically aligned logo for maximum spatial impact.

The square ios icon/avatar is aligned both vertically and horizontally.

Colors

Our colors are modern, simple and clean. The neutral base palette pairs with bright and confident accent colors to highlight and draw attention.

Download Colors

Primary Colors

Teal 

Used sparingly as a highlight, but not as large floods of flat color.  

HEX #00D2D2
RGB 0, 210, 210
CMYK 65, 0, 25, 0
PMS 3252C

Teal Dark 

Only used for text on a light background to help with legibility.

HEX #00A0A0
RGB 0, 160, 160
CMYK 80, 16, 40, 0
PMS 2221

Slate 

Applied as a dark background colour. Instead of Black text we use Slate to provide a softer tone. 

HEX #282832
RGB 40, 40, 50
CMYK 78, 71, 55, 61
PMS 433c

Slate 90% tint 

Applied sparingly a as a contrast tone next to Slate. The tint is also applied as a hover state in digital applications.

HEX #3E3E46
RGB 62, 62, 70
CMYK 71, 65, 54, 44
PMS 433c

Cream 

Applied as a light color and is used for all text that is reversed out of a dark background. 

HEX #F6F4F0
RGB 246, 244, 240
CMYK 2, 2, 4, 0

Sand 

This darker tone creates warmth when used as a background or contrasting graph color.

HEX #E1D7C8
RGB 225, 215, 200
CMYK 11, 12, 20, 0
PMS 4685c – 75% tint

Secondary Colors

The secondary palette is used to support the primary palette, in cases such as infographics and data presentation. These colors should not replace primary colors or be used in large floods or fills.

Light blue

HEX #00BEF0
RGB 0, 190, 240

Purple

HEX #B491FF
RGB 180, 145, 255

Yellow

HEX #FFF046
RGB 255, 240, 70

Orange

HEX #FFAA50
RGB 255, 170, 80

Variations

Tints of each color in 20% increments can be used to add variation and depth to charts, infographics and backgrounds.

Alert colours

The red and blue below are only for limited use, when direct UI communication is needed.

Red

HEX #ff3c00
RGB 255, 60, 0

Blue

HEX #0046ff
RGB 0, 70, 255

Typography

Our brand typeface is DM Sans — a low contrast geometric sans serif carefully crafted & designed for computer screens. It is clear, strong and direct. This is paired with Space Mono for small details, footnotes and annotations.

Download DM Sans
Download Space Mono

Type Styleguide

The following typographic styles should be applied across all branded communications.

Photography

Our photography library is divided into three main categories that represent the diverse strengths of our business. 

Download Photography

1. Growth

Positive and bright images representing growth in nature, in a range of environments.

2. Progress

Representing the ongoing journey of progress.

3. Navigation

Winding roads, sweeping vistas and horizon lines speak to a journey we help to navigate.

UI Kit

Download UI Kit

Typestyles

Primary Colors

Secondary Colors

Alert Colors

Button Styles

Interactivity

Icons

Download all brand assets

Download assets

We take a custom approach to your growth goals by assembling and leading the best-in-class marketing team to support your next stage.