Colors
Semantic tokens are named roles for colors, typography, and other parameters in a design system. Instead of using abstract values like #0F62FE or gray-100, designers and developers use clear names that are contextualized, such as: ActionPrimary, BackgroundDefault, StatusError.
Violet550
#6B5DFE
Action / Primary
Accent / Brand Primary
Additional / Default
Status / Default
This approach helps:
- Ensure interface consistency,
- To accelerate teamwork,
- Simplify product scaling and support,
- Easily adapt the design to new brand colors or dark theme.
Semantic token structure
In Muse Group, we use a semantic framework to accelerate the scaling of design approaches internally. The framework contains a list of semantic color tokens, which is divided into 10 logical groups. Below is a description of each of them with usage examples.
Content
Primary
Secondary
Tertiary
Inactive
Background
Default
Highlight
Inactive
Disabled
Modal
Exception
Constant Light
Constant Dark
Inverse Dark
Inverse Light
Accent
Primary Brand
Secondary Brand
Brand Contrast
Stroke
Default
Decorative
Form
Default
Hovered
Active
Disabled
Action
Primary
Secondary
Float
Controls
Status
Default
Default Subdued
Success
Success Subdued
Error
Error Subdued
Warning
Warning Subdued
Overly
Image
Modal
Float
Additional
Default
Beginner
Intermediate
Advanced
Attention
Rating
1. Content
The structure of the file reflects the structure of the actual product.
Role: Colors for text, icons and other elements that are content.
Examples:
— body text (e.g., headlines, main content).
— secondary text (captions, labels).
— inactive or locked interface elements.
Last Christmas Chords by Wham!
5K views · 14K saves · 100 comments · 7 contributors · Difficulty: beginner
Content / Secondary
Content / Primary
2. Background
Role: Background and surface colors.
Examples:
— the main background of the interface.
— selected area, card, segment.
— non-native button background, placeholder.
Drop your music here
Only MSCZ files. About this format
Link
Choose file
Background / Highlighted
Background / Default
3. Exception
Role: Special states that require highlighting. Often the colors of the group are used to elaborate various corners of cases in light and dark themes.
Examples:
— the main background of the interface.
— selected area, card, segment.
Create
Exception / Constant Light
Exception / Constant Light
4. Accent
Role: Brand colors and stylistic accents.
Examples:
— primary brand color.
— additional branded accent.
5. Stroke
Role: Borders, dividers, strokes.
Examples:
— standard content block borders.
— divider between content blocks to enhance brand equity.
Search for sheet music
Scores
Courses
Songbooks
NEW
Accent / Primary Brand
6. Form
Role: Colors for interactive fields and forms.
Examples:
— the default state of the text input field.
— on the hover.
Login
Your email
Login
login@gmail.com
Form / Default
Form / Active
7. Action
Role: Buttons, actions, links, interactive components.
Examples:
— the default state of the text input field.
— on the hover.
— product button appearing in full screen mode.
Create
Action / Primary
Action / Float
8. Status
Role: Colors for statuses and notifications.
Examples:
— successful action.
— warning.
— error, wrong action.
The password is wrong
Try again or create a new one
Status / Warning Subdued
Status / Warning
9. Overlay
Role: Transparent layers to darken the interface.
Examples:
— a semi-transparent layer on top of the image.
— background darkening under the modal window.
Authorization
Login
Text
Password
Text
Sign In
Overly / Modal
Overly / Modal
Overly / Modal
Overly / Modal
10. Additional
Role: Auxiliary tokens for non-standard or product cases.
Examples:
— rating color.
— the color of the notification badges.
— the color of the difficulty level.
Last Christmas
Chords by Wham
Additional / Rating
Conclusion
The use of semantic tokens in Figma makes the design system flexible, understandable and scalable. Instead of being tied to specific colors, designers think about the meaning and purpose of elements. This makes work easier and improves interaction between designers and developers.