Submitted by tmadmin on Thu, 10/20/2022 - 14:37

Understand Unifi Brand Basics


01 | 03

Primary Colours

The primary colours consist of different shades of orange. This allows for greater flexibility when developing communication materials.

 

The CMYK colour codes have been developed and verified through colour proofing. However, adjustments may be required depending on material use anddye variation. These adjustments are crucial to maintain colour accuracy and consistency.

orange

Pantone 2018C

C 0 M 47 Y 78 K 0

R 255 G 122 B 0

HEX FF7A00

accent
orange

Pantone Orange 021C

C 0 M 65 Y 100 K 0

R 255 G 94 B 0

HEX FF5E00

light
orange

Pantone 2017C

C 0 M 31 Y 46 K 0

R 247 G 185 B 134

HEX F7B986

red

Pantone 2349C

C 0 M 90 Y 93 K 0

R 216 G 46 B 0

HEX D82E00

white

C 0 M 0 Y 0 K 0

R 255 G 255 B 255

HEX FFFFFF

black

C 0 M 0 Y 0 K 100

R 255 G 255 B 255

HEX 000000


02 | 03

Secondary Colours

The palette of secondary colours contrast refreshingly with primary brand colours. Together, they convey a sense of growth, optimism and ambition.

 

The CMYK colour codes have been developed and verified through colour proofing. However, adjustments may be required depending on material use anddye variation. These adjustments are crucial to maintain colour accuracy and consistency.

cobalt
blue

Pantone 2736C

C 100 M 67 Y 0 K 0

R 24 G 0 B 231

HEX 1800E7

LIGHT
blue

Pantone 2716C

C 39 M 21 Y 0 K 0

R 153 G 182 B 255

HEX 99B6FF

navy
blue

Pantone Blue 072C

C 100 M 78 Y 0 K 10

R 24 G 0 B 146

HEX 180092


03 | 03

Proportions

Shown here are the recommended proportions of the primary to secondary colours.

 

Please note that this is merely a guide to help create a uniquely Unifi visual expression. Should there be a need to veer slightly away from the recommendation, it can be done so as long as it keeps to the integrity of the visual identity system of the brand.

Unifi Colour Proportion

01 | 04

Typeface

The Unifi headline typeface is HK Grotesk and body copy typeface is Roboto.

 

Shown on the right are the different weights that can be used when developing communications with the font type.

HK Grotesk Wide Black

ABCDEFGHIJKLM
NOPQRSTUVWXYZ

abcdefghijklm
nopqrstuvwxyz

0123456789

HK Grotesk Wide Bold

ABCDEFGHIJKLM
NOPQRSTUVWXYZ

abcdefghijklm
nopqrstuvwxyz

0123456789

Roboto Bold

ABCDEFGHIJKLM
NOPQRSTUVWXYZ

abcdefghijklm
nopqrstuvwxyz

0123456789

Roboto Light

ABCDEFGHIJKLM
NOPQRSTUVWXYZ

abcdefghijklm
nopqrstuvwxyz

0123456789


02 | 04

Primary Font:
HK Grotesk Wide

Uses:
Headline
Callouts

 

Styles to Use:
Bold & Black

 

Applications:
Digital
Print

HK Grotesk Wide Bold

Aa

ABCDEFGHIJKLMN
OPQRSTUVWXYZ

abcdefghijklmn
opqrstuvwxyz

0123456789

HK Grotesk Wide Black

Aa

ABCDEFGHIJKLMN
OPQRSTUVWXYZ

abcdefghijklmn
opqrstuvwxyz

0123456789


03 | 04

Secondary Font:
Roboto

Uses:
Subheads
Body Copy

 

Styles to Use:
Light & Bold

 

Applications:
Digital
Print

Roboto Light

Aa

ABCDEFGHIJKLMN
OPQRSTUVWXYZ

abcdefghijklmn
opqrstuvwxyz

0123456789

Roboto Bold

Aa

ABCDEFGHIJKLMN
OPQRSTUVWXYZ

abcdefghijklmn
opqrstuvwxyz

0123456789


04 | 04

Sample Setups

 

Headline:

HK Grotesk Wide

 

Sub Headline:

Roboto Bold

 

Body Copy:

Roboto Light

 

Headlines should primarily be in all caps. Similarly, sentence cases can be used for headlines to accommodate different layout specifications.

Primary Usage - All Caps

COULD YOUR NEXT BRAND GUIDELINE BE THIS EPIC?

 

Secondary Usage - Sentence Case

Create your next moment with Unifi

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

Sub Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat.

Body Copy

01 | 04

Introduction

The photography aims to depict real life moments that are authentic, emotive and relevant.

Unifi Photography - Introduction

02 | 04

Next Epic

Landscape Photography

