Download Media Kit

Identity

Imagery

Download Media Kit

Identity

Imagery

e^xponent

X3

Brand Guidelines

Brand Guidelines

Download Media Kit

IDENTITY

Wordmark

To maintain legibility and visual appeal, our wordmark must adapt to different background colors. The following guidelines outline the correct usage of font colors on contrasting backgrounds

To maintain legibility and visual appeal, our wordmark must adapt to different background colors. The following guidelines outline the correct usage of font colors on contrasting backgrounds

Logo

To maintain legibility and visual appeal, our logo font must adapt to different background colors. The following guidelines outline the correct usage of font colors on contrasting backgrounds

Outline

Preview

Outline

Preview

Outline

Preview

Icon

When the logo is placed within an icon or enclosed shape, it should be centered relative to the overall shape, not the exact center of the letter "e." This ensures that the logo appears balanced within the context of the icon, even though it is off-center from a purely geometric standpoint.

Clear Space

The minimum required clear space around the logo is equivalent to the height of the letter "e" in the logo font. This space must be maintained on all sides of the logo to prevent any visual clutter or interference.

Co-Branding

Co-branding with partner logos is usually done with a handshake in between the two logo.

#FFB000

HEX Copied!

Outline

HEX

RAL

PAN

RGB

CMYK

#FFB000

HEX Copied!

Outline

HEX

RAL

PAN

RGB

CMYK

#FFB000

HEX Copied!

Outline

HEX

RAL

PAN

RGB

CMYK

Colour Consistency

Maintaining color consistency across various mediums is crucial for brand recognition, as differences in screen calibration, printing methods, and materials can alter the appearance of colors. A uniform color scheme enhances brand recall, reinforces a professional image, and ensures the brand's message is communicated effectively, irrespective of the medium.

#C485FF

HEX Copied!

Tint

#C485FF

HEX Copied!

Tint

#C485FF

HEX Copied!

Tint

#AE58FF

HEX Copied!

Flux Purple

#AE58FF

HEX Copied!

Flux Purple

#AE58FF

HEX Copied!

Flux Purple

#9728FF

HEX Copied!

Shade

#9728FF

HEX Copied!

Shade

#9728FF

HEX Copied!

Shade

#2F68D2

HEX Copied!

Tint

#2F68D2

HEX Copied!

Tint

#2F68D2

HEX Copied!

Tint

#014ACF

HEX Copied!

Electric Blue

#014ACF

HEX Copied!

Electric Blue

#014ACF

HEX Copied!

Electric Blue

#003AA4

HEX Copied!

Shade

#003AA4

HEX Copied!

Shade

#003AA4

HEX Copied!

Shade

Secondary Colours

Our secondary colours complement the primary colour palette, providing versatility and depth to our brand's visual identity. Use these colours sparingly to highlight key elements and create visual interest without overwhelming the primary brand colors.

#75DCFF

HEX Copied!

Tint

#75DCFF

HEX Copied!

Tint

#75DCFF

HEX Copied!

Tint

#00BFFF

HEX Copied!

Mellow Blue

#00BFFF

HEX Copied!

Mellow Blue

#00BFFF

HEX Copied!

Mellow Blue

#038DBB

HEX Copied!

Shade

#038DBB

HEX Copied!

Shade

#038DBB

HEX Copied!

Shade

#CDFBE7

HEX Copied!

Outline

#CDFBE7

HEX Copied!

Outline

#CDFBE7

HEX Copied!

Outline

#AAF0D1

HEX Copied!

Shaded Surface

#AAF0D1

HEX Copied!

Shaded Surface

#AAF0D1

HEX Copied!

Shaded Surface

#88CCAE

HEX Copied!

Surface

#88CCAE

HEX Copied!

Surface

#88CCAE

HEX Copied!

Surface

Tertiary Colours

Our secondary colours complement the primary colour palette, providing versatility and depth to our brand's visual identity. Use these colours sparingly to highlight key elements and create visual interest without overwhelming the primary brand colors.

#FFFFFF

HEX Copied!

White

#FFFFFF

HEX Copied!

White

#FFFFFF

HEX Copied!

White

#E8E8E8

HEX Copied!

Grey 1

#E8E8E8

HEX Copied!

Grey 1

#E8E8E8

HEX Copied!

Grey 1

#CFCFCF

HEX Copied!

Grey-2

#CFCFCF

