As a brand, Ruvixx had little visual consistency beyond their orange logo and sans serif fonts. My first day as their designer was spent poking around their platform and website to familiarize myself with their current interface elements.
The website featured a more modern feel with its use of bright colors and abstract geometric pattern, while the platform looked dated with its use of gray gradients. While both had issues with legibility, the style inconsistency is what I wanted to focus on first.
Find complimentary colors to use with their brand color (orange)
Find subtle ways to add the brand color into the interface and website
Create a style guide that users find delightful, while maintaining an enterprise presence
The main brand color for Ruvixx is orange, so I began putting together color compositions that would act as a good base color. I settled on dark colors to use for the background for the main navigation, side navigation, and some content area. For text heavy pages, I reserved a light gray or white background for legibility. I also created a polygonal vector pattern to overlay the dark backgrounds, as a nod to their original styling of their website. I found it helpful create some rules of usage for their orange brand color to help focus my efforts.
Rule #1: Orange will be reserved for hover or selection states for links or buttons, special interface notes, and labels.
Rule #2: Orange can be used as a secondary color for icons and imagery.
Rule #3: Orange will never be used for status notifications within the platform.
Rule #4: Orange will never take up more than 5% of the overall interface (with exception to dashboards).
One could imagine how dry B2B language can be, so translating certain ideas and business concepts into a descriptive picture can be a challenge. To match the "ghost" buttons I defined earlier, I decided on creating my icons and pictures in a similar line-style in order to product an elegant and lightweight visual aesthetic for the interface.
For the global buttons that would be used across all of Ruvixx, I had to establish a style that could work for both light and dark backgrounds because I designed certain widgets to be dark and some to be light. Using the same colors from the icons, I used a combination of purple and orange to create a cohesive look for all the interface elements in Ruvixx.
LIGHT VS DARK
In keeping with modular design principles, I created a light and dark style that could be applied to all widgets. Since we weren't sure what future features may call for which style (dark widgets on light background or light widgets on dark backgrounds), I wanted to provide the engineering and product team with the ability to pick and choose which widgets would need which styling depending on the page background.
The challenge here was picking colors that could work on both the navy background and the light gray background. I found myself limited to brighter colors, which could be overwhelming for graphs with a lot of plots.