ClearPlan - Daily Task Manager

Colour System Project – Beginner Case Study

This project was created as part of a beginner UI exercise to design a basic colour system and apply it to a simple interface. The concept was inspired by task manager tools, and the goal was to build a palette that feels clear, accessible, and a little playful, while still being functional and structured enough to support user interaction.

The design is not intended to replicate any specific platform but to explore how brand colours can be used thoughtfully across a small interface example.

Goals:

• Create a visually consistent and balanced colour system
• Apply colours to a functional UI layout
• Ensure accessibility through contrast and hierarchy
• Explore tone and emotion through colour use

Colour Choices:

• Primary – #3A405A
• A dark blue-grey used for key actions and interface text. It sets a focused and stable tone without feeling too corporate or cold.
• Secondary – #D81159
• A bold magenta used for secondary actions and error-related elements. This adds vibrancy and contrast to the palette.
• Tertiary – #218380
• A green-teal tone used for success indicators such as a "Completed" status tag. It brings balance and a calming note to the palette.
• Neutral – #E8D6CB
• A soft beige used as a background colour throughout. It helps create a gentle and inviting space while keeping the interface easy to read.
• System – #FEC601
• A bright yellow used only in the alert banner to highlight due dates or urgent information. This was paired with dark text to maintain readability and contrast.

Application:

The colours were applied to a simple mobile UI mockup, which includes:

• A task card with a title and completion tag
• A yellow alert bar displaying a due date
• Primary and secondary action button

To soften the visual weight and increase visual hierarchy:

• The “Save” and “Completed” buttons were styled using 80% opacity
• The “Cancel” button was styled using 60% opacity

This allowed the primary actions to remain dominant while helping secondary actions feel lighter and less overwhelming.

Accessibility:

The colours were checked for WCAG contrast compliance. Key text elements and UI interactions meet the minimum contrast ratio of 4.5:1. Bright elements like yellow were paired with darker colours to ensure legibility.

Rationale:

This project helped me learn how to make design decisions based on contrast, emotion, and usability — even in a simple layout. It’s not perfect, and I’m still developing my skills, but I now feel more confident about working with colour systems in a structured and thoughtful way.