Creating Paylocity's new UI color system

Summary

In 2024 I was asked to create a new UI color system for Paylocity's next generation design language. The new color system needed to fix problems with the existing system, enable designers to create fresher-looking experiences, and also incorporate a dark mode strategy for the first time.

I dove into color theory, learned about perceptually uniform color spaces, tweaked the colors in a variety of real design scenarios, and finally arrived at a comprehensive color system to support Paylocity's ambitious design goals.

What was wrong with the old colors?

Paylocity's existing colors had several fundamental issues. The palette lacked visual balance–colors at the same level (like green-300, blue-300, and purple-300) had inconsistent saturation and lightness values.

The darker tones were excessively saturated, and therefore didn't resemble how darker colors typically look in the real world. In fact, high saturation was a problem across the entire palette, creating an overly vivid, almost electric effect in color families like blue and green.

The colors were also defined formulaically in a non-uniform color space, resulting in inconsistencies and colors that simply didn't feel cohesive or visually pleasing despite being mathematically "right."

I audited other color systems

I researched how other companies approach color systems. Some, like Adobe, implemented extremely sophisticated solutions. Others kept their systems remarkably simple. For Paylocity, I aimed for a middle ground that would be programmatic enough to support our accessibility goals without the complexity of systems like Adobe Spectrum.

I plotted HSB values

Early in my process, I plotted the Hue, Saturation, and Brightness values of various color systems to understand their patterns. This revealed that more natural-looking color curves produced visually pleasing results.

However, this exercise also highlighted the limitations of standard color spaces like HSB and pushed me to explore other ways to create color systems. Traditional color spaces like HSB, RGB, and even HSL have major perceptual inconsistencies—equal steps in these models create uneven visual changes, with some colors appearing to shift dramatically while others barely change at all.

I started with Paylocity's brand colors (with some adjustments)

The new color system needed to connect with Paylocity's brand identity. Paylocity's primary brand color is orange, and it's always challenging to work with in interfaces. The extended brand palette of secondary colors had potential, but many were either too dull or unbalanced when compared to each other, and if I used them as-is, it would have been hard to create a fresh-looking design language.

I poked and prodded at the brand colors to create a more balanced foundation for the full palette. Blue became more vibrant and contemporary, while red and orange were toned down slightly. Yellow was brightened to appear less muddy and more cheerful.

Choosing more beautiful colors

When I plotted our brand colors on a color wheel, I noticed many fell on predictable, "crayon-like" positions (e.g., red at 0°, orange at 30°). To create a more sophisticated palette, I subtly shifted these hues to make them feel more distinctive and intentional.

This rotation created useful space between certain colors, allowing me to slot in additional colors like teal and sky blue. After establishing these core hues, I filled other gaps in the color wheel with supplementary colors including different greens, pink, and indigo.

Inherently semantic - every color should have a purpose

A big problem with the previous color system was that designers often had to guess which color to use. Choosing between blue-300, blue-400, or blue-500 became a matter of personal preference, and this led to inconsistency throughout the apps.

I designed the new palette so every color step has a specific UI purpose. This approach was inspired by WorkOS’s radix-colors system. I selected lightness values based on practical use cases, ensuring critical colors met WCAG AA accessibility standards for contrast ratios.

Huetone

I quickly discovered that Figma isn't ideal for serious color system work. Luckily I found Huetone, an open source tool created by Alexey Ardov that let me work in the OKLAB uniform color space. This solved an important problem: it made color adjustments more predictable and consistent. In OKLAB, reducing lightness by 10% in yellow and blue produces the same amount of visual change, which doesn't happen in traditional color models like HSL. Suddenly it became much easier and more intuitive to make palette adjustments and I began to round it into a cohesive system.

Balancing theory with visual appeal

Huetone made it possible to create a mathematically perfect color system that's uniform according to human visual perception and thereore highly predictable to use. In practice, however, I found that this rigid approach sometimes produced colors that wouldn't work well in Paylocity's interface, and were unlikely to every be used.

For certain colors (particularly yellows), I chose to compromise on perfect uniformity with other colors to create more visually appealing colors that would actually be useful for our designers.

Dark theme

I explored multiple approaches to dark mode. Some design systems use a single color ramp for both light and dark modes, while others assign separate dark mode values to each light mode color.

Though a single-ramp approach would have resulted in fewer colors overall, I discovered that truly effective dark mode interfaces require different color characteristics than their light mode counterparts. Dark mode needs subtle variations in the darker range for UI surfaces, with less saturation in the richer colors to avoid looking garish.

Ultimately, I created a system where each light mode color has a corresponding dark mode value with inverted lightness scale—so what appears white in light mode becomes black in dark mode. This approach allowed for precisely tailored dark mode designs that maintain visual harmony.

Conclusion

Candidly, developing this color system challenged me far beyond what I expected. I gained practical experience with color spaces and accessibility standards while also developing a deeper appreciation for just how deep color theory goes.

Ultimately, I'll be able to measure success by how well the system serves our design team. I plan to continue refining the system based on how designers adopt these colors and the challenges they encounter. My next goal is creating educational resources to help the team understand not just how to use these colors, but why they work together—empowering everyone to make thoughtful color decisions that enhance our products.