Color Tint Fetish

This episode addresses the unnecessary proliferation of color options in design systems and emphasizing the importance of prioritizing user experience over color choices.
  • design
  • color
  • tints


00:50Hey, good to see you.

00:50Thanks for coming.

00:51This is another episode of Wireframe, and today I’m going to be talking about color.

00:57Now, admittedly, I’m probably unqualified to be talking about color normally

01:00speaking, and that’s because I am color deficient, also known as colorblind.

01:05And that doesn’t mean that I can’t see color, and I want to make sure

01:08I disambiguate that really fast.

01:10What it means is that I have difficulty seeing the

01:13difference between colors, okay?

01:15So That might be a blue or a purple together and that same kind of

01:21scale or the dark green and brown, which was very apparent to me when

01:26I was working for UPS, knowing full well that the uniforms are brown.

01:31To me, they look dark green.

01:34Now I’m not going to be talking about color in this way.

01:36And if you’re actually interested in the science behind color, I

01:39highly recommend Nate Baldwin’s website called Color and Contrast 1.

01:44I’ll make sure to link that in the show notes.

01:46But what I’m gonna be talking about here today is a question that came up in the

01:50design system slack channel, which was asking about many of the systems that

01:54this person was seeing across the public.

01:57And in these systems, what happens is you will find the color page or the

02:02color documentation and see all of these tints that maybe go from like red 100

02:08and red 900 and all the colors in between and have all these different options.

02:12And his question was, why do these systems have all of these different tints?

02:19When very few of them are used.

02:22And this is a great question, and this is something that’s come up a

02:24couple of times in the community.

02:26So much so that I wrote a blog post, which is called Colors Don’t Solve Problems 2.

02:31And in that post I argue that we end up creating too many colors, and,

02:36like I said, not using many of them.

02:40In fact, we spend too much time on this process and it only results in

02:46having Hick’s Law come into play.

02:50And that basically means there’s too many options for people to choose.

02:54Now, I replied to that thread with that blog post and I think the person

02:58really appreciated that response.

03:00There were other responses in that thread.

03:01One of them was against my approach, basically saying that color is important

03:05in, in this way and challenges it by saying that removing weights is an

03:10exercise in premature optimization.

03:13Now I, of course, argue that if the weights were never there in the

03:16first place, then you’re not removing them, and therefore, null and void.

03:20That’s okay.

03:21But in fact, there’s other people out there that share this opinion that we

03:26are putting too much emphasis on color.

03:28This was actually found by accident.

03:30I was on Twitter looking at, you know, regular tweets, I suppose.

03:34And I came across PJ Onori, who you might be familiar with from the Design

03:37Systems Office Hours 3, and he’s in the middle of creating a typeface

03:41and he’s building it in public

03:42to show everyone what that process looks like and all the trials and tribulations.

03:46And in that, he was showing some screenshots of his new

03:50typeface and against articles.

03:52And one of the articles that he was trying out was an article

03:56called, Color is a Four Letter Word 4.

03:59And I was like, well, that’s a great title.

04:00I want to know where that blog post is.

04:01It happened to have been on his own blog, which is excellent.

04:05So, I read that post and I realized that I think we share many of the

04:09same feelings about how color is being handled in our line of work.

04:14And I highly recommend that you read his post as well.

04:16I’ll put it in the show notes.

04:17I like how he creates analogs to the physical world.

04:21Like, the way that he introduces the museum and the reason why

04:24those walls are white is to focus on the artwork in particular.

04:27It’s not detract from the reason that you’re here.

04:30It’s excellent.

04:31But that’s the general gist of what I think I’m also saying as well.

04:34And in fact, it is potentially fitting to be the first episode here of Wireframe,

04:41because I believe that when we’re choosing color and doing this curation step, many

04:47systems and teams are doing it backwards.

04:50Now, what do I mean by doing it backwards?

04:53Well, I think this is also very similar to the way that Dan Mall presents Your

04:58Next Component 5 I’ll put that also in the show notes so you could take a peek at it.

05:02But what he suggests in there is that Many folks believe that the button is the

05:07first thing to do in your design system, because of course you’ll need a button.

05:11But what he’ll argue is that the button isn’t as helpful as

05:16potentially another component that you could be building for your teams.

