alert-circle An exclamation point inside of a circle. alert-triangle An exclamation point inside of a triangle shape. arrow-down-left An arrow pointing down and to the left. arrow-down-right An arrow pointing down and to the right. arrow-down An arrow pointing down. arrow-left An arrow pointing left. arrow-right-thick A thick arrow pointing right arrow-right An arrow pointing right. arrow-up-left An arrow pointing up and to the left. arrow-up-right-thick A thick arrow pointing up and to the right arrow-up-right An arrow pointing up and to the right. arrow-up-thick A thick arrow pointing up arrow-up An arrow pointing up. award A award bell A bell. calendar A calendar icon. camera-off A camera that is deactivated. camera A camera. check-circle A checkmark in a circle. checkmark A checkmark. chevron-down A chevron arrow pointing down. chevron-up A chevron arrow pointing up. chevron A chevron arrow pointing down. chevron A chevron arrow pointing down. chrome Chrome browser logo. close-circle An x in a circle. close A x shape. door A car door. edge Edge browser logo. ellipses An ellipses shape. engine A car engine. envelope A closed envelope. explorer Internet explorer logo. eye-off An eye that is deactivated. eye An eye. facebook Facebook logo. file-text A piece of paper with lines on it. file A blank piece of paper. firefox Firefox browser logo icon-flame A flame. fwd A car drivetrain. gear A gear with multiple teeth. grid A 2x2 grid. heart An empty heart. height-width Arrows indicating height and width measurement. home A home icon. info THe letter i in a circle. instagram Instagram logo. link A chain link. linkedin Linkedin logo. map-marker A map marker pin. maximize Four corners containing a plus sign. menu Three lines signifying a menu. message-circle A speech bubble. minus A minus dash. mpg A car dashboard gauge. opera Opera browser logo. pause A pause symbol. pencil A pencil. phone A phone handset. pinteest-disc Pinterest logo in a disc. pinterest Pinterest logo. play A play button. plus A plus symbol. safari Safari browser logo. search A magnifying glass. seat A car seat. shield A shield sliders A group of control sliders. square A square with rounded corners star A star. tag A shopping tag. thumbs-down A hand with the thumb pointing down. thumbs-up A hand with the thumb pointing up. trash A trash can. trophy A trophy. truck A truck icon. twitter Twitter logo. user-circle An outline of a person in a circle. user An outline of a person. video A video camera. youtube Youtube logo. zoom-in A magnifying glass with a plus in the center alert-circle An exclamation point inside of a circle. alert-triangle An exclamation point inside of a triangle shape. arrow-down-left An arrow pointing down and to the left. arrow-down-right An arrow pointing down and to the right. arrow-down An arrow pointing down. arrow-left An arrow pointing left. arrow-right-thick A thick arrow pointing right arrow-right An arrow pointing right. arrow-up-left An arrow pointing up and to the left. arrow-up-right-thick A thick arrow pointing up and to the right arrow-up-right An arrow pointing up and to the right. arrow-up-thick A thick arrow pointing up arrow-up An arrow pointing up. award A award bell A bell. calendar A calendar icon. camera-off A camera that is deactivated. camera A camera. check-circle A checkmark in a circle. checkmark A checkmark. chevron-down A chevron arrow pointing down. chevron-up A chevron arrow pointing up. chevron A chevron arrow pointing down. chevron A chevron arrow pointing down. chrome Chrome browser logo. close-circle An x in a circle. close A x shape. door A car door. edge Edge browser logo. ellipses An ellipses shape. engine A car engine. envelope A closed envelope. explorer Internet explorer logo. eye-off An eye that is deactivated. eye An eye. facebook Facebook logo. file-text A piece of paper with lines on it. file A blank piece of paper. firefox Firefox browser logo icon-flame A flame. fwd A car drivetrain. gear A gear with multiple teeth. grid A 2x2 grid. heart An empty heart. height-width Arrows indicating height and width measurement. home A home icon. info THe letter i in a circle. instagram Instagram logo. link A chain link. linkedin Linkedin logo. map-marker A map marker pin. maximize Four corners containing a plus sign. menu Three lines signifying a menu. message-circle A speech bubble. minus A minus dash. mpg A car dashboard gauge. opera Opera browser logo. pause A pause symbol. pencil A pencil. phone A phone handset. pinteest-disc Pinterest logo in a disc. pinterest Pinterest logo. play A play button. plus A plus symbol. safari Safari browser logo. search A magnifying glass. seat A car seat. shield A shield sliders A group of control sliders. square A square with rounded corners star A star. tag A shopping tag. thumbs-down A hand with the thumb pointing down. thumbs-up A hand with the thumb pointing up. trash A trash can. trophy A trophy. truck A truck icon. twitter Twitter logo. user-circle An outline of a person in a circle. user An outline of a person. video A video camera. youtube Youtube logo. zoom-in A magnifying glass with a plus in the center facebook Facebook logo. instagram Instagram logo. linkedin Linkedin logo. pinteest-disc Pinterest logo in a disc. pinterest Pinterest logo. twitter Twitter logo. youtube Youtube logo.
Spark logo Spark Design System
PRINCIPLES

