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
CONTENT-STRATEGY

Grammar and mechanics

Guidelines and rules to ensure consistency in our communication and enhance our credibility.

Capitalization

  • Cars.com is always capitalized, and always with “.com”.
  • Use title case for global navigation, and sentence case for all other UI copy, including headings (h1), sub-headings (h2), and button copy. Sentence case conveys a friendlier, more conversational tone than all caps or title case.
  • Editorial content is an exception. With editorial content. use title case for article names and list items. Use sentence case for section separators in the body copy of an article.
  • Use title case for phrases or content that are treated as proper nouns, i.e. Cars Privacy Statement (proper noun), Certified Pre-Owned, and Multicar Comparison.

Punctuation

  • Use “&” vs. “and” in labels. It’s space-economical and easier to parse.
  • Add periods to the end of complete bulleted sentences. For bulleted lists that are not comprised of complete sentences, do not include a period.
  • Use commas in numbers greater than 3 digits, such as 2,500
  • Use the Oxford comma; i.e. include a comma after the last item in a list of three or more items, before “and” or “or.” It helps break up information, assisting with understandability and making content easier to parse.
Get answers, see the car, or find a good time for a test drive.
  • However, in interface copy, there’s likely more digestible ways to share whatever information you’re utilizing the commas for. Consider whether a bulleted list or some other formatting mechanism might be more helpful.

Explore payments upfront

  • Compare and save with real-time bank offers
  • Customize your monthly payment
  • Get an instant trade-in estimate
  • Use exclamation points sparingly, never using more than one exclamation point in a message (nothing should get us that excited). Too many can come across as overly excitable, and lessen our credibility.
  • If you put a question mark at the end of a sentence, make sure we’re really asking a question and the answer is easy—either as a button or input, or in the form of a link to “learn more.” Like exclamation points, they should be used sparingly, otherwise our whole product becomes one big Q&A.
  • An em-dash (—, —) denotes a break in a sentence or sets off parenthetical statements.
The Hyundai Santa Fe — Cars.com’s SUV of the Year — is a great family car.
  • An en-dash (–, –) indicates spans or differentiation, where it may be considered to replace “and” or “to.”
$30–35,000
  • A hyphen (-) joins words and separates syllables of a single word.
full-size, all-wheel drive
  • A minus symbol (−, −) should be used when expressing math operations.
4 − 2 = 2

Headings and subheadings

  • Headings provide users with the MOST important information that will draw attention, spur action, or otherwise solve the user problem. Subheading content should never be repetitive, and should only be used to provide additional necessary context. Otherwise, it’s just clutter.

Spelling and formatting

  • Use contractions (“didn’t”, “can’t”). They’re more natural and conversational.

Personal pronouns

  • Avoid gender identifiers like “he”, “she”, “her”, or “him” when writing about cars.
  • In microcopy conversations, Cars.com is “we”; the user is “you” or “your.”
Do use “you” or “your” when your product is asking questions, giving instructions, or describing things to the user.

Just imagine what a personal assistant might say. “Your” makes the product sound conversational — like it’s walking the user through a task.

Do use “my” when you want to emphasize privacy, personalization, or ownership and the user is fully driving the interaction with the product, I.e. “My Profile.”

Since it can be confusing, only add “me, my” if it’s absolutely necessary for clarity.

Don't use “me” or “my”, and “you” or “your”, in the same phrase.

Date

Spell out the month’s full name whenever possible. For example, “October” vs. “Oct.” If there are significant space constraints, use standard 3-letter abbreviations, i.e. Oct. Don’t ever write dates numerically, like 07-02-14.

Do

Saturday, September 15, 2019
September 15, 2019
Sept 15, 2019

Don't

Thur, October 15
October 15, ‘15
10/15/15

Also, don’t use ordinal indicators, which are words representing position or rank in a sequential order (e.g. 1st, 2nd, 3rd, 4th).

Do

January 23–April 1

Don't

January 23rd–April 1st

Time

  • Use the 12-hour clock, followed by am or pm (no punctuation.)
  • Do not include a space after the last number.
Your package will arrive at 12:35pm
  • If indicating a time zone is necessary, use the time zone’s abbreviation and write it after am or pm
4:00pm CT
  • To show a time range, use an en dash and include the am/pm after both times.
3:00pm–4:00pm
  • If indicating both the date and time, separate them with the word “at”, rather than with a comma.
October 15 at 3:00pm.

Numbers

  • Use 3-digit grouping, separated by a comma, for numbers greater than 999.
560
1,250
150,000
  • For percentages, leading zeroes should be included for all values less than 0, and limit decimals to 2 places. Always include the percentage symbol.
0.2%
1%
1.25%
1.3%

If the user is required to make a choice in a dropdown to move on in a flow or choose a call-to-action, use “Choose a [make/model/etc]” as the default language for the value.

The label reflects whatever that section is about, so “Make”, “Model”, etc.

Sign in vs. log in

We use “sign in” vs. “log in.” Log-in is too technical. Sign in is more natural and less jargon-y. This means we also use “signed in” vs. “logged in” and “sign out” vs. “log out.”

Abbreviations

Leave out the period in abbreviations when the word can stand on its own.

  • Use “Min price” and “Max price” as labels in dropdown menus.
  • Abbreviations such as estimated (Est.) and and average (Avg.) should still use the period.
  • In conversation and paragraph text, spell out “miles” and “months.” When used within data points, abbreviate to “mi.” and “mo.”
  • For more abbreviations, see the Vocabulary page.

Places

State abbreviations

When providing addresses on the site, use abbreviations for states. Spelling out state names can be cumbersome from a character standpoint, and abbreviations (postal standard) are widely understood.