Naming colors

Hey guys,
I am designing an app and I suggested to my client to use Material Design, mentioning that they could use any design system they want, or even create it from scratch, since what I will create has a custom look.

My problem is, and it’s the first time I hear about it in 17 years, my client’s developer is asking me to name the colors exactly like they do in the Material Design system. Is he insane, or am I insane? :stuck_out_tongue:

He’s using Flutter, and he says that if the colors are named exactly the same, they will simply be assigned to the right element inside each component. But I am not using the colors in the same way, so if they would automatically get assigned, it would be a total mess.

Anyone had this request before? Am I missing something?
Thank you :slight_smile:

1 Like

I believe the developer is talking about Material Design’s color systems. This involves not only creating generic color names (blue-40, blue-50, …), but going an extra step to assign colors to where and how they will be used.

Here’s the page: Color system – Material Design 3
Here, you’ll notice that the colors have “roles” that go beyond just primary or accent. Each color concept has “groups” which are basically combinations of colors that will always appear together. For example, text on top of the primary color will always be the on-primary color.

This system can be taken another level deeper, where the colors are defined on the component level. I found this article to be super helpful to grasp the different levels of color naming: The Practical Guide to Naming Design Tokens | UX Collective

So it depends—is the developer expecting you to just change the colors on the global color like blue-50 level? Because in that case, you’re right—it will be a total mess. Or is he talking about the component level like button-primary-background?

I would suggest that you ask the developer to provide you with the list of colors he is referring to, so you can see at which level he wants you to name these colors.

1 Like

Hi @Jenny_Seong
Thank you so much for taking the time for such a great answer.
Yeah, the developer is probably referring to naming the colors exactly as they are named in the Material Design system. He’s using Flutter, and from my understanding, there’s a plugin or builder that basically assigns all the colors in the right place, based on the color names.

The problem is, I didn’t assign the colors in the same way Material Design did, I assigned them based on the app I am designing, so even if I was to name some colors in the same way, if they don’t get hard coded per component and instead assigned automatically, that’ll be a total mess.

I’m trying to find out if this ever happened to someone else, or am I the first one meeting this problem :stuck_out_tongue:

1 Like

Going through it rn :joy: