It all started when I noticed the subtle variations of primary blue that permeated my app – a little darker here, a little more saturated there. When I started looking at the code, I found a mess. I think all told there were 22 variations of primary blue in the product, every one a hard coded hex color. How did this happen? Was it just my product?
Doing some research amongst the other designers on the team, I noticed a trend – the eyedropper tool. At the time, Sketch didn't support variables, so rather than having to memorize or copy/paste hex codes, the designers would just eyedropper the color from a previous component. No problem, right? #0000FF is always #0000FF, right? Right??
But it wasn't. Why?
I finally found the answer with some trial and error. The external monitors that we were all using shifted the colors ever so slightly when using the eyedropper tool. It turned out that the color profile on the external monitors were by default different than the laptop’s own display. I tested multiple color profiles until I found one that kept the colors the exact hex code between them and made sure every designer on the team configured their system to these settings.
I initially focused on my product by specifying a limited color palette for the overseas developers to use. But that wasn't going to help the hundreds of hex colors scattered all through the codebase. That would require some house cleaning. So I taught myself Sass (Syntactically Awesome Style Sheets) so I could create variables for the palette. Next I needed to get access to the codebase itself (that took some persuading). I proceeded to comb through every HTML file in the product, stripping out hex colors and replacing them with Sass variables. By the time I was done, I had touched almost every page in the product. It was...an enormous commit. 😬
But I soon discovered that the issue wasn't just limited to my product within the iLab...
That prompted thinking even larger – how many colors were being used across the 6-8 projects the team was working on at any given time? The number was overwhelming. Apart from Deloitte's primary blue, there was very little consistency between projects. So I spoke with each designer and got a list of all the colors they were using for their UIs and set out to create a design system for the iLab which not only the designers could use, but the developers as well. This meant learning React.
Eventually it turned into an entire internal site dedicated to the design system, design thinking, component specifications and accessibility. The screens you see below were all pages I built in React utilizing my Sass variables for fonts and colors.
This project was the closest I came to being a front end dev (not going to quit my day job, as they say). But it was also the project where I was able to learn so much more about WCAG accessibility standards and CSS variables and their importance.
I hope the outcome was as useful to the team as it was educational for me.