Focus on epic moments through landscape photographs with depth and bigness, exuding a sense of energy that is not staged.

 
Possible themes for photography
  • Connectivity
  • Digital lifestyle
  • Smart nation
  • Innovation
Photos should be
  • Contextual
  • Authentic
  • Inclusive
  • Energetic
  • Hopeful
  • Positive
Photos should not be
  • Cold
  • Exclusive
  • Static
  • Negative
  • Too serious
Unifi Photography - Next Epic

03 | 04

Next Everyday

People Photography

Focus on close-up expressions of individuals being empowered by their everyday lives, exuding a sense of purposefulness and energy that is not staged.

 
Possible themes for photography
  • Connectivity
  • Digital lifestyle
  • Smart nation
  • Innovation
Photos should be
  • Contextual
  • Authentic
  • Inclusive
  • Energetic
  • Hopeful
  • Positive
Photos should not be
  • Cold
  • Exclusive
  • Static
  • Negative
  • Too serious
Unifi Photography - Next Everyday

04 | 04

Don’ts

Shown on the right are incorrect examples of the photography.

Unifi Photography Dont's - Staged

Staged

Staged

Unifi Photography Dont's - Negative

Negative

Negative

Unifi Photography Dont's - Cold

Cold

Cold

Unifi Photography Dont's - Negative

Negative

Negative

Unifi Photography Dont's - Too Serious

Too Serious

Too Serious

Unifi Photography Dont's - Posed

Posed

Posed

01 | 03

Overview

The illustration plays a big role in communicating abstract ideas and emotive everyday moments.

 

There are three approaches for illustrations:

  1. Big Concepts
  2. Daily Moments
  3. Quick Understanding

Big Concepts

Big Concepts IllustrationsBig Concepts IllustrationsStylistic principles
  • Editorial
  • Smart
  • Depth and perspective

Daily Moments

Daily Moments IllustrationsDaily Moments IllustrationsStylistic principles
  • Geometric
  • Friendly and approachable
  • Human

Quick Understanding

Quick Understanding IllustrationsQuick Understanding IllustrationsStylistic principles
  • Infographic
  • Geometric
  • Friendly and approachable

02 | 03

Usage

Shown on the right are ways the illustrations can be used in communication materials.

Illustration Usage
Illustration Usage
Illustration Usage

03 | 03

Do’s & Don’ts

Shown here are examples of do’s and don’ts pertaining to the illustration style.

 
Do’s
  • Simple
  • Clean
  • Emotive
  • Focused
Don’ts
  • Cluttered
  • Stock
  • Generic
  • Abstract

Do’s

Illustrations Do’s
Illustrations Do’s
Illustrations Do’s

Don’ts

Illustrations Don'ts
Illustrations Don'ts
Illustrations Don'ts

01 | 03

Introduction

The icons are built from basic shapes. They are functional elements that can be used digitally and in print.

accent
orange

Pantone Orange 021C

C 0 M 65 Y 100 K 0

R 255 G 94 B 0

HEX FF5E00

WHITE

C 0 M 0 Y 0 K 0

R 255 G 255 B 255

HEX FFFFFF


02 | 03

Filled Icons

Filled icons should be within headers and titles to drive sharp communication messages about topics being presented.

Gift Icon
Gift
Support Service Icon
Support
Service
Chart Icon
Chart
Maintenance Icon
Maintenance
Internet Coverage Icon
Internet
Coverage
Streaming Icon
Streaming
Router Icon
Router
Activity Icon
Activity
Mobile Phone Icon
Mobile Phone
Payment Icon
Payment
Apps Icon
Apps
Zero Upfront Payment Icon
Zero Upfront
Payment
Bill Icon
Bill
Security Icon
Security
Delivery Service Icon
Delivery
Service

03 | 03

Outlined Icons

Outlined icons can be used as visual cues for key talking points within topics being presented.

 

Both filled and outlined icons should never be used together to minimise clutter and to maintain design consistency.

Gift Icon
Gift
Support Service Icon
Support
Service
Chart Icon
Chart
Maintenance Icon
Maintenance
Internet Coverage Icon
Internet
Coverage
Streaming Icon
Streaming
Router Icon
Router
Activity Icon
Activity
Mobile Phone Icon
Mobile Phone
Payment Icon
Payment
Apps Icon
Apps
Zero Upfront Payment Icon
Zero Upfront
Payment
Bill Icon
Bill
Security Icon
Security
Delivery Service Icon
Delivery
Service

01 | 05

Introduction

The circular patterns play a crucial role in distinguishing the Unifi brand from its parent brand, TM. The patterns were primarily designed to complement the rounded elements of the Unifi logo. The addition of these organic patterns also help to portray the brand in a more human and approachable manner.

 

The flexibility and multi-directionality of the patterns can be easily adapted for different formats of communication.

Patterns Introduction

