Basic Explanation of Semantic Color in Design System for UI/UX Newbie
In my previous post, I’ve mentioned “Semantic” several times. But what is Semantic Color?
Shades of color from 1 main color
In UI/UX design, we use different shades of the same color to make things look nice and easy to understand.
The Analogy of Semantic Color
Imagine you have a box of crayons, and you color a picture with different shades of blue. Some parts are light blue, some are dark blue, and some are in between. This helps you see what’s most important in the picture.
Using different shades helps people know where to look and what to click on when they use a website or an app. It’s like making a treasure map, where the bright colors show the way to the treasure, and the lighter colors fill in the background. This way, everything looks good and is easy to navigate.
But why?
This is especially important for digital platforms like websites or mobile apps, as there are no human workers to assist customers visiting your site, unlike in traditional stores.
Understanding Color Shade Naming in Design Systems
Shades of color are typically named with slashes accompanied by numbers. They start from blue/25, blue/50, and go all the way to blue/900. Keep in mind that this naming convention differs from one Design System to another. You must be wondering why the numbers and slashes?
The “ / ” naming in design system
In Figma or anywhere else, you’ll find that these / slashes mean it’s a subfolder. So the parent folder is blue. And inside the blue folder will be 25, 50, 100 and so forth.
Same goes to Component Naming in Figma. Inside a Primary Button, there will be variation of the button. For example Primary Button/Small, Primary Button/Medium and Primary Button/Large.
It just a matter of categorizing in an organized manner.
Therefore the folder will be neatly organized as such:
Primary Button
- Small
- Medium
- Large
The Numbers Naming in Design System
Okay now you know what those slashes do. But what about the number? where it comes from? why 100, it could be any number like 10 or 1.
Imagine you have a big box of blue crayons. Some are very light blue, some are medium blue, and some are very dark blue. To keep track of all these blues, we give them numbers.
We use numbers like 100, 200, 300 instead of 1, 2, 3 or 10, 20, 30 for a couple of reasons:
1. More space between numbers: Using bigger numbers gives us more room to add colors in between if we need to. If we used 1, 2, 3, we couldn’t easily add a color between 1 and 2. But with 100, 200, 300, we can add 150 if we want a color between 100 and 200.
2. Lots of shades: There are many shades of blue, and using bigger numbers lets us have more options without running out of numbers.
3. Easy to remember: 100, 200, 300 are round numbers that are easy for people to remember and say.
Usually, the system works like this:
- 100 is very light blue (like the sky)
- 500 might be a medium blue (like a blueberry)
- 900 would be a very dark blue (like the deep ocean)
This way, when someone says “blue 300,” we know it’s a bit darker than “blue 200” but lighter than “blue 400,” without having to see the actual color.
It’s like having a big staircase of blue, with each step being a slightly different shade!
In summary, semantic color systems are widely adopted in UI/UX design to ensure consistency across design systems. They guarantee harmonious color schemes and appropriate contrast, which is crucial for user experience because:
- It enhances readability and accessibility, making interfaces usable for all users, including those with visual impairments.
- It creates a clear visual hierarchy, guiding users’ attention to important elements.
- It reinforces brand identity and creates a cohesive look and feel across different platforms and devices.
- It reduces cognitive load on users by maintaining consistent color meanings throughout the interface.
By implementing semantic color systems in UI/UX design, designers gain a significant advantage when collaborating with developers.
This shared color system facilitates smoother communication and more efficient implementation, as both designers and developers work from the same standardized color palette.
This alignment streamlines the design-to-development process, reduces errors, and ensures that the final product accurately reflects the intended design vision.
Thank you for reading!
Let me know what you think of Semantic Color System?
Follow for more UI/UX Design tips