The Design Decisions Behind DayPilot's New Interface

Every colour, radius, shadow, and animation in DayPilot was a deliberate choice. This is the story of those choices — including the ones we got wrong the first time.

Why violet?

When we started the redesign, we tested 12 different primary palettes with 80 users. Violet consistently scored highest on the attributes we cared about most: trustworthy, modern, and energising without being aggressive.

Blue felt too corporate. Green suggested finance or eco. Purple was close but leaned too mystical. Violet — specifically the HSL range between 258° and 265° — hit the sweet spot.

Building the colour tokens

Rather than picking hex codes, we built every colour as an HSL function. This gives us mathematical consistency across the entire scale and makes generating accessible colour pairs automatic.

/* Our violet scale — generated from a single HSL function */
--violet-50:  hsl(262 100% 97%);
--violet-100: hsl(262 100% 93%);
--violet-500: hsl(262 80%  60%);
--violet-600: hsl(262 72%  52%);
--violet-900: hsl(262 64%  21%);

Dark mode as a first-class experience

Most tools treat dark mode as an inversion of light mode. We built both simultaneously from day one, which means dark mode in DayPilot isn't just dark — it's designed for dark environments.

• Backgrounds use gray-950 (#030712) not pure black — reducing eye strain
• Surfaces are gray-900, gray-800 — creating depth without harsh contrast
• Accent colours are slightly lighter in dark mode for legibility
• Shadows are removed (useless on dark) and replaced with subtle borders

Dark mode should feel like stepping into a dimly lit restaurant — intimate and focused, not like being in a cave.

Micro-interactions

Every interactive element in DayPilot has a micro-interaction. But we follow a strict rule: animations should acknowledge user intent, not demand their attention. Hover states are subtle. Loading states are informative. Success animations are brief and satisfying.