Data-Driven Design: Why We Redesigned Our Color System for Conversions

Most B2B sites look the same. A gradient hero, a blue primary, a green "Get Started" button. We wanted A2ZAI to feel different — like a company that actually thinks about the details.

At A2ZAI, we apply data-driven decision making to everything we build — not just the ML models and AI pipelines we deliver for clients, but our own products, processes, and yes, our website. So when we rebuilt our color system, we didn't start with aesthetics or gut instinct. We started with research: color psychology studies, CTA conversion benchmarks, WCAG contrast standards, and the design patterns behind the highest-performing B2B sites. Every choice below is backed by evidence, because that's how we work.

Here's the thinking behind every choice.

Navy for trust, not for trend

We picked deep navy (oklch hue 255) as our brand color for a specific reason: it signals competence and reliability without the corporate sterility of pure blue.

There's research behind this. A study published in the Journal of Business Research found that blue-family colors increase perceived trustworthiness in professional services contexts. McKinsey, Deloitte, and IBM all anchor their palettes in this range — not because they're copying each other, but because it works.

But navy does something regular blue doesn't. It carries depth. On dark backgrounds — our default dark mode uses oklch(0.170 0.020 258) — navy creates a layered, premium feel. Think Stripe's dashboard, Linear's interface, or Vercel's marketing pages. These companies chose deep, muted backgrounds because they let content breathe and signal technical sophistication.

We built a full 11-step scale from brand-50 to brand-950 using oklch color space, which gives us perceptually uniform lightness steps. This means our navy looks consistent across light mode, dark mode, and every surface in between.

Teal for differentiation

Every consulting site has blue. Almost none have teal.

We added a teal accent (oklch(0.65 0.155 185)) as our secondary color — used for hero glows, highlighted text on dark backgrounds, and secondary interactive elements. It creates visual interest without competing with the navy.

The key constraint: teal never appears on CTAs. It's a recognition color, not an action color. When you see teal on our site, it's decorative or informational. When you see orange, it's time to do something.

Orange CTAs: contrast drives clicks

This was the most deliberate choice in our entire palette. Our call-to-action buttons use oklch(0.75 0.17 55) — a warm, saturated orange that hits 7.8:1 contrast ratio against our navy-950 text.

Why orange specifically?

HubSpot's extensive A/B testing data shows that high-contrast, warm-colored CTAs consistently outperform cool-colored alternatives. Red and orange buttons outperformed green by 21% in their most cited study. The mechanism isn't the color itself — it's the contrast against the surrounding palette. On a navy-dominant page, orange is the furthest thing from blending in.

We pair every orange CTA with dark navy text (text-brand-950) instead of white. This isn't just an accessibility win (though it clears WCAG AAA with room to spare). Dark text on a warm background feels more grounded and intentional than white text, which can feel washed out.

Dark mode as the default aesthetic

We designed dark mode first. Not as an afterthought — as the primary experience.

Our dark background isn't black. It's oklch(0.170 0.020 258) — a deep navy with just enough color to feel warm. Pure black (#000) creates harsh contrast with text and makes screens feel like they're boring a hole into your eyes at night. Our navy-tinted dark gives the page depth and pairs naturally with our brand colors.

Card surfaces sit at oklch(0.215 0.018 258), creating a subtle elevation hierarchy without relying on shadows (which look odd on dark backgrounds). Borders use oklch(1 0 0 / 10%) — white at 10% opacity — which adapts naturally to any surface color.

This approach follows what Stripe popularized and Linear refined: dark interfaces that feel premium rather than just "inverted." For an AI/ML consulting company, this aesthetic signals that we live in the same technical world as our clients.

Accessibility isn't a checkbox

Every color pairing on our site meets WCAG AA at minimum, and our primary text and CTA combinations hit AAA. But we went beyond contrast ratios.

We use oklch color space for our entire palette. Unlike hex or HSL, oklch is perceptually uniform — a 0.1 change in lightness looks like the same amount of change regardless of hue. This means our color scales are genuinely consistent, not just mathematically spaced.

We also respect prefers-reduced-motion for all animations and ensure that color is never the sole indicator of meaning. Every badge, status indicator, and interactive element communicates through shape, text, or iconography in addition to color.

The system in practice

Here's how these decisions map to actual UI patterns:

• Primary buttons: bg-cta hover:bg-cta-hover text-brand-950 font-semibold — orange with dark text, impossible to miss
• Secondary buttons: navy outline on light, navy-400 on dark — clearly interactive but visually subordinate
• Links: text-brand-500 in light mode, text-brand-400 in dark — distinguishable from body text in both themes
• Cards: bg-card with hover:-translate-y-1 hover:shadow-lg — subtle lift on hover, no color change needed
• Badges/tags: bg-secondary text-secondary-foreground — muted, informational, never competing with CTAs

The result is a site where every color earns its place. Navy builds trust. Teal creates recognition. Orange drives action. And dark mode makes the whole thing feel like it was built by people who care about craft.

What we'd tell other B2B teams

If you're redesigning a color system for a professional services site, here's what we learned:

1. Start with intent, not inspiration. Don't browse Dribbble for color palettes. Decide what each color needs to do, then find the right value.
2. Use oklch. It's the first color space that makes programmatic palette generation actually predictable. Your designers and developers will thank you.
3. One CTA color, used consistently. If everything is a call to action, nothing is. Pick one high-contrast color and use it only for primary actions.
4. Design dark mode first. It's harder, and if it looks good dark, it'll look great light. The reverse isn't always true.
5. Test contrast ratios early. WCAG compliance isn't something you bolt on at the end. Build it into your color selection process from day one.

Working on a similar problem? Let's talk about how we can help.