Design principles

Guide design with underlying principles that inform our decision-making process

Simple

Interacting with Cars.com should be simple and straightforward across all of our experiences, with each touchpoint along the way clear, easy to understand, and streamlined.

  • Create useful wayfinding —- user knows exactly where they are, why, and what to do next
  • Willingly take on system-complexity in service of making things easier for users
  • Use a content structure and language that strives for clarity and solves for understandability
  • Reduce or eliminate jargon in favor of the language people normally use and understand
  • Meet people where they are: Give them the information they need in that moment to accomplish their goal
  • Carefully consider broader context and user expectations and design for this complexity

Personal

The more we get to know our customer, the better we’ll be at providing them with the information they need, when they need to see it. It’ll enable us to be predictive, rather than reactive, in helping our customers accomplish their goals.

  • Use what they explicitly share, what we can implicitly infer, and knowledge of their particular use context to create memorable, meaningful experiences
  • Tailor the level of personalization to be appropriate for the context and expectations; for example, displaying basic contact info vs. financial information
  • Support people feeling in control of their experience - also connected to the Empowering Principle

Empowering

Our experiences will empower people by being consistently trustworthy and credible. We aren’t afraid to put our independent perspective on display. People who interact with us will become more informed, more confident they’re making the best choices, and feel in control of their own destiny.

  • Work to clearly express our independent perspective, and be willing to fight for those who interact with us
  • Make the specific benefit for interacting with us clear to each individual user
  • Thoughtfully consider and design for each user’s specific goals
  • Always position our experience as a tool in service of the user; it should never feel like it’s the other way around
  • Use context to create more powerful experiences
  • Use our expertise and knowledge to guide people, without being too heavy-handed
  • Ensure the accuracy and completeness of the information we provide at all times
  • Acknowledge that people have options, and demonstrate our willingness to repeatedly win their trust and loyalty

Effective

Our experiences should make it easy for people to accomplish their goals and move forward through the system with minimum friction and effort. Each touchpoint and interaction should visibly demonstrate progress toward our understanding of user goals.

  • Develop a clear understanding of people’s needs and goals before creating a solution
  • Ensure that people can move from one step to the next with ease and clarity
  • Guide people to the next step in a way that is friendly and encouraging
  • Be clear about where the user is in the flow, and how close to the finish line they are
  • Remove noise and distractions that don’t present clear value
  • Consider both absolute measurements of task time as well as perception of ease
  • Make people’s progress and effort visible and available across different channels

Dependable

To help people in a meaningful way, our experiences need to work reliably –- by being available, fast to respond, and easy to use. Our dependability provides comfort and credibility to people interacting with us and lets them know we’re looking out for them.

  • Work to enable and communicate safety, control and transparency in our systems
  • Focus on ensuring information accuracy, completeness, and freshness, which are critical to create dependability
  • Value and champion technical performance; it’s critical in us being dependable, and not a separate component of people’s experience with us
  • Design experiences that reflect alignment with people’s expectations
  • Aim for coherence first, and then consistency. Consistency is a means to serving people dependably, but not the aim in and of itself
  • Use approachable, natural language to establish comfort, maintain credibility, and build trust
  • Design for coherence with our brand and quality of experiences; together they should reinforce people’s trust in us