05:21He suggests for Uber, as an example, that the map component would be

05:26a lot more impactful than, you know, creating a button for them.

05:31So, this is a similar kind of thing that I’m talking about,

05:34but for the facet of color.

05:35And, in fact, I’m saying that things like color, Maybe even just the

05:41values themselves, color, topography, rounding, all of that stuff is really

05:45things that should be considered last in the grand scheme of design systems.

05:51Now you must be saying to yourself, how can we have a system without color?

05:54Well, You absolutely can.

05:57I’ll explain a little bit how.

05:58And the way that you do that is really due to wireframes.

06:03Yes, we’re gonna go ahead and tie it in for the first episode,

06:05wireframes are the answer.

06:06The reason why I think wireframes are the answer is because the

06:09wireframe is representing the foundational user experience.

06:13And that is, without any color, Really, without any typography, very minimal

06:18spacing or really no spacing system to be found other than some relational stuff.

06:25So really, you’re trying to identify exactly what the experience needs

06:30right down to the studs, right?

06:33And it has to work at that point before you ever consider the personality

06:39that you’re going to put on top of it.

06:40This is the form following function.

06:44Which means that the wireframe is the function.

06:46This, this needs to function in this way.

06:49And then what follows that is the form, right?

06:51It’s that brand expression that you’re going to put on top of it, or this

06:56feedback expression that you’re going to put on the notification system.

06:59All that stuff is things that are going to be added after

07:03the experience is understood.

07:06And I think all too often we forget about that wireframe step and immediately go

07:10to that high fidelity where it’s sexier.


07:13And that’s a lot more fun and interesting than the wireframe step.


07:18It feels like, oh, I could just, you know, do these two things at once

07:22and really cut the, the time in half about the user experience workflow.


07:29And yes, that could be possible.

07:31However, I think, again, we are not putting enough emphasis on that UX and

07:35putting too much emphasis on that UI.

07:37So when I’m talking about this being backwards, what I’m talking about is we

07:41are putting too much emphasis on what colors could we have and not enough

07:46emphasis on is this solving the user need.

07:49So I want to go a little bit more into detail about the actual color

07:54selection process, or not really the process, but maybe the results.

08:00Yeah, I think that’s what I really want to talk about here because those

08:03results are all those tints, right?

08:05What comes out of those exercises that our designers have is that they come out with

08:10a range of tints that say all these colors work nicely together and go forth, enjoy,

08:15have a good time with all of your flavors.

08:17There’s a couple of problems with this.

08:18The first problem that I see is that oftentimes those colors that

08:23appear in the middle Of those scales are very difficult to use.

08:28And I’d say that from a contrast standpoint, not from a, oh, it’s harder

08:32to put color 100 versus color 200 in there just from a placement standpoint.

08:37That’s not what I’m talking about.

08:38What I’m talking about is the values that exist in the middle of these scales,

08:42especially when we’re talking about the grays are typically very unusable.

08:48Just think about the, the gray that would be hex eight, eight, eight.

08:51That’s middle gray or an RGB.

08:53It’s 128, three times.



08:55That gray, with any other color, is going to be very difficult to read.

09:00So why have it?

09:02Just because you have a 400 and a 600 you need to have a 500?

09:05Not necessarily no right in colors don’t solve problems.

09:10The blog post, I argue that it would be much better for you to have the

09:14opposite ends of that spectrum rather than the entire spectrum, right?

09:17So if you have to have these decisions of color, have them at the opposite ends.

09:23To go a little bit further than that, just have the colors at both ends, right?

09:29So for the red as an example, you would have the light red and the

09:32dark red, and that’s all you need.

09:35And what that helps with is that Hicks law that will occur with designers

09:39that will go ahead and say, well, with eight different shades of this

09:43red, I don’t know which one to choose.

09:45You’ll have folks that will choose the 400 folks that will choose the

09:48500 folks that will choose the 700.

09:50They’ll choose anyone that they think looks better.

09:54But if you only have those two, the light red and the dark red,

09:56it’s a lot less choice, but makes it a lot easier to choose

10:00so that means that.

10:02The only thing that they have to think about in their mind is can I read this

10:06text or not if it’s dark red or light red depending on where I’m placing it.

