Malty colours make the visual design more consistent, provide meaning, and add hierarchy to the interface. They also distinguish our brand and help users create a consistent experience across our platform.
Colours Overview
The outer colour wheel shows the palettes that are transversal to any system or any product. And for that reason, those should remain intact.
The support and default palettes are aimed to unify our global experience.
They were created to be brand agnostic, giving us the freedom to use them across the journey in strategic moments, but without creating any visual friction, or distraction.
They can be seen in image backgrounds, product backdrops, and so much more.
Default Palette
Our default palette is composed of 3 different colours. In this pallet, you'll be able to find digital-black, white, and transparent colours.
Our default colours are present throughout our digital products and, provide amazing contrast and great flexibility. They are an off-the-shelf solution for the markets to use, without clashing with their own branding.
The digital-black colour, when working on a light theme, is often present in call-to-action buttons, text elements, and overlays. The same happens, for the same components, when working with the white colour on dark themes.
Support Palette
The support palette was formed with colours that work great, no matter the theme you are working in. They are the perfect support palette and can be used with no restrictions.
These colours are often present in button states, product image backdrops, and content page backgrounds.
System Palette
The system palette is composed of colours that communicate purpose. They help users convey messages. For example, success colours have a positive connotation. We use success-strong or success-light to convey success, confirmation messages, etc.
The system colours are often present in toasts, alerts, error or success texts, and also in error or success iconography.
Information Palette
The information palette is being used to represent different states of informational components.
These colours are often present in customer status or activity, product status or promotions, and in pill components.
Overlay Palette
The overlay palette is based on colours used with transparency. This palette is useful to increase top elements' readability.
These colours are often present in image overlays, modals or popovers backgrounds, and in hover effects.