LogoPrimary

logo-primary@2x

LogoGlyph

glyph-primary@2x

LogoColor

logo-orange@2x
logo-blue@2x
logo-white@2x
logo-yellow@2x
logo-green@2x
logo-violet@2x

LogoMonochrome

The monchromatic logo should only be used when not enough colours are available to reproduce the primary logo.

logo-monochrome-white@2x
logo-monochrome-black@2x

LogoGlyph Construction

logo-construction@2x

LogoClearspace

logo-clearsppace@2x

LogoSizing

The logo is designed to scale to all sizes on print and screen.


Smallest size:
48 pixels tall
0.4 inch tall

logo-sizing@2x

LogoGlyph Usage

icon-usage-grid@2x
icon-usage-square@2x
icon-usage-circle@2x

ColorPrimary Palette

The TaskHuman visual identity revolves around Joyous Orange and should be used in whatever you create. To make this color synonymous with TaskHuman, we’ll leverage an entire family of oranges.

Joyous Orange@2x
Frame 36@2x

ColorNeutral Palette

A vital part of any brand is the utilisation of neutral colors. Whites and grays provide clarity and definition and should be used across all designs. Whether that’s for text, functional applications or simply to provide space.

neutral-palette

ColorSecondary Palette

To provide strong contrast against the Primary and Neutral palettes is the Grounded Blue family. This Secondary palette is much more pleasing alternative to blacks and dark greys when it comes to text or large fills and backgrounds.

grounded-blue@2x
Frame 36@2x

ColorTertiary Palette

To compliment Joyous Orange is a range of Tertiary colors to give vibrance and variety to the brand. These additional colors can be used in array of ways such as illustration, but should be used sparingly as to not compete with the primary brand colour. Ideally its usage is limited to partnering only with the Neutral palette.

Group 28@2x
Group 29@2x
Group 30@2x

ColorExpanded Palette

expanded-palette

ColorUsage

The ratio of color throughout the application of the brand is important to maintain. White will be the main color due to its preference as a background colour, this will be followed by the Primary palette and then the Secondary palette.

The application of Tertiary colours are to be used as previously stated. After this, it will be a combination of Neutrals to help with text, messaging as well as background contrasting.

The diagram is a simplified representation of how much each key color should be used.

Group 28@2x

TypographyBasics

Typography for the new identity will lean on two fonts; Roslindale and Graphik.

type-basics-roslindale@2x
type-basics-graphik@2x

TypographyHeadings

type-headings

TypographyBody

type-body@2x

TypographyFail-safe

As much as our aim is to utilise Roslindale and Graphik as much as possible, there will always be instances where certain softwares/technologies are closed or have limitations. This therefore, makes it imperative to have fail-safe fonts in place.

roslindale@2x
meno-display@2x
playfair@2x
times@2x
graphik@2x
inter@2x
arial-helvetica@2x

TypographyPairings

To ensure cohesion and clarity across all brand messaging, it is important to organise typography into a hierarchical system. This can either be achieved by using a combination of the two brand fonts or through the implementation of various font weights. When using weights, it is vital not to exceed more than a total of 3 font weights.

Example of suitable pairings:
Bold / Regular
Semi Bold / Regular
Medium / Light

Note:
Remember to adhere to font selection rules when dealing with pieces of text with various levels of importance i.e. Heading, Sub-heading, Body

type-pairings

PhotographyDirection

TaskHuman photography should always be authentic and personable. The goal of each image is to help make TaskHuman relatable to our customers. Whether it’s a friendly face or an aspirational moment, each photo should connect with our audience – young and old, local and global.

photography-col-1@2x
photography-col-2@2x

IllustrationGuidelines

Illustration helps breathe life into our brand. It can take a complex idea and make it easier to understand. It is a tool that allows us to complement and communicate our product in a way that feels human and fun. TaskHuman illustrations should always be simple and minimalist in nature while being scalable and culturally sensitive due to our global clientele.

  • Minimal details (no highlights, unnecessary details, no facial details i.e. eyes, freckles etc)
  • Straightforward 
  • Diverse (body types, hair treatments, ethnicities) when applicable

Illustrations are used to bring our interface to life. They’re used to educate the user and help draw attention to specific features across our platform. Illustrations are purposeful, thought-out, and straightforward in nature.

IllustrationStyle