02 | 05

Colour Combinations

To create consistency, a minimum of two (2) and a maximum of three (3) colours are allowed per unit of the pattern. The use of orange is also an important element for the Unifi pattern unit.

Two Colours
 
 
Patterns - Two Colours
Patterns - Two Colours
 
 
Three Colours
 
 
 

03 | 05

Tutorial

Shown below is a quick guide on creating unique patterns for any communication.

Step 1

Create
Grid

Patterns Tutorial - Grid

Create a grid with even square units within. For this example, the dimensions are 1920px by 1080px (full HD).

Step 2

Add Background Colour

Patterns Tutorial - Add Background Colour

Add colour blocks on the grid to ensure that the patterns keep to colour proportions of the Unifi brand.

Step 3

Add Pattern

Patterns Tutorial - Add Pattern

Add patterns into the grid. Please ensure that the patterns fit to the grid to create a seamless semi tessellation.

Step 4

Remove Grid

Patterns Tutorial - Remove Grid

Remove the grid. Now you have a base to add on typography and imagery onto.


04 | 05

Examples

Here are some ways the patterns can be used to create the iconic and ownable Unifi visual expression.

Patterns - Example
 
Patterns - Example

05 | 05

Don’ts

Here are some examples of what should not be done with the patterns. Please avoid improper use of the patterns as shown.

Patterns - Don'ts

Do not change the colours of the patterns other than those specified.

Do not change the colours of the patterns other than those specified.

Patterns - Don'ts

Do not distort the patterns.

Do not distort the patterns.

Patterns - Don'ts

Do not rotate the patterns.

Do not rotate the patterns.

Patterns - Don'ts

Do not not add any effect to the patterns.

Do not not add any effect to the patterns.

Patterns - Don'ts

Do not create complex patterns.

Do not create complex patterns.

Patterns - Don'ts

Do not fill the patterns with graphics or images.

Do not fill the patterns with graphics or images.

01 | 03

Logo Proportions

Print common sizes

For all ‘A’ series documents, use the measurements below:
A0: 841x 1189 mm = 140mm
A1: 594 x 841 mm = 100mm
A2: 420 x 594 mm = 70mm
A3: 297 x 420 mm = 50mm
A4: 210 x 297 mm = 28mm
A5: 148 x 210 mm = 24mm
A6: 105 x 148 mm = 20mm

Logo Proportions
 
Logo Proportions
 

The tagline lockup should always be placed in proportion to the scale of the Unifi brand logo.

Logo Proportions - A4 PortraitLogo Proportions - A4 Portrait
 
Logo Proportions - A4 Landscape

02 | 03

Layouts

Type A: Simple Grid Layout

  1. The Unifi brand logo placement must always be against a clear background.
  2. Graphic patterns can be varied within the specified area.
  3. Image area can be extended downwards based on the available text area.
  4. Headline and text area can be moved up or down within the specified area as shown.
Layouts - Simple Grid Illustration 1
Layouts - Simple Grid Layout 1
Layouts - Simple Grid Illustration 2
Layouts - Simple Grid Layout 2
 

Type B: Dynamic Grid Layout

  1. The Unifi brand logo placement must always be against a clear background.
  2. Main graphic pattern can vary and move around.
  3. Image area can be moved sideways and align to either the left or right of the main graphic pattern.
  4. Headline and text can be placed within main pattern and image.
  5. Background graphic pattern can vary and move around.
Layouts - Simple Grid Illustration 1
Layouts - Simple Grid Layout 1
Layouts - Simple Grid Illustration 2
Layouts - Simple Grid Layout 2

03 | 03

Horizontal Examples

Horizontal Examples

Logo without tagline

 
Horizontal Examples

Logo with tagline

01 | 02

Applications - Print

Here are the look and feel examples of our printed applications.

Lanyard

Lanyard Example

Letterhead

Letterhead Example

Body of the Letter: Arial 11pt

Canvas Bag

Canvas Bag Example

Car Livery

Car Livery

Name Card

Unifi

Name Card Example - Overview

Paper Material: Artist White, 250gsm

 

Unifi Mobile

Unifi Mobile Name Card

Paper Material: Artist White, 250gsm

coming soon Download

02 | 02

Applications - Digital

Apply these visual identity for digital applications.

Website Landing Page

Website Landing Page

MyUnifi App

Website Landing Page

Buttons

Desktop button size

Desktop Button Size

Mobile button size

Mobile Buttons

Card carousel

Mobile Buttons

Radio Button

uncheckedunchecked
Radio Button
checkedchecked
Radio Button
checkedunchecked
Radio Button

Checkbox

uncheckedunchecked
Sample copy
checkedchecked
Sample copy
checkedunchecked
Sample copy

Mobile button size

Mobile Size Button

Error Message

Error Message

