Semantic Colors: Naming a Color's Job, Not Its Value
Semantic colors name a color's purpose (e.g., color-background-interactive) instead of its value (#007BFF). This simplifies theming, like light/dark mode, by mapping roles to specific primitive colors, ensuring a consistent UI across an application.
Why it exists
Hardcoding hex values like #FFFFFF across a codebase is brittle. When a brand color changes or you need to add a dark mode, you're faced with a massive, error-prone find-and-replace task. Semantic colors introduce a layer of abstraction to solve this.
The mental model
Think of semantic colors as variables for your color palette. Instead of using a raw hex code, you use a name that describes the color's purpose, like color-background-default or color-text-interactive. This name then points to a specific primitive color (e.g., blue-500).
How it works
Semantic color tokens are aliases that reference primitive color tokens (the raw hex or RGB values). A token named color-background-brand might point to primitive-blue-500. For dark mode, you change the reference so color-background-brand points to primitive-blue-300. The application code, which only ever uses the semantic name, updates automatically without any changes.
When to use it
Use semantic colors in any project with a design system, especially when you need to support multiple themes (like light/dark), enforce accessibility (e.g., color-text-on-brand can guarantee contrast), or maintain UI consistency across a large application or team.
When not to use it
For a very small, single-theme project with no plans to scale, it might feel like overkill. However, the cost of retrofitting this system later is high, so it's almost always a good practice to start with, even if the initial setup is simple.
One canonical example
A primary button's background should be set using the token color-background-interactive instead of a hardcoded value like #007BFF. To implement dark mode, you don't change the button's code. Instead, you update the design system's definitions so that color-background-interactive now points to a different, darker blue primitive for the dark theme. The button's appearance updates automatically.
Interview question
What is the primary mechanism by which semantic colors simplify implementing a dark mode?
- a.They enable application code to use consistent, purpose-based color names that reference different primitive values for each theme.Correct
- b.They provide a utility that converts all existing light-mode hex codes in the codebase to dark-mode equivalents.
- c.They generate separate CSS files for dark mode, which override all default color styles.
- d.They automatically detect user preferences and apply a pre-defined dark color palette.
Why? this is the answer
Semantic colors work by allowing a single semantic name (like color-background-interactive) to point to different primitive color values depending on the active theme, as described in the 'HOW IT WORKS' section. Option B is incorrect because semantic colors prevent the need for hardcoded hex values, rather than converting them.
Just read this? Test yourself on what you have been reading.
Read the original → designsystem.backbase.com
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design systems — each one lists the topics its interview covers.
See open roles