Taskly - Organize, focus, achieve

Decision-making process & rationale

1) Understanding the project

For this project, my goal was to design a color system for a digital work management tool that feels fresh, focused, and human. I wanted the palette to communicate trust and clarity while supporting long periods of concentrated use.

My main objectives were to:

• Build a clear visual hierarchy that guides users effortlessly.
• Reflect the brand’s core values — clarity, momentum, balance, and empathy.
• Ensure WCAG accessibility and versatility across both light and dark modes.
• Create a palette flexible enough for both UI components and branding assets.

2) Guiding brand principles

From the start, I defined four principles that shaped every color decision:

• Clarity – colors should enhance legibility and reduce cognitive load.
• Momentum – the system should inspire progress and action.
• Balance – I wanted a calm and professional base that avoids visual fatigue.
• Empathy – the interface should feel approachable and supportive.

3) Emotional direction

I mapped each color family to a specific emotional intent:

• Focus & Confidence → Primary Indigo family (#4C4CFF)
• Warmth & Motivation → Secondary Coral family (#FF6B6B)
• Balance & Collaboration → Tertiary Teal family (#00BFA6)
• Clarity & Intuitive Feedback → System colors (#27AE60, #F2C94C, #EB5757, #2D9CDB)

4) Building the palette

• Primary — Modern Indigo (#4C4CFF)
• I chose Indigo as the brand’s anchor color because it conveys trust, intelligence, and focus — qualities that resonate with productivity tools. The supporting shades (#2323AA, #9CA9FF, #E4E8FF) create a versatile scale for CTAs, backgrounds, and hover states, maintaining consistency and depth.
• Secondary — Energetic Coral (#FF6B6B)
• Coral brings warmth and approachability. I use it sparingly to highlight key interactions, success moments, or emotional touchpoints. It adds a human dimension to an otherwise structured interface.
• Tertiary — Balanced Teal (#00BFA6)
• Teal bridges the rational and the organic. It represents flow, adaptability, and collaboration — perfect for elements like progress indicators or supportive highlights.
• System Colors (#27AE60, #F2C94C, #EB5757, #2D9CDB)
• I selected these tones to ensure clear and consistent user feedback:
  • Green → success and progress
  • Yellow → caution and awareness
  • Red → errors or required action
  • Blue → neutral information and guidance
  • Each was adjusted for sufficient contrast and emotional clarity.

5) Accessibility testing

Accessibility was a key part of my process.

I tested every color pair to meet WCAG AA or AAA contrast standards.

• Primary Indigo and its darker variants pass AAA with white text.
• Soft Periwinkle (#9CA9FF) meets AA with dark text (#37383F) and is reserved for secondary text or light surfaces.
• System colors maintain AA contrast for icon and label usage.
• I also verified that system states remain distinguishable under color-blind filters, and I always pair color cues with icons or text to ensure inclusivity.

6) Application principles

To keep the interface cohesive, I defined simple usage rules:

• Primary colors → brand anchors and main CTAs.
• Secondary colors → emotional emphasis and highlights.
• Tertiary colors → flow and supporting states.
• System colors → feedback and communication.

Specific text-on-color pairings:

• #4C4CFF + white → AAA
• #2323AA + white → AAA
• #9CA9FF + #37383F → AA
• #E4E8FF + #37383F → AAA

7) Applying the palette to the UI

In my first sample screen, I used the Indigo icon as the main visual anchor, added a touch of Coral for warmth, and used Mint (tertiary) for directional cues like the arrow — all on a clean white background.

This composition communicates focus, energy, and movement while maintaining balance and readability.

In the second screen, I applied Indigo as the card background with white text and Coral geometric accents. This combination gives a sense of depth and hierarchy — Indigo provides structure, Coral brings liveliness, and the white text ensures legibility and calm contrast.

8) Implementation notes

To make this system scalable, I defined design tokens for each color (e.g., --primary-500, --primary-700, --secondary-300) and specified light/dark variants for future adaptability.

9) Reflection

Throughout this process, I focused on balancing visual personality and usability.

I wanted the product to feel energetic but not chaotic, professional but not cold.

The final color system brings those ideas together — a palette that feels trustworthy, balanced, and emotionally engaging, while remaining fully accessible and functional for everyday use.