Semantic Color System
Ensuring design consistency across all aspects of the product at DiscoverU Health
UX/UI designer
Role
1 week
Timeline
Semantic Color System
Project
OVERVIEW
Unifying design with a color system
As DiscoverU Health expands its services, maintaining design consistency across the product has become vital. As a UX/UI designer, I worked with two other designers and a developer to create a semantic color system. This was the first step toward building a design system to improve efficiency and establish a unified, consistent visual language across teams and the product.
THE PROBLEM
Absence of color standardization leads to inefficiency and disorganization
In our design process and audit, we found that applying color styles without clear guidelines on color usage led to a disorganized, time-consuming workflow, as it was difficult to track the purpose of each color.
THE SOLUTION
Implementing a semantic color system will ensure consistency and streamline processes
A semantic color system keeps colors consistent across the product, making it easier for teams to create a unified look without confusion. It also simplifies the design and development process by giving everyone clear guidelines to follow.
PROJECT GOALS
Develop a color system that is purposeful, scalable, and intuitive
RESEARCH
Shopify and Asana use semantic color systems to enhance clarity and consistency, inspiring our approach
Many leading companies, such as Shopify and Asana, have adopted semantic color systems to improve the clarity and intent of their color palettes, creating more cohesive and consistent designs. These examples have greatly influenced DiscoverU Health’s development of our own semantic color system.
Shopify Polaris
RESULTS
After sifting through our research, the team agreed to move forward with the new system
DiscoverU Health’s Semantic Color System: A base color from the palette is assigned a semantic color token, labeling it with a clear purpose. This token is then applied to a component, ensuring consistent use and streamlined design changes across the product.
The base palette: DiscoverU Health’s base color palette was crafted from core colors already widely used in our product.
A token based approach: To make the color system efficient for both design and development, I worked with other designers and our developer to implement a token-based approach, establishing design tokens as a single source of truth. This shared language improved communication and consistency across teams.
IMPACT
The new color system boosts efficiency by 30% throughout the design workflow
With the new system, our design team completed objectives 30% faster, requiring fewer changes to main components and enhancing overall consistency. Also, by providing the developer with clear guidelines we saw increased efficiency and accuracy when implementing designs.
REFLECTION
Unpacking what I learned
-
Creating a consistent, meaningful way to name colors makes it easier for everyone on the team to understand and use them correctly. When each color has a purpose-driven label, such as "Primary" or "Success," it reduces confusion and speeds up the design process, allowing team members to make quick, informed decisions. This clarity also streamlines communication across departments, helping to maintain a cohesive look and feel throughout the product while minimizing errors and rework.
-
Working closely with developers is crucial for a successful color system. By aligning on standards and creating reusable tokens together, we make sure it integrates smoothly into the code. This keeps things easy to maintain, ensures updates are seamless, and keeps the product looking consistent for a cohesive user experience.
FUTURE DIRECTIONS
The semantic color system is the foundation for building a comprehensive design system
I really enjoyed working with my team to kick off the process of building the design system for DiscoverU Health. Moving forward, me and the rest of the team plan to develop our design system further when it comes to expanding our component library, tokens, documentation and guidelines, etc.