These days, diversity and inclusion are prime directives for any business. One of our agency clients, which was both black-and-woman-owned, asked for a new website to celebrate and empower those two aspects of their talent roster. There was no designer involved, so we would be taking direction from the agency owner, trying to evolve their existing website design and branding into something new and fresh, based on her ideas and feedback (love it, hate it, etc.) only. This was either going to be a big mess, or a great success!

The Challenge:

To keep the site focused on diversity and inclusion our client requested a structure built into it, which was highly unusual, and more than a little sensitive in nature. They wanted site visitors to be able to search by “skin color” which could be sorted from darkest to lightest.

Our first reaction was, “Are you sure you want to do that?”

After she confirmed her idea and approach, our second reaction was to point out that it could not be done, because colors are infinite with tonal variations. Also, ethnicity and “skin color” are forbidden (illegal!) in the EU! So, how could we build infinite variations into the code of the website in a meaningful and unoffensive way, to satisfy our client? Maybe we could do something with a fixed range of dark-to-light shades instead of colors. That might work!

In photography, there is a methodology called the “zone system” which applies one of 11 values (from 0–10) to specific shades from pure black to pure white. In the Zone System, they refer to “middle gray” which is Zone 6. We decided the Zone System could be the foundation of building what the client wanted for their new site…

Problem:

Being limited to only 11 zone values was not enough to enable the desired sorting feature, or to make the dark-to-light concept obvious enough in thumbnail gallery views of models. So we imagined a BIG number (31) of extended zones as the way to provide enough range of tones and shades. But, after thinking about it for a moment, it was immediately obvious that 31 — even dropping it to 21 — was way too many tones and the agents would hate us!

Solution:

Playing around with tones and 50 shades of gray, we started thinking we needed an even number, just slightly more than 11 of the standard Zone System, but fewer than 21, which was still unmanageable. So we prompted ChatGPT to give us a range of 16 tones, evenly spaced, from pure black to pure white… Look (below) at the numerical pattern that emerged from the HEX values and corresponding RGB values of the 16 tones!!!

We call it “The Tone System”

As it turned out, the process was reasonable and the agency owner was clear on what she wanted, so we were ALL happy when the site was finished and went live!

That’s how we roll, and code… 🙂