FAQ

Spark is a collection of brand, visual, UX, and technical standards brought in a centralized system to help teams build high-quality and cohesive experiences faster.

Here is what makes the Spark Design System:

• A tested, reusable, interconnected design language, that includes systems for colors, spacing, typography, icons and more
• Principles concerning content strategy, design, and motion
• Tight integration with design and development tools and libraries

Use Spark as a companion guide to design products, and as a starting point of reference for design and code you can expand on. Developers and Designers are the primary users and contributors of the system but everyone is encouraged to use it.

Design for speed and collaboration

With a single source of design truth, product and development teams can quickly build new tools and content with confidence, without having to reinvent the design wheel every time. When teams can work effectively together, they get to market faster. This is important because we have to react quickly to competition, market events, user feedback, and real-time data.

Design at scale

With brand touchpoints reaching over multiple channels and platforms, consistent user experience can be assisted by leveraging a central design language. Building a library of design patterns, rules, and UX guidelines prevent inconsistencies when shipping products at scale.

In summary, a design system helps:

• Reduce design debt.
• Eliminate inconsistencies.
• Speed up the product and development process.
• Make our users happy by creating a cohesive experience.

The Spark Design System is a tool to help speed up both design and development. Current Cars.com product design uses Spark and engineering development libraries also make use of Spark styles. Designers and developers should all utilize Spark when beginning and implementing their projects today.

With that said, Spark is intended to be extended and improved upon, as well. The intent of the Design System is not to quell innovation, but rather to expediate it. In Spark we have a predefined toolset of common, reusable basic elements that can be combined to create greater experiences. It is expected that these can and should be changed, added to, improved upon, and then eventually folded back into the system for others to use.

The Spark guidelines are here as a standardized starting point you can expand on. By placing these rules, we are enabling users to focus on solving hard problems and create a better experience - not worrying about the basics.

As a rule of thumb:

1. Start with the toolbox we provide - don’t re-invent the wheel.
2. Expand if need be to fit your needs.
3. Test and bring back your learnings (experiments, user testing).
4. Fold your successes back into the system.

We are continuing efforts to explore incoporating mobile app design languages into Spark.

Review the list of Browsers expected of Cars.com delivery teams, the Spark website and its components. Currently, the browserslist setting is "last 2 version", "> 1%", "not dead" .

The Spark documentation website is optimized for the latest versions of Apple Safari, Google Chrome, and Firefox.

For Spark documentation site bugs, pattern example bugs, or other inconsistencies, please email designsystem@cars.com.

We will provide regular updates on our work and major releases in one of the following ways:

• What’s new section - new releases, messages from the Spark team, highlights from team members, and more.
• Changelog - On the Spark website, a comprehensive list of all updates. (coming soon)