Specific color styles—Intent or use
If a style isn’t utilized across the entire system, the second level will define intent or use. This second level typically includes interactive, input controls, system, and accent.
- Interactive
Most commonly, these are your buttons. Why don’t we just say buttons? Because we may have other custom interactions down the road that will use this same styling. These are further broken down into hierarchies—primary, secondary, tertiary, and quaternary. Each has their own states—default, hover, focus, press, active, and inverted. They will also have a disabled state, but all disabled components are styled the same so those use system-wide color styles for disabled. - Input Controls / Inputs
Both input controls and inputs get styled the same; if they are not, you can break these up. Inputs include text fields, select, date picker, search, auto-suggest, text area, obfuscated, etc. Input controls include radios, checkboxes, super radios, toggles, input steppers, sliders, etc. These will have unselected and selected states with their own default, hover, focus, and press states. System styles would be utilized for their error and disabled states. - System
System styles are used for all system components, and severity states for interactive components. This would include feedback banners, inline alerts, errors on inputs, etc. Their states are informative, success, warning, and error. Typically, the error will have a default, hover, focus, and press states because action is always required by the user in these situations. - Accent
This bucket is broad and made up of secondary colors used within the brand. It’s reserved for what I like to call “brand moments.” This gives designers creative flexibility for onboarding, value props, and landing page screens as they have a bit more personality them. These are also used to create a variety of color combinations for informative badges.
These four categories, plus our system-wide styles, cover all essential components needed for a design system.
If you’re creating a design system from scratch I recommend doing exploratory work before you begin defining your semantic color styles. Create a few key views that include multiple core components to get a sense for how these colors will look, then start to define your semantic colors. After so many times, you’ll be able to visualize it in your head!
🎨 It’s hard to show an entire semantic color system in a single article so be sure to snag a copy of the Figma Community file to see an entire example of semantic color sets.
You can also use your primitive colors to create a semantic color set for your illustration library. This won’t get used by engineering, but it’s extremely helpful when you have multiple designers working on illustrations that need to be consistent. You can define your highlights, base colors, shadows, and outlines in multiple color ways. If you use a lot of people in your illustrations, consider making skin tone color ramps.