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:
- Primary Colors
- Secondary Colors
- Tertiary Colors
- Neutral Colors
- System Colors
- WCAG Accessibility Testing
- UI Examples in Light & Dark Mode
Tools used
From brief
Topics
Share
Reviews
0 reviews
This project hasn’t been reviewed yet
Share your expertise with the Uxcel community by providing a review of this project. Not only will you help others, but you will also enhance your leadership skills.
0 Claps
Average 0.0 by 0 people
You might also like
Project
MoviesZen OTT Platform
MoviesZen is a sleek, user-friendly OTT platform designed for movie lovers. The user flow begins with a splash screen featuring the brand lo
Project
AI Hub - Page 404
AI Hub is a marketplace for artificial intelligence tools
Project
Freight Document Management System
Problem BriefA freight/logistics document management system auto-groups logistics documents into Sets, but errors in labelling, ordering, an
Project
Video Streaming App Wireframes
This project explores new ways to enhance usability and engagement in a video streaming service. The focus was on creating features that add
Project
My Bestie Nessie - Making a game in one day at the Oakland Museum of Art & Digital Entertainment
A game jam submission for MADE @The MADE Game jam 2025. The goal for this project was to create a game with the theme of "the last one" with
Project
GoDaddy Sign-in Page Accessibility Optimization
Highlights: ✔️ Reduced Brand Name Repetition for Cleaner UI ✔️ Proper Text Alignment for Better Readability ✔️ Clear & Accessible Error Mess
Visual Design Courses
Course
UX Design Foundations
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.