Grid of most of IBM Design’s color palette.

IBM Design Colors

Problem Statement

When the IBM Design Language first launched its color palette, employees were relieved to have a standardized look to go by. The GitHub repo provided an open-source solution for web developers to import code if they used a specific technology (SCSS). This created much fiction for developers using any other technology. Designers had to manually recreate the palette in their favorite design tools.


While the IBM Design Language planned to refresh the palette, I had the opportunity to improve the usability of the color palette. The big v2.0.0 update ended up improving the resource in a variety of ways:

  • Source code was moved to JSON format to be exportable to any technology

  • To ensure low-vision and color-blindness accessibility, color grades were renamed for easier pairings

  • Automatic file generation for Keynote, Illustrator, and Sketch was coded to help anyone apply the palette in the programs they use

James loves to design, code, and talk about weird web apps from ATX. He also writes snippets from the third-person.
Connect on LinkedIn