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

Understand TM One Brand Basics


01 | 03

Primary Colours

The primary colours consist of different shades of blue. 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 and dye variation. These adjustments are crucial to maintain colour accuracy and consistency.

ULTRAMARINE

Pantone 2727C

C 70 M 34 Y 0 K 0

R 35 G 98 B 221

HEX 2362DD

Light
BLUE

Pantone 2716C

C 39 M 21 Y 0 K 0

R 153 G 182 B 255

HEX 99B6FF

cobalt
BLUE

Pantone 2736C

C 100 M 67 Y 0 K 0

R 24 G 0 B 231

HEX 1800E7

grey

Pantone Cool Gray 3C

C 15 M 10 Y 11 K 4

R 230 G 230 B 230

HEX E6E6E6

navy
blue

Pantone Blue 072C

C 100 M 78 Y 0 K 0

R 24 G 0 B 146

HEX 180092

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 | 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 and dye 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

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

TM One Colour Proportion

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 One

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.

TM One Photography - Introduction

02 | 04

Next Epic

Landscape Photography

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

 
Possible themes for photography
  • Connectivity
  • Digital lifestyle
  • Innovation
Photos should be
  • Contextual
  • Authentic
  • Inclusive
  • Energetic
  • Hopeful
  • Positive
Photos should not be
  • Cold
  • Exclusive
  • Static
  • Negative
  • Too serious
TM One 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
  • Everyday
  • Personal
  • Authentic
  • Hopeful
  • Positive
Photos should not be
  • Staged
  • Cold
  • Posed
  • Negative
  • Too serious
TM One Photography - Next Everyday

04 | 04

Don’ts

Shown on the right are incorrect examples of the photography.

TM One Photography Dont's - Staged

Staged

Staged

TM One Photography Dont's - Negative

Negative

Negative

TM One Photography Dont's - Cold

Cold

Cold

TM One Photography Dont's - Negative

Negative

Negative

TM One Photography Dont's - Too Serious

Too Serious

Too Serious

TM One Photography Dont's - Posed

Posed

Posed

01 | 03

Overview

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
  • Flat
  • Smart
  • Emotive
Don’ts
  • Cluttered
  • Stock
  • Generic

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.

ULTRAMARINE

Pantone 2727C

C 70 M 34 Y 0 K 0

R 35 G 98 B 221

HEX 2362DD

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

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

Two Colours
 
 
Patterns - Two Colours
 
 
Patterns - Two Colours
 
 
Patterns - Two Colours
 
 
Patterns - Two Colours
Three Colours
 
 
 
Patterns - Three Colours
 
 
 
Patterns - 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 TM One 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 TM One 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 TM One brand logo.

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

02 | 03

Layouts

Type A: Simple Grid Layout

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

Letterhead

Letterhead Example

Body of the Letter: Arial 11pt

Name Card

Name Card Example - Overview

Paper Material: Artist White, 250gsm


02 | 02

Applications - Digital

Apply these visual identity for digital applications.

Digital Ads

Digital Ads

Website Landing Page

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: #2362DD
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

Box Colour: #2262DB

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

TM One Cover

Table Of Contents - With Image

TM ONE TOC With Image

Table Of Contents - Without Image

TM ONE TOC Without Image

Content Slide - Graphs

TM ONE Graph
TM ONE Graph 2

Content Slide - Graphs + Charts

TM ONE Graph Chart

Content Slide - Timelines

TM ONE Timeline

Content Slide - Tables

TM ONE Table

Content Slide - Text

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

TM One Digital Name CardView steps

MS Teams

Official Meeting

TM MS Teams Backgrounddownload assetsDownload
 

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