WMT - Color System Project
Project Overview
I designed a structured color system for an imaginary digital work/task management tool aimed at creating a clean, focused, and user-friendly interface. As part of the visual identity, I also created a simple logo concept to align with the overall brand aesthetic.
The palette was built to balance clarity, mood, and functionality — ensuring that the interface feels approachable while helping users stay focused on their tasks.
Process & Approach
The color system was organized using the 60-30-10 rule to establish a clear visual hierarchy across the interface:
- Primary Colors: Calm, neutral shades for backgrounds and text to enhance readability and reduce distractions.
- Secondary Color: A bright, energetic hue used for branding and subtle highlights.
- Accent Color: A bold supporting color for buttons, call-to-actions, and key elements.
- System Colors: Green, Red, and Yellow for clear status indicators like success, errors, and warnings.
I focused on selecting colors that feel modern and professional while ensuring accessibility and harmony across light and dark UI modes.
Deliverables
- Color System
- Light & Dark Mode Color Palettes
- Brand Logo Concept
Tools Used
- Figma
Check out the full design process and color system breakdown in the Figma file attached.
Reviews
1 review
Hi✨
This is a fantastic project! You've gone beyond just picking pretty colors and have created a truly structured and thoughtful design system. That's a huge undertaking, and you've executed it beautifully.
I absolutely love your approach. Using the 60-30-10 rule is a perfect way to ensure visual hierarchy and a clean, focused feel. Your choice of calm, neutral primary colors for readability and a bold, energetic accent color for key actions shows a deep understanding of how color can both set a mood and guide a user.
And, as you mentioned, it's so crucial and valuable that you showed it on a real UI. This is a massive step up! It proves that your system works in practice, not just in theory. It's easy to create a nice-looking palette, but showing how it balances clarity and functionality in a real-world application is what truly demonstrates your skill as a designer. The fact that it works across both light and dark modes is the cherry on top.
This is an excellent piece of work that clearly showcases your ability to think systematically and strategically about visual design. Great job!
You might also like
Color System
Grammarly sign-up accessibility optimization
Turning a Notion Resource into a Live Website
Sneak
CycleVerse - Indoor Cycling App
MindNest Color System
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
