Reimagining Asana's Color System
I created a color system based on Asana's current project management tool. Accessibility and the emotions the colors evoke were the primary drivers around my decisions in building a calm but vibrant color palette.
Primary Colors - chosen for it's functional purpose and accessibility as well as its foundational strength
Secondary Colors - chosen for vibrancy and to theme the projects in the UI to help with user recall
Neutral Colors - chosen for functionality for it's primary role as building blocks in the UI, accessible text, and for neutral messaging
System Colors - chosen for necessity in any UI + it's specific role in prioritization tagging of tasks
Reviews
2 reviews
Good job, Kristen! You presented the rationale behind your color choices, and it's evident that accessibility was a priority for you – that's really important when designing systems. Nice work thinking about system colors and showing how the palette works in the context of actual UI.
Personally, I'd love to see the colors applied across more screens. Maybe mobile, different component states, or dark mode? That would demonstrate how the system behaves in various scenarios.
You can see the systematic approach and attention to detail. With this foundation, it'll be easy to expand the project with additional use cases and deeper business rationale. Solid work! 💪❤️
Great job! You explained your design rationale well, thought about accessibility, system colors, and incorporated the colors into some UI.
I personally would've liked to see the colors incorporated into more UI and some more of the high level / most important slides viewable as part of the case study without the user having to click in to the full presentation.
Keep it up!
You might also like

Customer Journey Map for a Co-Working Space

Responsive Main Screen

Latios - Free Portfolio Template for UX/UI Designers

Workspace Booking Flow - UI/UX Design

Login/Sign up Form












