SATS Color System
Role: Digital Product Designer
Year: 2023
Company: SATS Group
As a Digital Product Designer at SATS, I lead the redesign of our color system. The previous system faced several critical issues: accessibility challenges, improper separation between foreground and background colors, poorly defined semantic color variables, and a proliferation of nearly identical color variations. My mission was to resolve these issues and create a cohesive, scalable, and accessible color system.
Challenges:
- Accessibility Compliance: Ensuring all colors met accessibility standards, including sufficient contrast for readability and usability for individuals with visual impairments.
- Color Separation: Correcting the improper use of foreground and background colors to maintain a clear and consistent visual hierarchy.
- Semantic Clarity: Redefining and organizing the semantic color variables to be meaningful and useful, eliminating confusion and redundancy.
- Color Consolidation: Reducing the number of nearly identical color variations by linking them to well-defined primitives, maintaining a cohesive and streamlined palette.
- Scalability: Creating a system that could easily scale and adapt to new features, products, and future needs without losing consistency.
- Cross-Team Collaboration: Coordinating with design peers and developers to ensure the new system met the needs of all stakeholders and was effectively implemented across all platforms.
Importance of a well-definied Color System:
-
Consistency: A well-defined color system ensures a uniform look and feel across all products and platforms, enhancing brand recognition by maintaining consistent use of brand colors.
-
Accessibility: It helps meet accessibility standards, making products usable for people with visual impairments, and ensures sufficient contrast between text and background for readability.
-
Efficiency: A clear set of guidelines simplifies the design and development process, reducing the time and effort needed to make design decisions.
-
Scalability: The system supports the addition of new features and products without disrupting the existing design language, providing a flexible framework that can adapt to future needs and technologies.
- Collaboration: It facilitates better communication between designers and developers through a shared vocabulary, ensuring that everyone on the team is on the same page, reducing errors and inconsistencies.
-
User Experience: A well-defined color system creates a more intuitive and pleasant user experience by using colors in a predictable way, helping users navigate and interact with the product more effectively.
-
Brand Identity: It reinforces the brand’s visual identity, making it more memorable and distinctive, and aligns with the overall brand strategy and messaging.
-
Clarity and Focus: The system prevents the proliferation of unnecessary color variations, which can clutter the design, and helps maintain focus on the primary brand colors and their intended usage.

The process
-
Analysis: I conducted an in-depth analysis of the existing color palette and its usage across all platforms, identifying the needs for each system, including web, app, and internal applications.
-
Collaboration: I engaged in discussions with design peers and developers to gather insights and ensure the solution would be practical and effective for all stakeholders.
-
Research: I conducted extensive research on building robust design systems and studied color systems of similar companies to understand best practices.
-
Primitive definition: I defined all primitive colors to serve as the foundation for the system, including brand core colors, grayscale, signal colors, and specific product colors for internal use.
-
Token creation: I developed color variants to support traditional light and dark modes and created a fixed dark blue color that remains consistent in both light and dark modes. I specified foreground and background colors for all elements used in the design system, resulting in the creation of 650 distinct color tokens, ensuring comprehensive coverage and consistency.
-
Implementation: I oversaw the integration of the new color system across all platforms, working closely with development teams to ensure seamless implementation and adherence to the new guidelines. This included regular check-ins and adjustments to ensure compatibility and consistency.
Outcome
Impact
The new color system is now fully integrated across all platforms, streamlining design and development processes for all teams. It has improved accessibility and usability, ensured consistent application of colors, and provided a scalable framework that can adapt to future needs. The system includes clear documentation and change tracking in Figma, facilitating smoother updates and collaboration among teams.
- Improved accessibility and usability across all platforms.
- Consistent application of colors, enhancing the user experience.
- Scalable system that adapts to growing demands.
- Clear documentation and change tracking, facilitating smoother updates and collaboration.
Tools used
Reflection
- Figma for design and documentation.
- Figma plugins for token export
- Collaboration with design and development teams.
This project not only improved the visual and functional aspects of our products but also fostered a deeper collaboration between design and development teams. The new color system stands as a testament to the power of meticulous planning, thorough research, and effective teamwork.