Home
appsIntroduction
expand_more favoriteFoundations
expand_more paletteDesign
expand_more grid_guidesCase study
download_for_offlineResources
Logo
Our logo
This is our primary logo. Note the horizontal lockup.
When the primary logo doesn't fit your composition, use the vertical lockup.
Icon
Instead of resizing the logo to a tiny illegible size in smaller designs, use the stand-alone icon.
Original icon with gradient fill.
White icon on gradient fill.
Clearspace
To ensure its integrity and visibility, the logo should be kept clear of competing text, images, and graphics. Always make sure to keep a safe area around it at all sides that is equal to the size of the icon when using the full logo. When using the stand-alone icon, make sure the icon is 65% of the container size.
Colour variations
When placing a logo on a background, aim for ample contrast to ensure readability.
Light backgrounds
Background colour: Surface
Background colour: Background
Background colour: Surface variant
Light gradient background
Dark background
Background colour: Dark background
Primary backgrounds
Use as a last option when light or dark backgrounds are not possible.
Background colour: Primary
Background colour: Secondary
Background colour: Tertiary
Dynamic gradient backgrounds
When using the logo with the gradient icon, make sure to place the icon on a dark part of the gradient.
Use the full white logo on gradients with bright colours.
Logo misuse
Always use the original and approved artwork; never alter any aspect of it.
error
Don't condense or expand
error
Don't stylize or add effects
error
Don't warp or tilt
error
Don't use any other colours or gradients
error
Don't flip the logo or any element
error
Don't change the font or font style
error
Don't change the placement of the icon
error
Don't change the size of the icon
error
Don't enlarge small logos which may lead to distortion.
Logo background colour misuse
Always make sure there's enough contrast between the logo and the background.
error
Don't use the gradient icon on our primary, secondary or tertiary backgrounds.
error
Don't use the gradient icon on top of another bright gradient that blends with the icon.
error
Don't use the logo on busy backgrounds.