Teck Internship • 8 minute read

Creating adaptable and accessible design system components tailored for users with color blindness


Teck’s Design System, ✨ Nova, has recently been launched and is currently evolving towards full maturity.

Within the Nova Design Systems team, alongside two other designers who contribute on a part-time basis, my chief responsibilities included developing components and refining the style guide in accordance with Google's Material 3 guidelines. This design system has become an essential tool for 10+ designers working on Teck's diverse digital product portfolio.



Atoms → Molecules → Organisms → Pages

Leveraging Atomic Design, we dissected complex interfaces into fundamental elements, streamlining the design process for Nova's components. This methodology enabled us to build consistency and scalability across Teck's digital ecosystem, from the smallest unit to complete pages.


📁 Nova Digital Foundations

This foundation file serves as the bedrock of our design system, encapsulating essential elements like colour styles, text styles, and spacing guidelines.


📁 Nova Component Kit (Building Blocks)

Our Component Kit, aligned with Material 3 guidelines, houses a collection of standardized components acting as the building blocks for intricate designs.


📁 Nova Component Kit & LHA Component Library

These 2 files host advanced organisms tailored to meet the unique demands of different Teck products. This synergy allows for versatile, product-specific designs.


📁 LHA Component Library

Pages, being highly specific to each product suite within Teck, are curated within a dedicated product-specific library to ensure that designers can utilize product-specific layouts.


Creating customizable and responsive components for Nova, based on Material 3.


Each week, designers across teams submit new requests for components, creating a dynamic cycle that fuels the continuous evolution of Nova.

Our weekly feedback loop with designers is pivotal to Nova's agility in fostering a collaborative environment that propels the system's growth. This process ensures Nova adapts swiftly to new design trends and user needs, maintaining its effectiveness across Teck's unified product range.



Scoping out possible use cases on the existing product suites that we have

Leveraging Atomic Design, we dissected complex interfaces into fundamental elements, streamlining the design process for Nova's components. This methodology enabled us to build consistency and scalability across Teck's digital ecosystem, from the smallest unit to complete pages.


Following Material 3’s guideline as the North Star, aided by other established design systems as secondary inspiration

Our research was anchored in Google's Material 3 guidelines, with Material UI's component library as a core reference to ensure our design and development environments were aligned. This approach guaranteed that the behavior and interaction of our components would seamlessly integrate with the development framework, fostering consistency across our products.


Defining the specifications for the component

In defining component specifications, we closely adhered to Google's Material 3 Design Kit, utilizing it as our blueprint to ensure our components' behavior and interactions mirrored the development environment. This alignment between design and development facilitated a cohesive user experience and streamlined collaboration.


Working on a branch

Working in a branch makes sure that no unwanted changes can occur, which can cause problems, and also allows us to track systematically the progress and update of Nova.


Color & state layer

A state layer is a semi-transparent covering on an element that indicates its state. State layers provide a systematic approach to visualizing states by using opacity. This method ensures designers can effectively communicate the status of components during handoffs, simplifying the process and enhancing clarity for development teams.


Creating the atoms by utilizing variants & properties

By leveraging Figma's amazing variants and properties feature, we crafted the foundational atoms of our design system. This approach enabled us to establish customizable and reusable design elements.


Grouping the atoms into molecules

Molecules in our interfaces are crafted by strategically combining atoms to function as cohesive units. These groupings serve as the backbone of Nova, facilitating more complex interactions and functionalities.


Building more complex components from molecules

We constructed organisms by assembling molecules, creating more complex and functional components. These organisms are designed to fulfill specific roles within the interface, enhancing the user experience through their integrated functionality.


Providing an overview & guideline for the component

This documentation ensures that all team members understand the component's purpose, functionality, and application, guiding consistent implementation across our products.


Push for review and reiterate based on feedback

After finalizing a component, I push my branch for review within the Design Systems team. Based on their feedback and comments, I then refine and iterate the component, ensuring it aligns with our standards and expectations before merging it.


Once everything’s aligned: Merge & publish!

And that's one component done.



Tabs organize content across different screens and views. Use tabs to group content into helpful categories.

Chart & Visualization

This component is used to present complex data in a standardized manner, allowing users to easily understand trends, patterns, and insights throughout the different Teck products.

Segmented Control

Segmented control help people select options, switch views, or sort elements. It is used for simple choices between two to five items.

Info Chip

Info chips can be used to inform the user of something that needs the user’s attention. They can also be used on their own to categorize items.


All major digital products at Teck are now developed using Nova as the foundational design standard.

100x YoY Growth in Usage

