1st June 2025 - James Taylor

The Evolution of the Vonage Design System: From Volta to Vivid

At Vonage, the journey to our current design system has been one of iteration, learning, and continuous refinement. What began as a simple pattern library evolved into a mature, semantically versioned system used across a growing suite of products. In this post, we’ll walk through the history of our design system—from its humble beginnings with Volta, through the material-inspired Vivid 2, to the robust and flexible system we now call simply Vivid.

Our story begins with Volta, Vonage’s original design system. Volta was a pattern library composed of HTML patterns and JavaScript libraries. It provided a visual language and a set of reusable UI patterns that helped unify the look and feel of Vonage products. But as our products and teams grew, Volta started to show its limitations.

Volta wasn’t truly component-based in the modern sense—it lacked encapsulation, theming flexibility, and the infrastructure needed to support diverse product teams working at scale. It served its purpose well at the time, but it became clear that we needed something more robust.

To replace Volta, we introduced Vivid 2, a complete rethink of our design system. Vivid 2 was built on Material Web Components, leveraging the Material Design foundation to accelerate development and ensure accessibility and performance out of the box.

While Vivid 2 gave us a stronger architectural foundation with real web components, it came with trade-offs. Material Design’s opinionated aesthetics sometimes conflicted with Vonage’s evolving brand identity, and customization was more complex than anticipated. Over time, our teams needed a system that felt more ours—more aligned with Vonage’s voice and visual language.

Enter the latest evolution of our design system: Vivid.

Internally, this project started as “Vivid 3”—the third generation of our design system. The name stuck for a while, but it introduced confusion. We were already planning to use semantic versioning to track changes, which meant the “3” in “Vivid 3” quickly became ambiguous. Was someone referring to version 3.0.0? Or the third generation of the system?

To reduce confusion, we decided to drop the version number from the name. Now it’s simply Vivid—a modular, accessible, and brand-aligned design system built on web components. It’s tailored to Vonage’s design principles and offers a developer-friendly foundation for rapid UI development.

Vivid is semantically versioned. That means the current version might be 4.12.0, even though it’s still the third generation of our design system. This approach gives us the flexibility to evolve the system over time without rebranding every release.

• Major versions (e.g., from 4.x to 5.x) represent breaking changes or major new paradigms.
• Minor versions introduce new components, patterns, or enhancements.
• Patch versions include fixes and behind-the-scenes improvements.

This versioning model allows us to iterate continuously and predictably, without needing to rename or relaunch the system. It’s how we plan to move forward—building on a stable foundation while responding to the changing needs of our product teams and customers.

The latest version of Vivid reflects years of learning across multiple generations of design systems at Vonage. It’s flexible, scalable, and is becoming deeply integrated into our product development workflow.

As we look to the future, we’ll continue to improve Vivid, guided by feedback and evolving design standards. The system may evolve to version 5, 6, or beyond, but the name stays the same: Vivid.

Because great design systems don’t start over—they grow.