Trello Color System

Project Description

This color system was created in Figma and developed to support Trello’s brand identity. The project was focused on clarity, accessibility, and emotional impact. Each color group was carefully designed to improve usability while maintaining a vibrant and engaging user experience.

Primary Colors

The blue palette has long been central to Trello’s brand, symbolizing trust, calmness, and balance. These core values help create a digital environment that feels both safe and productive, ideal for collaborative workflows.

Secondary Colors

Used to complement the primary palette, the secondary colors bring energy, creativity, and a touch of insight. They’re designed to elevate the user experience by adding vibrancy without overpowering the interface.

Tertiary Colors

These colors support finer visual elements and details, blending seamlessly with the rest of the palette. They contribute to the overall cohesion of the system and add liveliness in subtle, supportive ways.

System Colors

For communicating states like warnings, confirmations, and information, system colors follow universally recognized visual cues: red for alerts, green for success, and blue for informational messages. These ensure users can quickly interpret important feedback.

Accessibility & Contrast

Color contrast was a key consideration in this project. The system ensures that all text remains legible across various backgrounds and lighting conditions.

Application in UI

The system is flexible and expressive. For example, panels dominated by primary colors establish a sense of trust and structure, while those featuring secondary colors encourage creativity and innovation. In other areas, playful combinations of colors and backgrounds reflect Trello’s belief that work can—and should—be both productive and fun.