Our hero illustration style is bold, elegant, and professional. It is a visual representation of our Brand Personality. Hero illustrations help communicate essential TaskHuman messages and are often paired with a product or category launch or campaign. We use these illustrations consistently and repeatedly to help reinforce the meaning of the illustration in the mind of our customers.

IllustrationColor

Our color palette was chosen carefully with the business in mind. It’s a blend of both corporate and consumer to highlight our B2B2C nature and was chosen to complement our wide range of clients. Our aim is for our illustrations to delight the end-users without dismissing our corporate nature.

We primarily feature TaskHuman White, Joyous Orange, and Navy in illustrations unless the audience is already very familiar with TaskHuman. The extended orange and blue color palettes are used to add depth and variety to an illustration. Use our Secondary Palette for a Veteran Audience keeping in mind the color usage guidelines.

IllustrationUse of Characters

We refrain from using characters/people where possible. The use of a character opens up questions regarding race and gender, and due to our wide range of clients and global offerings, it’s best to simplify as much as possible.

IllustrationShapes

Shapes are made of solid colors. We do not outline them. Depth is created by differing color tones.

IllustrationStroke Caps

We use a rounded cap at all times to work alongside our rounded corner approach.

Group 40

IllustrationActivity

We want to show people in action. Their actions can metaphorically represent communication, building, engagement, etc. Generally, we do not illustrate characters using their phones unless it is a scene illustration.

IllustrationTypes

Our Spot Illustrations

A spot illustration is used to help showcase a small feature or explain an experience. Typically these are to communicate the topics offered in our app. They’re straightforward, not too busy but are there to help enhance the flow by bringing the interface to life and delighting the user.


Our Empty State Illustrations

An empty state illustration is used to explain a feature but should never be the primary focus of the component. It is used to main as a way to address the need to fill an empty area but it also gives us a way to energize a possible lifeless area. 


Our Scene Illustrations

A scene illustration works on a larger space and allows the user to explain a feature or a scenario with a more detailed driven approach. In these instances, scene illustrations are more emotive and abstract in nature.

VoiceTouchpoints

Col 1@2x
Col 2@2x

VoiceTouchpoints

Col 1@2x
Col 2@2x

VoiceTouchpoints

Col 1@2x
Col 2@2x

VoiceActive vs Passive

Frame 58@2x
Frame 57@2x

VoicePositivity

Frame 58@2x
Frame 57@2x

VoiceClear & Direct

Frame 58@2x
Frame 59@2x

VoiceGrammar & Values

Frame 59@2x
Human Overlay Module@2x

EmailCall to Actions

Frame 58@2x
Frame 59@2x

EmailCall to Actions

Frame 58@2x
Frame 59@2x

EmailCall to Actions

Frame 59@2x
image 69@2x
image 70@2x

EmailCall to Actions

Frame 58@2x
image 66@2x

EmailPadding

Frame 59@2x
Group 361@2x

EmailSpacing

Frame 59@2x
Group 362@2x

EmailColor

Frame 58@2x
Colors@2x

EmailTypography

Frame 58@2x
Frame 619@2x

EmailTypography

Frame 58@2x

EmailHero Image Usage

Frame 59@2x
graphik@2x
graphik@2x
graphik@2x
graphik@2x-1

EmailVisual Elements

Text@2x
Group 350@2x
Group 351@2x
Group 355@2x

EmailCell Phone Usage

Text@2x
2022_Mockup_4 Screen@2x
2022_Mockup_2 Screen_Leadership In-App Content@2x
2022_Mockup_Tilted 1 Screen@2x

EmailIllustrator Setup

Frame 58@2x
Frame 57@2x

EmailIllustrator Export

Frame 58@2x
Frame 57@2x

ExamplesOverview

Col 1@2x

ExamplesOverview

Col 2@2x

ExamplesOverview

Col 3@2x

ExamplesOverview

Col 4@2x

ExamplesOverview

Col 5@2x

ExamplesOverview

Frame 58@2x
Frame 566@2x

ExamplesOverview

Col 6@2x

Examples

col@2x
Col 10@2x

Examples

Col 13@2x
Col 14@2x

Examples

Col 17@2x
Col 18@2x

Examples

Col 21@2x
Col 22@2x

Examples

Col 25@2x
Col 26@2x

Examples

Col 29@2x
Col 30@2x

Examples

Col 33@2x
Col 34@2x

Examples

Col 37@2x
Col 38@2x

Examples

Col 41@2x
Col 42@2x

Examples

Col 45@2x
Col 46@2x