HEX Copied!

Grey-2

#CFCFCF

HEX Copied!

Grey-2

#222222

HEX Copied!

Off-Black

#222222

HEX Copied!

Off-Black

#222222

HEX Copied!

Off-Black

Neutral Colours

Our neutral colours add subtle accents and additional layers of complexity to our visual identity. Use these colours minimally to support the primary and secondary palettes, ensuring a cohesive and harmonious overall design.

30%

10%

60%

Physical

Collaterals

Website

& Socials

Vehicles

& Others

30%

10%

60%

Physical

Collaterals

Website

& Socials

Vehicles

& Others

30%

10%

60%

Physical

Collaterals

Website

& Socials

Vehicles

& Others

Colour Proportion

To achieve a balanced and harmonious design, apply our brand colours in a 60-30-10 ratio. Use the primary color for 60% of the design, and balance this out by using 30% and 10% of the supplementary colours, creating a cohesive and visually appealing composition.

X Condensed

This is Exponent’s Display font.
This encompasses Exponent’s personality as a brand, with its sole purpose being to get noticed.

Usage

This is the display typeface used to grab the audience’s attention.

It is used on posters, banners, charging stations and creatives to put forward a point in a few words.

It’s aim is to shout out a message and not to explain or communicate in detail.

Set leading between 90% -110%.
Leading can be reduced for font sizes higher than 80 px as the text size increases.

Preferred alignment is left-alignment

Opacity for headlines should always be 100%

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
-«+»!?.*£€$¥¢+−±×÷=

Bai Jamjuree

This is our typeface for all sections of text that come after the display font. We also use it in our headlines if it is above 10 words.

Usage

Base

Isometric grid 60° is the base used to create illustrations.

Scene & Subject

The foreground and the background sets the scene but should act as an aid to put the focus on the subjects

Style

The illustrations use very simple shapes with solid colours to convey the message

Colour Story

Subjects are the story tellers in the illustration. Colours are used

Physical Assets

Colours translate into the real world with the use of Matte-Textured Plastic Finishes along with Anodized Aluminium and Black Plastic.

Realistic Visuals

90 degree head-on renders with realistic materials and labels are used to deliver impactful messages.
Slight angles can be used if required.

X-Ray Visuals

X-Ray style renders are used for explainers and showcase any of the internal components that are otherwise hidden underneath the vehicle and other surfaces.

Clay Visuals

Clay renders are used to visualise vehicles and other products in a clean manner which goes along with the rest of the website without screaming out too loud.

Ghosted Visuals

Vehicles are shown in a “Ghosted” isometric view to showcase clear archetypes or formats of vehicles.

Isometric Visuals

Isometric Renders work very well to feature realistic proportions, colours, materials and finishes are used to
showcase exponent’s technology and are designed to make them standout when used with Clay or Ghosted renders with a consistent perspective and style.

Solos

Isometric Renders work very well to feature realistic proportions, colours, materials and finishes are used to
showcase exponent’s technology and are designed to make them standout when used with Clay or Ghosted renders with a consistent perspective and style.

Events

Isometric Renders work very well to feature realistic proportions, colours, materials and finishes are used to
showcase exponent’s technology and are designed to make them standout when used with Clay or Ghosted renders with a consistent perspective and style.

Vehicles

Isometric Renders work very well to feature realistic proportions, colours, materials and finishes are used to
showcase exponent’s technology and are designed to make them standout when used with Clay or Ghosted renders with a consistent perspective and style.

Videography

Isometric Renders work very well to feature realistic proportions, colours, materials and finishes are used to
showcase exponent’s technology and are designed to make them standout when used with Clay or Ghosted renders with a consistent perspective and style.

DCO Interviews

Isometric Renders work very well to feature realistic proportions, colours, materials and finishes are used to
showcase exponent’s technology and are designed to make them standout when used with Clay or Ghosted renders with a consistent perspective and style.

Emojis

Emoji are super useful. They convey information. They grab attention. But a little emoji go a long way.


Currently we're using the iOS 17.4 emoji system. Which is also the default used in Figma.

Icons

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

VOICE

Brand Values

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

Narrative

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

Tone

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

Purpose

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

Vision

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

Brand Pillars

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons

Verbal Identity

Materials Design icons are used with a few custom exceptions that follow the material design style only.


You can view the entire font system here:

https://fonts.google.com/icons