Color System For Productivity Tool

Introduction

For this project, I took inspiration from Microsoft Teams to design a color system tailored for a productivity and collaboration tool. I focused on desktop devices and created sample screens to demonstrate how the color system functions in both light and dark modes.

In this presentation, I’ll walk you through why I chose these specific colors, how they enhance user interactions, and the overall look and feel of the interface. I’ll also explain how I tested the colors for accessibility using WCAG standards and share practical examples.

Here’s what I’ll be covering:

1. Primary Colors
2. Secondary Colors
3. Tertiary Colors
4. Neutral Colors
5. System Colors
6. WCAG Accessibility Testing
7. UI Examples in Light & Dark Mode