New Color Palette for Kosmo

Primary colors of the new palette

As a target for color palette redesign, I have chosen Kosmo, an online project management and invoicing tool for freelancers. I construct the alternative palette around the primary Cadet Blue color, which is a type of muted cyan hue. Historically, Cadet Blue is associated with discipline and honor - values that are of the first priority for an app dealing with financial and legal data. In addition, the selected primary color also symbolizes clarity of thinking, calmness and stability, which are always good to have for any freelancer, especially when doing the paperwork. Within the redesigned UI, Cadet Blue and its variants are used for core design elements such as logos, icons, CTAs, links, and hover effects.

Secondary, tertiary and neutral colors

For the secondary and tertiary colors, I use the Persian Orange, which is a medium shade of orange, and the dark pink Blush colors, respectively. Creative and energetic Persian Orange is applied to highlight gross and pending data, while calming and uplifting Blush - to indicate the overdue information. The secondary and tertiary colors are used sparingly throughout the recolored UI not to overpower the primary tone. And, finally, a rich selection of greys is used as neutrals since they add some sophistication without affecting the main colors. Neutrals are applied to body text, titles, backgrounds and borders.

UI example before (top) and after redesign

Further in the full presentation...

The resulting palette is balanced and comforting yet assertive, being at the same time original for a productivity tool where bolder and brighter colors are more common. In the full Figma presentation, opening via a button above, you will find a more detailed rationale behind the color choices, the suggested system colors, contrast checks for compliance with WCAG requirements, and two more UI examples showing different screens of the Kosmo app before and after the redesign. Have fun!