The concerted effort to mature Nova culminated in widespread organizational endorsement, reaching from the design floor to management levels. This milestone marks a significant leap in acceptance and commitment across the company, signaling Nova's pivotal role in our design and development process.

Averages less than 1% detaches on some of the components that I’ve built

This underscores the adaptability of the components I developed, indicating they are versatile enough to be used as-is by designers, negating the need for manual adjustments and detaches. Such flexibility underscores the components' efficacy in meeting diverse design needs with minimal modification.

And most importantly: it saves designers’ tons of time and increases our product’s cohesiveness!

Feedback from my peers during the weekly design system release sessions has been overwhelmingly positive, highlighting the significant time savings and enhanced consistency across our products thanks to the newly introduced components.


Modifying Nova's current alert color schemes to improve accessibility for individuals with color vision deficiencies.


We discovered that Nova's current alert color schemes are not fully accessible to users with color vision impairments.


This discovery surfaced during usability testing for a different project, revealing that individuals with visual impairments struggle with interpreting our alert colors. This issue is particularly critical in the mining industry, where alert colors are vital for immediate situational awareness and safety.

Pain Points

1. Difficulty distinguishing between certain alert colors, like yellow and green, in field conditions.
2. Existing color intensity lacks the urgency required to prompt immediate action.
3. Issue with text readability against the background colors, which diminishes visibility even under standard indoor lighting.



Color principles

Investigating into accessible color schemes revealed three key guidelines. Firstly, ensuring high contrast for universal legibility is essential (WCAG’s standard is > 4.5). Secondly, colors must be distinguishable by those with colorblindness to maintain clarity in alerts. Lastly, enhancing vibrancy to capture attention and convey urgency addresses feedback about the current colors' lack of impact.


Landscape Analysis

I delved into how other leading design systems implement alert colors, focusing on their strategies for accessibility. This comparative analysis provided valuable insights into industry standards and innovative approaches to color accessibility.


Finding new colours

My exploration involved combining and refining colors from various design systems, aligning them with our established color principles. This process led to the selection of several new color options, ready for evaluation and testing for their effectiveness and accessibility.


Using the "Contrast" plugin on Figma

To verify the accessibility of our new color choices, I utilized the "Contrast" plugin, which evaluates color combinations against the WCAG's minimum contrast ratio of 4.5. This tool was instrumental in ensuring that our text remains readable against background colors, directly addressing the critical issue of visibility & readability.


Utilizing Tanaguru Contrast Finder to find similar colours that fulfill the contrast requirements

I leveraged Tanaguru Contrast Finder to assess the contrast between color pairs, ensuring compliance with the required contrast ratio of >4.5. This tool was invaluable in identifying alternatives whenever initial choices fell short, guiding us towards colors that both meet accessibility standards and align with our design requirements.


Using Sim Daltonism to simulate different types of colourblindness

Sim Daltonism, a free application, became an essential part of this project by allowing users to see colors through the lens of various color vision deficiencies. This simulation helped us understand how our chosen colors would appear to users with different types of colorblindness, ensuring our designs are inclusive.


Finding the colours that pass the colourblind through a collaborative exercise

In our weekly design feedback sessions, I hosted an exercise with 8 UX Designers to collectively determine the most visually accessible colors. This teamwork approach enriched our decision-making process with diverse perspectives, ensuring our final selections would be universally comprehensible.


Applying the new Colors to evaluate brand coherence

The final step involved integrating the colors into Nova components to assess their harmony with Teck's brand identity and visual impact across our product suite. This practical application was crucial for confirming the colors not only met accessibility standards but also enhanced the aesthetic and functional coherence of our products.



Two weeks following the rollout of the new alert colours, I conducted asynchronous surveys to gauge the impact and gather feedback. The summarized findings revealed a positive shift in user experience, with notable improvements in color accessibility, readability, and the overall visual appeal of our interfaces.


Project Takeaways

Here are the major lessons that I learned from these 2 projects.

Embracing accessibility as a core design principle

Through the process of updating Nova's color schemes for better accessibility, I gained a deeper understanding of how inclusive design practices can significantly enhance user experience. This project highlighted the importance of considering a wide range of visual abilities from the outset, demonstrating that accessibility is not just a compliance requirement but a fundamental aspect of thoughtful design that directly contributes to user satisfaction and engagement.

Critical thinking on component design

Delving into each component's design necessitated a deep dive into various options and possibilities, highlighting the importance of critical thinking. This process taught me to meticulously evaluate each design choice, ensuring that every component not only meets aesthetic standards but also aligns with functional and accessibility requirements. Through this, I've learned the value of a deliberate and informed approach to design, which is crucial for creating components that are both versatile and user-friendly.

You’ve reached the end. Thank you for reading!