I built Spark, Cars.com’s design system, from the ground up — from the first research session to a mature, Figma-integrated system used across the product org.
Before Spark existed, Cars.com was running on a partially integrated pattern library that had never quite gotten off the ground. When the company finally committed to building a real design system, I led that effort as Design Manager, with a small team of two designers and a player-coach role as the primary developer on the project.
What followed was a few years of work that took Spark from nothing to a named, shipped, and actively maintained system. Here’s how that arc unfolded.
Research first
Before anyone wrote a line of code or designed a single component, we spent roughly three months doing research. We interviewed individuals and groups across product, design, and engineering to understand how people actually worked and where existing tools and resources were letting them down. We ran workshops, administered questionnaires, and did competitive analysis across design systems from companies around the world.
That research shaped everything: what went into Spark, what stayed out, and how we organized it. Read more about the research process.
Building the docs site
With the research done, I built the Spark documentation site myself using Hugo, an open-source static site generator. Extending Hugo beyond its intended use as a blogging platform took some work, but the result was a fast, flexible documentation portal that my team of designers could contribute to by writing Markdown and submitting pull requests.
I also built and integrated the design token library, which became the connective tissue between the docs site and our engineering implementations. Read more about the Hugo build.
Shipping Spark
The system launched during a company-wide brand realignment, which turned out to be a good stress test. New design elements and specs rolled out through the token system and distributed to product teams cleanly, which helped prove the value of what we’d built. The system was named Spark, the logo was designed, and version 1.0 shipped to a wider internal audience shortly after.
Read more about the Spark Design System.
Presenting the work
A few months after v1.0 launched, the Spark team presented at the Chicago Design Systems Meetup. We talked through the research and discovery process, which gave us a chance to tell the story to a broader audience and get feedback from people who hadn’t been close to the work. Read more about the meetup presentation.
Evolving into Figma
A few years later, I led a transition away from Sketch, Invision, and Zeplin to Figma as our primary design tool. That meant rebuilding the Spark UI-kit from scratch in Figma with component variants, interactive components, auto layout, and token-aligned shared styles. Each component got its own Figma file for cleaner versioning and permissions management, and I built onboarding resources to get the design team up to speed. Read more about the Figma UI-kit.