Color System
To develop the color system for a productivity platform from start to finish, I decided to create a quick UI design for a fictional task management app.
I designed a screen of this app for a laptop device to showcase my color system for both light and dark modes. In this presentation, you will discover my process for building the color system, from selecting the color palette to applying the colors to the design one by one, starting with the following:
- Neutral colors – to segment the design into distinct blocks
- Primary colors – for CTAs, active links, and critical elements
- Secondary colors – for task tags, helping users quickly classify and identify task types
- Tertiary color – for prioritizing tasks
- System colors – for immediate feedback on user actions and system status
You can find the full color palette and the design with all the colors applied at the end of my presentation.
Reviews
36 reviews
Regarding neutral colors, they were very well explained and categorized between backgrounds, borders, and texts. This helps both those developing the product to allocate the use of colors in a design system and those applying this design system in projects. This description, while delineating the use, also impresses as the same neutral colors in light mode are also applicable to dark mode.
The explanation about the use of primary colors was interesting and made a lot of sense. It's very interesting that many of the colors are compatible with both light and dark modes.
Secondary colors offer an interesting balance between pastel and dark tones, with the thought that the colors of the texts and backgrounds of the tags being interchangeable between light and dark modes helps maintain visual consistency.
Tertiary colors are attention-grabbing and align with the objective of showing task priority. They do not conflict with the other colors in the system.
Amazing work!
Hi Aubane,
Your color system is thoughtfully crafted, creating a perfect balance of harmony and contrast. It’s clear that you’ve put a lot of care into making it adaptable and visually appealing. You’re doing an incredible job—keep up the great work!
Nice work, super clear process. One thought: as you refine, stress-test the palette in edge cases, like accessibility with low vision, or when multiple tags/priority states stack on a busy screen. That’s usually where contrast issues show up and where you might need an extra supporting tone.
The attention to detail and thoughtful color choices for both light and dark modes are impressive. Truly inspiring work! 👏💯
The system looks fresh and fantastic! The color choices are well-explained and thoughtfully applied.
Amazing Work❤️
The way you elaborated on every one of your colour choices demonstrates the amount of work you put into this project! I personally loved how you showcased the use of all the colors step-by-step as they were presented.
You did such a great job!!!
Aubane you made an incredibly job in giving your client a clear and functional presentation of how each of the color from the palette are going to influence the increase in the use of their product.
Amazing work keep it up.
worthy project
I won't lie, after reading the brief, I didn't understand how to achieve however after benchmarking your project I have found a great way to show case finesse, thank you @aubane for being a design prodigy and inspiration.
You might also like
GoDaddy Sign-in Page Accessibility Optimization
My Bestie Nessie - Making a game in one day at the Oakland Museum of Art & Digital Entertainment
Web SaaS Sign-Up Flow
Push notifications
Samyoung Chemical
Roof Recovery – Local Roofing Contractor
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
