Design System Sprint 2: One Color Palette to Rule them All

Colors Matter

The result of our Interface Inventory sprint — list of 116 color variables

Unforeseen Color Challenges

UXPin in light mode
UXPin in dark mode

Color Research

Statistics of color usage across UXPin UI

Primary Colors

Accents Built with Functions

darken(#006CFF, 10%) // Returns #0056cc
Our internal color calculator — Electron App simulating Sass and Less functions

Defining accents without breaking things

Spreadsheet listing all the new and old color variables

Naming Conventions

Popular solutions that didn’t work

Salesforce Lightning colors naming pattern
IBM Carbon color naming pattern

The custom solution that worked

UXPin Color Palette Diagram

The Epic Battle of the Shades of Gray

The final version of UXPin Palette

Testing our palette

Accessibility

Final Word

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store