This article was written by Ricardo Trindade, Design Lead at SPREAD AI. Ricardo leads the Design team, driving collaboration and excellence across SPREAD’s platform ecosystem. With a background spanning graphic, industrial, and digital product design, he ensures a consistent, user-centric experience that makes complex engineering solutions intuitive, coherent, and pleasant to use.

Products don’t stand still. They grow, branch, and welcome new capabilities over time. Along the way, small visual choices accumulate: a gray here, an accent there, a slightly different button state somewhere else. Reasonable in isolation, those choices can make a single suite feel like distant relatives instead of a tight-knit family.

This is the story of how we aligned colors across our product suite—so no matter where you enter, it looks and feels like the same, confident product.

The opportunity: turning growth into cohesion

As our products evolved, different entry points developed their own gray ramps and accents, influenced by past brand directions and by external or embedded tools over the years. That diversity added character—but also differences in how surfaces and states appeared. This color alignment turns that healthy evolution into a cohesive visual system.

For customers and power users who move between multiple entry points, this work makes navigation feel more effortless: screens feel familiar, and the hierarchy and states meet expectations more consistently.

The catalyst: a sharper brand, a clearer north star

Marketing refreshed our brand foundation around two core colors: a confident, neutral dark gray and a punchy orange accent. This was a clear, visible shift—bringing stronger contrast, cleaner hierarchy, and a sharper tone that better fits our customers.

That created an opportunity (and a responsibility) for Product: our UI needed to reflect the same clarity and confidence.

Our approach: preserve what users rely on, remove what gets in the way

We didn’t set out to optimize abstract cognitive load or reinvent component logic everywhere. The primary motivation was simple: consistency. We had multiple products using slightly different color logic and gray usage. Instead of reconciling every edge case, we chose to standardize on the approach already used by most apps and apply it across the suite.

Practically, that meant three steps:

1. Audit
   We inventoried the colors across our product entry points, including places influenced by external/embedded tools. We noted where tints crept into grays and where accents diverged.

2. Measure
   We measured perceptual lightness (L*) for existing neutrals to understand contrast relationships users already rely on.

3. Neutralize (not just replace)
   Instead of blindly replacing colors, we removed hue from grays while matching the original lightness. That means surfaces and texts keep their familiar contrast while losing distracting color casts.

This sequence let us deliver alignment quickly and safely. We improved cohesion without asking Engineering to re-architect components or interaction models. It’s alignment, not disruption—and it makes the experience feel more polished everywhere.

What changed—and what didn’t

Changed

• Cleaner neutrals across surfaces, text, and borders: same lightness, no stray tints.

• A clear anchor in structural chrome: dark neutral gray now grounds the sidebar and primary text (where contrast allows).

• A shared approach: we adopted the design system logic used by most apps and applied it across the suite.

Didn’t change

• Your workflows: this is a visual alignment, not a behavior change.

• Component logic per system (for now): we updated color values, not how each design system applies states. You may still notice minor differences between, say, a switch in one environment and a switch in another. That’s a conscious choice to keep the rollout feasible while delivering a clearly improved, on-brand look.

• Use of orange accent: remains reserved for logo/branding and, for now, AI notices/features. Keeping orange focused in these places helps it stand out where it matters most, instead of competing with everyday UI elements.

Why this matters (for designers)

Standardizing colors across multiple design systems and embedded surfaces isn’t a “pick a new palette” exercise—it’s a systems problem.

• Pick one approach. Trying to reconcile every historical rule stalls momentum. Standardizing on the majority approach reduces cross-product variation fast.

• Start feasible, then refine. Keeping per-system component logic intact allowed us to make a meaningful improvement quickly, without drifting schedules or risking regressions. Design systems mature iteratively.

• Preserve what users rely on. Matching L* (perceptual lightness) keeps contrast relationships stable, so changes feel cleaner rather than “different.”

What this means for customers and power users

• Consistent look across apps. Screens feel related from place to place.

• Less visual noise. Fewer stray tints; a clearer read of hierarchy.

• Readability you can trust. Contrast is preserved or improved, so text and icons remain clear in all states.

• Predictable interaction cues. Hover, active, focus, and disabled states look and feel more consistent—without changing how anything works.

A quick look at the results

Sidebar — before & after

Neutralized grays: lightness stays constant, hue vanishes — before & after

Studio app — before & after

Where we’re still iterating (and what’s next)

Because different design systems have historically applied color logic differently, some components may still look slightly different across products (e.g., switches, tabs). In this phase, we intentionally updated color values only and adopted the majority approach. That choice made the rollout feasible while delivering an on-brand look and feel throughout the suite.

With a shared color foundation now in place, future iterations can focus on smoothing these remaining differences—building on this work to make interactions feel as unified as the visuals.

Lessons we’re taking forward

• Agree on the approach first. Alignment goes faster when everyone knows which design system rules are the north star.

• Measure before you move. Lightness and contrast are the guardrails that keep polish from becoming a regression.

• Tell a simple story. “Cleaner, clearer, consistent—without changing how you work” is what users feel. That’s the promise to keep.

Thank you

Thanks to everyone who contributed feedback along the way—Designers, Engineers, PMs, and customers who pointed out the little things that didn’t feel quite right. Those details matter. This alignment helps our product look the way it works: confident, modern, and cohesive.