Color System for Productivity Tool

In this colour system project for the HotJar website, a comprehensive palette of primary, secondary, and system colours has been developed to enhance user experience, brand consistency, accessibility, and adaptability, including dark mode. The palette is designed to support HotJar’s functionality in tracking and analysing website behaviour, while offering a visually appealing and accessible interface across different modes.

Here's an overview of what's been done:

1. Primary Colours:

• Four primary colours (#3F61C5, #F2665A, #CCE2EA, and #344169) have been chosen to define HotJar’s brand identity. These colours strike a balance between professionalism, approachability, and energy, providing a consistent and recognisable look for the website.

1. Secondary Colours for Dark Mode:

• A special set of secondary colours was created to optimise dark mode. These colours were chosen to complement the primary palette, ensuring good contrast and readability in low-light environments. They highlight key UI elements, call-to-actions, and content, while preventing eye strain and enhancing user comfort when using the site in dark mode.

1. System Colours:

• System colours, including green for success (#4CAF50), red for errors (#D32F2F), amber for warnings (#FFC107), and a muted grey for inactive elements (#B0B3C1), were selected for clear communication of alerts and statuses. These colours are carefully designed to remain visible and effective in both light and dark modes, ensuring critical messages are always easy to spot.

1. Accessibility:

• The colour system is built with a strong focus on accessibility. High contrast between elements ensures legibility, especially for users with visual impairments. The palette works across different devices and lighting conditions, ensuring the HotJar website remains user-friendly and accessible in both light and dark modes.

1. Emotional Impact:

• Each colour was selected based on the emotions it evokes, such as trust, energy, calmness, or urgency. This allows HotJar’s website to create an engaging user experience that is both intuitive and visually cohesive, regardless of whether users are in dark or light mode.

Overall:

This colour palette supports HotJar’s brand identity while offering flexibility for dark mode. The thoughtfully designed colours enhance usability, ensuring the website is accessible, visually pleasing, and easy to navigate in all environments. The palette reinforces the brand's values while adapting seamlessly across both light and dark mode user preferences.