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

Understand TM Brand Basics


01 | 04

Primary Colours

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

COBALT
BLUE

Pantone 2736C

C 100 M 67 Y 0 K 0

R 24 G 0 B 231

HEX 1800E7

NAVY
BLUE

Pantone Blue 072C

C 100 M 78 Y 0 K 10

R 24 G 0 B 146

HEX 180092

LIGHT
BLUE

Pantone 2716C

C 39 M 21 Y 0 K 0

R 153 G 182 B 255

HEX 99B6FF

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 0 G 0 B 0

HEX 000000


02 | 04

Secondary Colours

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

ORANGE

Pantone 2018C

C 0 M 47 Y 78 K 0

R 255 G 122 B 0

HEX FF7A00

LIGHT
ORANGE

Pantone 2017C

C 0 M 31 Y 46 K 0

R 247 G 185 B 134

HEX F7B986

ACCENT
ORANGE

Pantone Orange 021C

C 0 M 65 Y 100 K 0

R 255 G 94 B 0

HEX FF5E00

RED

Pantone 2349C

C 0 M 90 Y 93 K 0

R 216 G 46 B 0

HEX D82E00


03 | 04

Special Edition Colours

To mark special occasions, the TM brand logo can be used exclusively in Gold and Silver, with custom printing finishings such as hot stamping, embossing, debossing, lamination, spot UV and the like to achieve the precise tones of the approved Gold and Silver.

gold

Pantone 875C

silver

Pantone 877C


04 | 04

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 TM 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.

01 | 04

Typeface

The headline typeface is HK Grotesk and the 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 TM

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 | 05

Introduction

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


02 | 05

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
  • Everyday
  • Personal
  • Authentic
  • Hopeful
  • Positive
Photos should not be
  • Staged
  • Cold
  • Posed
  • Negative
  • Too serious

03 | 05

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

04 | 05

Don’ts

Shown on the right are incorrect examples of the photography.

Staged

Staged

Negative

Negative

Cold

Cold

Negative

Negative

Too Serious

Too Serious

Posed

Posed


05 | 05

Photography Styling

Male

Semi Formal Attire References

Pose References

Smart Casual Attire References

Pose References

Hairstyles References

Semi Formal Shoes References

 

Smart Casual Shoes References

 

Female

Semi Formal Attire References

Pose References

Smart Casual Attire References

Pose References

Semi Formal Shoes References

Smart Casual Shoes References

Free Hair and Scarf References

Hijab References

 

Background

Studio Background References

Non-Studio Background References

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

Stylistic principles
  • Editorial
  • Smart
  • Depth and perspective

Daily Moments

Stylistic principles
  • Geometric
  • Friendly and approachable
  • Human

Quick Understanding

Stylistic principles
  • Infographic
  • Geometric
  • Friendly and approachable

02 | 03

Usage

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


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 Scenarios
  • Focused
Don’ts
  • Clutter
  • Stock Vector
  • Generic
  • Abstract

Do’s

Don’ts

01 | 03

Introduction

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

COBALT
BLUE

Pantone 2736C

C 89 M 81 Y 0 K 0

R 24 G 0 B 231

HEX 1800E7

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 patterns play a role in the TM visual identity system. The movement and progression of the bold chevrons exemplify the “Your Next is Now” tagline.

 

These patterns have flexibility and can be easily adapted for different formats of communication.


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 blue is also an important element for the TM pattern unit.

Two Colours
 
 
 
 
 
 
 
 
Three Colours
 
 
 
 
 

03 | 05

Tutorial

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

Step 1

Create
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

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

Step 3

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

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 TM visual expression.

 

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.

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

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

Do not distort the patterns.

Do not distort the patterns.

Do not rotate the patterns.

Do not rotate the patterns.

Do not not add any effect to the patterns.

Do not not add any effect to the patterns.

Do not create complex patterns.

Do not create complex patterns.

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

 
 

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

Logo Proportions - A4 PortraitLogo Proportions - A4 Portrait
 

02 | 03

Layouts

Type A: Simple Grid Layout

  1. The TM 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.
 

Type B: Dynamic Grid Layout

  1. The TM 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.

03 | 03

Horizontal Examples

Logo without tagline

 

Logo with tagline

01 | 02

Applications - Print

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

Passcard

Passcard

Lanyard

Lanyard

Pass Card - Guide

How we present ourselves should always be in a manner that best reflects our new identity as a human-centred technology company.

 

Photographs used for pass cards should be clear and exude warmth, whilst maintaining a sense of professionalism.

 

For suitable backgrounds, please refer to the photography styling guide .


Pass Card - GuidePass Card - Guide

Letterhead and Envelope

Blank Placeholder

Body of the Letter: Arial 11pt

Foldable Bag

Blank Placeholder

Tote Bag

Blank Placeholder

Car Livery

Blank Placeholder
Blank Placeholder
Blank Placeholder

Name Card

Blank Placeholder

Paper Material: Artist White, 250gsm


02 | 02

Applications - Digital

Apply these visual identity for digital applications.

Website Landing Page

Blank Placeholder

LinkedIn Page

Blank Placeholder

Buttons

The font used for all buttons is HK Grotesk Wide Bold.

Desktop button size

Blank Placeholder

Mobile button size

Mobile Buttons

Card carousel

Mobile Buttons

Radio Button

Radio Button
Radio Button
Radio Button

Checkbox

Sample copy
Sample copy
Sample copy

Mobile button size

Blank Placeholder

Error Message

Blank Placeholder

Underline CTA

Clear Filter
Button States

Alternative Buttons

Secondary Buttons

Alternative Buttons
 
Alternative Buttons

Primary link buttons

Icons

Icons colours

HEX: #FB5E00
HEX: #2E2E2E
HEX: #FFFFFF

On light background

On dark background

Unfilled Forms

Alternative Buttons

Filled Forms

Alternative Buttons

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

Hover

Filter Tag Size

Selected

Filter Tag Size
 

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

Box Colour: #FB5E00

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

Cover

Content - Executive Summary

Executive Summary

Agenda - Version 1

Agenda

Agenda - Version 2

Agenda

Separator - Version 1

Seperator

Separator - Version 2

Seperator 2

Full Text Slide - Version 1

Full Text Slide

Full Text Slide - Version 2

Full Text Slide 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.

TM Digital Name CardView steps

MS Teams

Official Meeting

TM MS Teams Backgrounddownload assets Download
 

Watermark

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

Illustration

TM MS Teams Backgrounddownload assets Download

Email Signature

Email Signaturedownload assets Download
Brand Centre