Logo
Our colors are designed to clearly communicate actions, status, and direction within the interface. They serve to make things easier to understand. Follow these guidelines to understand how each color should and shouldn’t be used.
Logo Colors
Logo Background
Empty Space
Empty space must be left around the logo and no element will be placed on top of it. The empty area is equal to a square derived from the letter "l".
Contrast
Make sure the logo is always in contrast with the background behind it.
Logo Misused
Do Not: Place the logo on a background that makes it difficult to recognise
Do Not: Place the logo on an image that makes bad contrast
Do Not: Place the logo on a background with color that is not found in the color palette
Do Not: Rearrange the logo layout
Do Not: Use shadows or any effects
Do Not: Use logo color that is not found in the color palette
Do Not: Remove the 'TM from the logo
Layout
Our design is based on 12-column layouts, where the layouts can be divided into several sections to produce different grid compositions
4 Multiply Rule
Colors
Our colors are designed to clearly communicate actions, status, and direction within the interface. They serve to make things easier to understand. Follow these guidelines to understand how each color should and shouldn’t be used.
Logo Colors
Brand Colors
Typography
Our colors are designed to clearly communicate actions, status, and direction within the interface. They serve to make things easier to understand. Follow these guidelines to understand how each color should and shouldn’t be used.
Roboto
Weights & Glyphs
When using the Roboto fonts family, please note that you are only using the glyphs that exist with inside the font and the selected weights only.
Alternative Font Family
When it's not possible to use the Roboto font family you should use the Helvetica instead. The weights allowed to use are Light, Regular, Bold, Black. Helvetica font family is about 0.5 px smaller than Roboto (in all weights) and slightly wider.
Status Color
Status colors are used to classify texts according to their purpose. By maintaining uniform color the users could easily recognise the thing there might be looking for. keep in mind, overuse colors make texts confusing and less unique, therefore the users won't benefit from extra help.
" Let's go this way! "
" We want to gift you "
" You'd like to know that... "
" Something went wrong "
