Brand essentials
Design attributes
Simple
We keep our visual identity as we do our communications and products, simple, clear and direct.
As a Danish company, aesthetics are fundamental to both our products and the experience that we are trying to provide users. We get straight to the point with a visual experience for the end user that is premium throughout their Monta journey.
Dynamic
We are a brand driven by energy, which shows in all of our actions and aspirations. We aim to be an "agile brand," adapting to change as it comes, but always maintaining our core identity.
Progressive
A progressive brand design means being aligned constantly with the evolving needs and expectations of customers, trends, and cultural change.
Progressiveness demands a brand attuned to the societal impact of our activities whilst driving innovation and leadership inside our product categories.
Monta Logo
A distinctive wordmark with a modern, minimalist design, reflecting our brand's vibrancy and focus on quality.
The Monta logo
Primary and Secondary logo
Our primary logo is coral on light backgrounds, and our secondary logo is white on a coral background. Always choose the primary logo as first preference.
It’s OK to use the white logo on other colours or photographic backgrounds, but coral is always first preference.
Size & Safe Zone
The logo should always be clear and easy to read. Make sure it’s big enough, and not too small, and make sure it is sharp and not fuzzy or low resolution.
The clear space around the word mark is defined by the height and width of the first letter in the logo. This means that you should not place other visual elements within the clear space. Also, make sure there is margin enough in the design to respect the clear space.
The Monta M
The Monta M is our logomark, or a simplified version that stands for our logo. Use it to give a little reminder, or tag that this content/design/interaction is Monta.
The Monta M should be used in contexts where the full Monta logo is present or the audience is clearly in a Monta space, so there is no doubt who is speaking.
For example:
- Use is on the second page of a report or guide
- Use it on social posts (where the sender is Monta)
Always choose the coral logo first, and only in situations where it disrupts a design, use the white version.
Note! The M however should never be used on co-branded occasions.
Logo Do’s
Use coral logo with a light sand background.
Use white logo with a full coral background.
Use white logo with a dark background.
Use the primary logo on a light background.
Always use the primary logo on the front page of a guide or report.
Always use the primary logo when shown out of our usual context.
Logo Dont’s
Don’t change the colour or add gradient to the logo.
Don’t stretch or distrot the logo.
Don’t use coral logo with dark background.
Don’t add any decoration to the logo.
Don’t use the white M on another colour on hero brand touch points.
Avoid low contrast, clashing or busy backgrounds.
Looking for co-branding guidelines?
Look no further, you can find guidance and assets here.
Tagline
A tagline is crucial for creating a memorable and meaningful message that captures the essence of Monta across all touch points.
Use the tagline when introducing Monta, signing off Monta and on all shared materials such as guides, one pagers, presentations etc.
EV
Better
Do’s
Display the tagline aligned either left or right, depending on the context.
Negative layouts use White Monta Logo or Coral 40 to create a clear hierarchy.
Use #evbetter on social media posts.
Dont’s
Do not modify the tagline by stretching or enlarging.
Do not center or change the colour of the tagline.
Don’t capitalise the tagline.
Alternative logo lockups
Contact the Brand team for guidance on creating new lockups.
Partnership, white labels and theming
Get a full overview of how we use our brand together with our Powered by Monta partners, white label and themed solutions.
Internal only
Logo lockups in use
QR-stickers
QR stickers are used on charge points to show that Monta is available to use. The QR allows the user to quickly open the App or App Clip and start charging.
We have a strict template for these stickers which must be followed. There is a Monta version and a co-branded version available to use.
Internal only
Do’s
Preferred: Coral QR sticker with white logo. Monta logo is always on top.
Optional design: Coral logo with a neutral sand background.
Co-branded: Monta logo is always left, followed by partner logo. The two logos should be equal in sized and visually balanced.
Dont’s
Don’t edit the design and position of the logo.
Don’t change the colour of the background.
Don’t change the design template.
RFID cards
RFID cards are another way we help the user get charging as quick as possible. It features our core brand elements and our electric pattern.
Typography
Typography is a powerful tool for a brand, as the right font and design communicates the company's personality and values.
Display font
Our display font is Quicksand. Quicksand is a rounded, geometric font. It was chosen for its friendliness and openness, it helps us feel approachable to our customers.
It was chosen based on several criteria:
Ease of use. Quicksand is a free font available on Google Fonts. It’s easily integrated on the web, in Figma, Google slides etc. So farewell to downloading and installing old font files!
Friendliness. It’s crucial that across all platforms we come across as open, friendly and approachable. Quicksand has rounded, circular, open features, and this all helps our customers feel welcomed.
Body font - Lato
We use Lato as our body font. The semi-rounded details of the letters give Lato a softer touch, which fits well with Quicksand and our logo.
The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.
Do’s
Headings in Quicksand Bold
Use Quicksand Semibold for headings.
Use coral on the full stop for a subtle call back to Monta. Only do this on the first hero heading, and not again after that in the same context.
Balanced proportions
Stack headings so that there aren’t too many words on each line, though no more than three lines.
Ensure there is a good balance of heading size and negative space.
Highlighting words in headings
Use the tints of the same colour to highlight text. Such as a lighter tint of coral on a coral background.
Dont’s
Don’t change the font weight
Do not use any weights other than Quicksand Semibold in headings.
Headings in all caps
Don’t use caps (pretty much ever). We don’t want people to feel like they’re being yelled at.
Headings in Lato
Don’t use Use body text (Lato) for headings or as the only text on a creative.
Night shades on coral
Don’t use different colours on a background. Such as a night shade on a coral background.
Use coral in typography
Don’t use coral in headings or body text.
Tertiary colours in headings
Don’t use other tertiary colours for headings.
Tip! Don’t use our fonts in co-branding materials
Typography in use
Colour
A thoughtfully chosen brand color palette can evoke emotions, convey personality, and improve brand recognition, making it a crucial element in creating a strong and memorable brand identity.
Coral Palette - Primary
Coral 100
#FF5252
RGB 255 82 82
CYMK 0 82 64 0
PANTONE Warm Red U
PANTONE Warm Red C
Coral Gradient
Coral 100 – Coral 150
#FF5252 – E9265E
Coral 150
#E9265E
RGB 233 38 94
CYMK 2 96 47 0
Coral tints
We have three lighter tints of our primary coral colour. Use these as accents, overlays or in graphics. See typography for use in text layouts.
Coral60
#FFA8A0
Coral40
#FFCAC2
Coral20
#FFE2DF
Do’s & don’ts
Use splashes of coral to stand out.
Use a large coral background for large physical products, like this back wall design for an event. In this case we can use the coral to stand out in the crowd.
Use coral background together with our electric pattern as a splash or section of the creative.
Don’t use coral backgrounds on portraits or cutout photography.
Don’t use coral backgrounds in social or marketing materials together with illustrations.
Don’t use coral backgrounds for paragraphs of text such as quotes.
Sand Palette
Sand 20
#F9F7F6
Sand 20
#F9F7F6
Full Sand palette
For copy we generally use Sand 100, the darkest shade. For maxi icons (as background elements) we use Sand 40 and all backgrounds are either Sand 20 or Sand 10.
Sand100
#A99F9F
Sand80
#C4BCBB
Sand60
#DAD4D3
Sand50
#EDEAE9
Sand40
#F4F2F1
Sand20
#F9F7F6
Sand10
#FDFCFC
Do’s & don’ts
Use Sand 40 for maxi icons. For example: in the background of a web header.
Use Sand for headings (always use night shades).
Don’t use darker sand for backgrounds
Do not use any weights other than Quicksand Semibold in headings.
Sand in use
Nightshades
Night 100
#343457
Primary text
Night 90
#4B506B
Secondary text
Night 80
#616986
Tertiary text
Night 60
#9096AF
Disabled text
Full Nightshade palette
Nightshades are used on copy, illustrations and to build up layers of UI in the product. We have a broad spectrum of tints to allow for layering and a clean, premium look and feel.
Night100
#343457
Night90
#4B506B
Night80
#616986
Night60
#9096AF
Night50
#C2C7DB
Night40
#E2E6F0
Night30
#EFF1F7
Night20
#F3F4FA
Night10
#FBFBFF
Night05
#FDFDFF
Do’s & don’ts
Use nightshades for typography
Use Night100 for main heading copy and Night60 for highlighted heading copy.
Use night80 for body copy.
Use palette for illustrations
Nightshades can be used in illustrations, filled or gradients.
Do not use mid night shades for background fill
Limit how much we use night100 as background fill.
Night in use
Extended palette
Extended bright palette
It is vital that Coral, our primary colour, draws the most attention. Many colours compete and clash with coral, and so this palette was developed to avoid this.
Blue-Bright
#5C72FE
Orange-Bright
#F9B200
Pink-Bright
#FE92B9
Green-Bright
#45B17E
Blue-Light
#AAD4F4
Orange-Light
#FADE97
Pink-Light
#FCC0CB
Green-Light
#AEE4A9
Blue-Pastel
#E6F4F7
Orange-Pastel
#FBF7EB
Pink-Pastel
#FAECEE
Green-Pastel
#F1F1E5
Do’s
Use the bright colours to make icons pop
In special situations, a bright colour could be used for a button, but only when it is not primary (there should always be a coral button in sight).
Use palette for illustrations
Choose these to compliment the clothing or hair colour or complexion.
Use colour to help segmentation
Where needed, colour can help connect themes or products across complex ecosystems. Note: A coral button should always be in site, and using pastel colours in buttons shouldn’t replace the standard Primary, Secondary, Tertiary button choice.
Dont’s
Bright colours are not intended to be used behind icons, or as buttons. These do not meet our accessibility standards.
Don’t use bright colours in large area fills
Don’t combine bright colours. Limit the colour palette on a single creative.
Bright colour combinations are too bombastic and don’t give a sense of a premium, refined product.
Blue-Dark
#5E5995
Orange-Dark
#DD7862
Pink-Dark
#734962
Green-Dark
#6D6D5D
Blue-Mid
#918BD3
Orange-Mid
#E0A171
Pink-Mid
#A07E92
Green-Mid
#93A181
Blue-Pastel
#C6C4E0
Orange-Mid
#D9BC9B
Pink-Dust
#DBC0C8
Green-Dust
#D0D0A5
Extended muted palette
This palette has been created to balance out the light and bright tints. The colours are chosen because they are close to nature and follow the earthy, natural pattern.
Do’s
Use as background colour only when there is a real life situation (a hand holding a phone).
Use as backgrounds behind our people. It’s warm, friendly and human.
Use the colours to dress people
Choose colours which complement the overall creative.
Dont’s
Don’t use multiple colours together on a background fill as the primary creative element.
Don’t use as background fills, and don’t use bright copy, it hurts to read! and it doesn’t feel like Monta.
Don’t use the extended palette when the product is featured as a mockup, you should be top funnel hero branding elements.
UI colours / Product colours
Ocean Blue
Ocean represents an active charge state. Beyond this primary use, it also punctuates key information and enhances interactive elements, ensuring clarity and engagement in our design.
$Ocean100
#0027FF
$Ocean80
#405DFF
$Ocean20
#CCD4FF
$Ocean10
#E5E9FF
$Ocean05
#F2F4FF
Validation palette
This palette is used in the product to communicate and inform user actions. Avoid using these in marketing materials.
$success_dark
#107B69
$success_light
#EBF8F6
$alert_dark
#BA1628
$alert_light
#FAECEE
$warning_dark
#CB7A00
$warning_light
#FFF7EB