10:10It’s a lot faster to go ahead and choose that and everything’s going to be a lot

10:13more consistent if it’s the same red.

10:17So I think that’s really what you want.

10:19All these tints that you’re creating in this exercise is really sexy,

10:24and it’s low hanging fruit too.

10:26It’s a fun time to go ahead and start choosing colors, you know,

10:29express yourself in a new way.

10:31I really think that it would be a much better use of time, instead of trying

10:36to choose these colors, to actually again, Go back to your wireframes and

10:41look at the experience and see how it could be improved there, right?

10:46Your bottom line, right?

10:48The money that’s coming in for your business is not going to be make or

10:52break from the colors that you choose.

10:55That’s what the fundamental message of Colors Don’t Solve

10:59Problems is talking about, right?

11:00All those choices that you’re making when it comes to color, they’re not

11:04going to affect your bottom line.

11:05What’s going to affect your bottom line is a good user experience, right?

11:09And there’s so many tools out there to go ahead and choose the right colors.

11:13I use many of those tools myself, because I’m color deficient, to figure

11:16out what colors to choose for my sites.

11:18And it’s typically one of the last things I do, right?

11:22And I do that because I have tokens that support the ability

11:27to change these colors, right?

11:28And that’s the thing that we’re supposed to be doing, right?

11:31When we’re talking about, again, doing this stuff backwards, if we want to

11:34be allowing color to exist in the page or in the experience, create

11:40the mechanism where color can exist.

11:43on the page first.

11:46That’s, I think what’s going to be critical in here, you know, for a little

11:49bit of an analog in the real space, right?

11:52I think it’s a little odd for us to be choosing colors

11:55before we ever seen the room.

11:57I think we should be seeing the room first, understanding the room’s needs

12:01before we ever decide, okay, this is the color that I want for this room.

12:06It’s the same kind of scenario in my mind.

12:09We shouldn’t really be looking at colors.

12:12Until we understand the space.

12:15And don’t get me wrong, this is a hard thing to do.


12:17I’d much rather be playing around with colors because

12:19colors do have an expression, do have an emotion behind them.

12:22As a person who was an artist for a long time, colors do mean something, certainly.

12:28But again, this is user experience design.

12:31And we have to think about that user first.

12:33So if you

12:34know more about this approach and have a couple of visual examples

12:37of what I’m talking about.

12:39Certainly, take a look at the blog post that I’ll have in the show notes

12:42called Colors Don’t Solve Problems.

12:44I hope that it’s enlightening and people reconsider the importance of

12:51this color exercise and try to set it aside for more important things that

12:55could be more critical to the system.

12:58In fact I hope.

13:00To have another Wireframe episode that really talks about semantic

13:03tokens which I probably will because knowing me, I love talking about

13:07semantic tokens and hopefully that won’t be an hour long episode.

13:11But, generally speaking again, I, I think, you know, it is a powerful thing to

13:19prioritize the things that are important.

13:23And color, I believe, isn’t as important as many people

13:28out there think it might be.

13:30So, what do you think out there?

13:32You let me know.

13:33You could tweet at me at wireframefm 6, give me those comments, and I’m interested

13:37to know what your take on this is.

13:39Because color is a big thing when it comes to design, right?

13:43Many people have different feelings about this, you know, even folks

13:45that are out there that might share my opinion have a different take

13:49about why color you know, isn’t as important as people bring it out to be.

13:52Or maybe you have the same frustrations out there when people are.

13:56Trying to choose colors and they aren’t accessible or don’t know the reasons

14:00why those colors are being chosen.

14:01Oh, one more thing, by the way.

14:04There is a reason where colors are kind of, sort of important, but I’ll

14:11talk about that in another episode.

14:13So you’re gonna have to keep listening.

14:15I’m sorry, there’s more coming.

14:17It’s what’s gonna happen.

14:19But anyway, it was good talking with you folks.

14:21See you


  1. https://colorandcontrast.com/

  2. https://blog.damato.design/posts/colors-dont-solve-problems/

  3. https://podcasts.apple.com/us/podcast/design-system-office-hours/id1605819337

  4. https://pjonori.blog/posts/color-is-a-four-letter-word/

  5. https://www.youtube.com/watch?v=mPXljWeWu3g

  6. https://twitter.com/wireframefm