Underline CTA

Clear Filter
Button States

Alternative Buttons

Secondary Buttons

Alternative Buttons
 
Alternative Buttons

Primary link buttons

Icons

Icon Minimum Height

Icons colours

HEX: #FF5E00
HEX: #FFFFFF

On light background

Gift
Support Service
Chart
Maintenance
Internet Coverage

On dark background

Gift
Support Service
Chart
Maintenance
Internet Coverage

Unfilled Forms

Unfilled Forms

Filled Forms

Filled Forms

Dropdown

Default

Dropdown Default

Dropdown

Maximum 6 selections

Dropdown with less than 6 options

Maximum 6 selections

Dropdown with more than 6 options

Selected

Dropdown Selected

Fonts

Aa

HK Grotesk Wide Black

Headline 60/50/40

Headline 36

Headline STANDARD 26

Headline SMALL 22

Aa

Roboto Regular

Body Copy Large 18

Body Copy Standard 16

Body Copy Small 14

Body Copy Extra Small 12

Aa

HK Grotesk Wide Bold

BUTTON Copy STANDARD 16

BUTTON Copy SMALL 14

Aa

Roboto Bold

Headline Standard 20

Headline Small 18

Tabs Navigation

Tabs Navigation

Tabs/Filters

Filter Tag Size

Filter Tag Size

Default

Filter Tag Size - Default

Hover

Filter Tag Size - Hover

Selected

Filter Tag Size - Selected
 

Tagging on white background

Tags with icon on the left

Tagging With Icon

Tags with icon on the right

Tagging With Icon

Tagging

Size

Tagging Size

Spacing

Tagging Spacing

Font

Sample Tagging
Roboto Bold 14pt

Default

Sample Tagging

Highlights/Promo

Highlights

Font

Highlights
Highlights
Highlights
Highlights

 
TM performance in 1Q2022 revenue & patami up 2.9% & 4.4%
Sample Tagging
13 MAY 2022
 
Title line 1
Title line 2

 

Body copy line 1

Body copy line 2

Body copy line 3

 

 
TM performance in 1Q2022 revenue & patami up 2.9% & 4.4%
Highlights
Sample Tagging 01
13 MAY 2022
 
Title line 1
Title line 2

 

Body copy line 1

Body copy line 2

Body copy line 3

 

 
Business Cluster
lorem ipsum
10%
lorem ipsum
90%

lorem ipsum
100%

Table style (Desktop)

Information Table

Information Table
 

Table title

Font: Roboto Bold 16pt

Font Colour: #FFFFFF - 70% opacity

Box Colour: #150080

 

Row header

Font: Roboto Bold 20pt

Font Colour: #FFFFFF

Box Colour: #1800E1

 

Main Row header

Font: Roboto Bold 20pt

Hex: #FB5E00

Font Colour: #FFFFFF

Line colour: #FFFFFF

Line weight: 1pt

Table Variety

Table Variety
 

Font: Roboto Bold 16pt

Font Colour: #FFFFFF

Box Colour: #1800E1 - 5% opacity

 

Font: Roboto Bold 20pt

Font Colour: #FFFFFF

Box Colour: #1800E1 - 15% opacity

Accordion (Desktop)

Default

Accordion Desktop - Default

Spacing

Spacing

Picture Ratio

Picture Ratio

Desktop (Pop-Up)

Desktop (Pop-Up)

Powerpoint Template

Cover

Unifi Cover

Table Of Contents - With Image

Unifi TOC With image

Table Of Contents - Without Image

Unifi TOC Without image

Content Slide - Graphs

Unifi Graph
Unifi Graph 2

Content Slide - Graphs + Charts

Unifi Graph + Chart

Content Slide - Timelines

Unifi Timelines

Content Slide - Tables

Unifi Table

Content Slide - Text

Unifi text
Unifi text 2

Digital Name Card

Part of our efforts to implement sustainable practices include creating digital name cards that will help reduce waste across the board, at all levels of our company. These digital name cards will help us all in doing our part to take better care of our planet.

Unifi Digital Name CardView steps

MS Teams

Official Meeting (Unifi)

TM MS Teams Backgrounddownload assets Download
 

Watermark (Unifi)

TM MS Teams Background
 
TM MS Teams Background
 
TM MS Teams Backgrounddownload assets Download
 

Illustration (Unifi)

TM MS Teams Backgrounddownload assets Download
 

Official Meeting (Unifi Mobile)

TM MS Teams Backgrounddownload assets Download
 

Watermark (Unifi Mobile)

TM MS Teams Background
 
TM MS Teams Background
 
TM MS Teams Backgrounddownload assets Download
 

Illustration (Unifi Mobile)

TM MS Teams Backgrounddownload assets Download

Email Signature

Email Signaturedownload assets Download
Brand Centre