Color - Style guide

Brand colors

Brand colors help users identify one experience from another, especially in a competitive landscape. They are used sparingly—but at regular intervals—to remind users their experience is courtesy of Cars.com.

When designing, it’s tempting to “add a personal touch” with brand colors, but not every solution requires them. Restraint will ensure these colors retain their impact across time and an ever-growing portfolio of products.

Design Token (Sass)	Hex	Descriptive Name	Function
`$sds-color-brand`	`#532380`	Dark Violet	Buttons, ratings
`$sds-color-brand-dark`	`#250858`	Very Dark Violet	Button hover, link hover
`$sds-color-brand-lighter`	`#bb00cc`	Strong Magenta	Links
`$sds-color-brand-accent`	`#00bfde`	Pure cyan	Accent, brick, pinstripe

Functional colors

Functional colors are default and system-oriented recommendations for usage in alignment across our products.

	Design Token (Sass)	Hex	Descriptive Name	Function
	`$sds-color-theme-pricing`	`#aed622`	Strong Yellow	Pricing
	`$sds-color-theme-sponsored`	`#212121`	Very Dark Gray	Sponsored

Gray tones

Gray tones structure a variety of components, giving form without drawing attention. They provide the minimum contrast needed to ensure affordance in both static and interactive designs.

Usage is welcome in text, provided their background and foreground colors display enough contrast to ensure legibility for all users.

Design Token (Sass)	Hex	Descriptive Name	Function
`$sds-color-shade-true-black`	`#000000`	Black	Opacities
`$sds-color-shade-black`	`#212121`	Very Dark Gray	Text
`$sds-color-shade-darker-gray`	`#555555`	Darker Gray	Text (weak)
`$sds-color-shade-dark-gray`	`#767676`	Dark Gray	Disabled text
`$sds-color-shade-gray`	`#959595`	Gray	Inverse weak text
`$sds-color-shade-light-gray`	`#bdbdbd`	Light Gray	Form element borders
`$sds-color-shade-lighter-gray`	`#e6e6e6`	Lighter Gray	Borders
`$sds-color-shade-very-light-gray`	`#f2f2f2`	Very Light Gray	Banding
`$sds-color-shade-white`	`#ffffff`	White	Inverse, inputs

Alert colors

Alert colors are used exclusively for Alerts. Each hue has an accompanying tint to be used for their background only.

Design Token (Sass)	Hex	Descriptive Name	Function
`$sds-alert-color-warning`	`#dfa20b`	Vivid Orange	Warning
`$sds-alert-color-error`	`#cc1100`	Strong Red	Error
`$sds-alert-color-success`	`#93a533`	Dark Moderate Yellow	Success
`$sds-alert-color-notification`	`#5c707c`	Mostly Desaturated Dark Blue	Notification

Social colors are used exclusively to represent social media brands, often in the context of login and share features.

Design Token (Sass)	Hex	Descriptive Name	Function
`$sds-social-color-pinterest`	`#dc4e41`	Bright Red	Pinterest
`$sds-social-color-twitter`	`#55acee`	Soft Blue	Twitter
`$sds-social-color-google`	`#bd081c`	Venetian Red	Google
`$sds-social-color-facebook`	`#1778f2`	Facebook Blue	Facebook

Text colors

The recommendation for text color is the following:

#212121 is the default color for text site-wide.
#555555 is recommended for secondary text with less importance.
#767676 is used for text that should be legible, but is not vital to the user experience.
#212121 is the default color for all headings.

Text on darker backgrounds

#ffffff is the default for inverse text on a darker background.
#959595 is recommended for secondary text with less importance on a darker background.
#ffffff is default for headings on a darker background.
#00BFDE should be used for highlighted words on a dark background

Color contrast accessibility

For recommended accessible foreground and background color combinations, please refer to our Color Contrast page.