Color Style
Read about how to apply colors according to our brand's identity.
Last updated
Read about how to apply colors according to our brand's identity.
Last updated
Novacura symbolizes clean, practical, and minimalistic solutions; we want our choice of colors to carry the same meaning. This requires us to question our actions when applying colors. Are additional colors necessary to make this user friendly? Is there any point in making this button blue? Can we convey the same meaning with fewer colors?
When applying colors to our UI, imagine you're painting a finely-tuned, state-of-the-art factory. Is there any point in flamboyant nonsense? No. We need things to be smooth and efficient. Clear and crisp. In our factory, we need beautiful machinery, delicate in their precision, with spots of brilliance where you least expect it. Look at our color palette as a powerful tool that you can use to convey meaning, establish relationships, and define hierarchies, not merely a way to make things pretty.
Even when picking from color palette, we must never introduce colors at random; colors always require a strong and valid purpose.
There's a widely known design rule knows as "60-30-10", which states that 60% of the space must be occupied by one type of color, 30% should use another color, and so on. These proportions are meant to give balance to the colors used in any given space. This type of thinking can be applied to our UI as well. We recommend that approximately 60% of our UI should be neutrals, 30% should use our primary colors and the remaining 10% should be allocated for supporting colors. (Find our more about how to use these colors in our color palette.)
We want to emphasize approximately in the above paragraph. It's impractical to limit ourselves to these exact proportions, instead, see them as something to strive for.
We rely heavily on our neutral colors, applying other colors with subtlety and care. Neutrals refer to a range of greys, from jet black to pure white. Although 60% may seem like a lot, but it helps our products feel like a "canvas" for our users; a canvas they can fill with innovative ideas. It also allows other colors to pop and be more influential in the UI.
When we limit the use of color, the areas that do receive color gain even more attention. This extra focus means that it becomes even more important that the colors that we actually use are purposefully chosen. Another pitfall when using few colors is loss of information. It's essential to ensure that interactive areas and state changes remain identifiable.
It's important to remind users about the Novacura brand. We do this by putting "splashes" of our primary color in the UI. These splashes of color can be used lavishly in launch screens, onboarding processes, loading screens, progress indicators, state changes, celebratory pop-ups or in other key moments. It can also be used for specific actions and components, such as buttons and checkboxes. It's important to keep a balance between staying visible and not taking too much of the users' attention. We don't want to overpower whatever branding our customers apply to the UI.
Novacura provides a tool that enables companies to create and brand their digital solutions to make them truly their own. This feature puts a whole new level of complexity on our work as UI designers, which deserved its own page and discussion. Therefore, guidelines regarding branding have mostly been exclude from this page. We recommend that branding, i.e. colors defined by customers, should be applied similarly to any other color we use; that is, with subtlety. We should only provide enough freedom to allow users to make their product unique, while still hindering them from wrecking the UI completely.
