Colors

Fill Colors

Solid provides BuzzFeed's brand colors, as well as some lighter and darker variations. Though there are no specific limitations on where these fills may be used, it's important to take into account the context and previous usages when using these fills as part of your design.

.fill-red #ee3322, $fill-red

.fill-red-lighter #feebe9, $fill-red-lighter

.fill-pink #f43192, $fill-pink

.fill-blue #0f65ef, $fill-blue

.fill-purple #6645dd, $fill-purple

.fill-yellow #ffee00, $fill-yellow

.fill-yellow-lighter #fffab6, $fill-yellow-lighter

.fill-orange #f47f16, $fill-orange

.fill-promoted-orange #f7ad19, $fill-promoted-orange

.fill-teal #0dccb0, $fill-teal

.fill-green #68af15, $fill-green

.fill-green-lighter #e1efd0, $fill-green-lighter

.fill-gray #aaaaaa, $fill-gray

.fill-gray-lighter #f4f4f4, $fill-gray-lighter

.fill-gray-darker #222222, $fill-gray-darker

.fill-white #ffffff, $fill-white

Social Fill Colors

The following colors are only to be used when referencing the associated social network.

.fill-facebook #3b5998, $fill-facebook

.fill-twitter #55acee, $fill-twitter

.fill-google #dd4b39, $fill-google

.fill-linkedin #0077b5, $fill-linkedin

.fill-pinterest #bd081c, $fill-pinterest

.fill-tumblr #36465d, $fill-tumblr

.fill-youtube #cd201f, $fill-youtube

.fill-instagram #517fa4, $fill-instagram

Text Colors

Solid provides a range of text colors, as well as some lighter and darker variations. When selecting a color for a block of text, it's important to take into account the documented usages below (using green text only for success messaging, for instance).

.text-gray #222222, $text-gray

This is the darkest gray and default text color.

.text-gray-lighter #666666, $text-gray-lighter

This is a little lighter gray.

.text-gray-lightest #999999, $text-gray-lightest

The lightest of all the grays.

.text-red #ee3322, $text-red

This is red text for both brand text/headlines and error messaging. Be careful when mixing!

.text-pink #f43192, $text-pink

This is pink text.

.text-orange #f47f16, $text-orange

This is orange text for warning messaging.

.text-promoted-orange #f7ad19, $text-promoted-orange

This is orange text for ad unit disclosures. Don't use for anything else!

.text-blue #0f65ef, $text-blue

This is our standard link color. It's on links by default.

.text-purple #6645dd, $text-purple

This is purple text.

.text-green #68af15, $text-green

This is green text for success messaging.

.text-white #ffffff, $text-white

White text for dark backgrounds.

Link Colors

The primary BuzzFeed link color is blue, followed by a gray secondary link and a light gray tertiary link style. By default, a tags will get the same styling as elements with the class .link-blue.

Social Link Colors

Use .link-socialnetworkname to create a link for a specific social network. You can also use Solid's social buttons to create a button related to a social network.

.link-facebook

Follow Us On Facebook

.link-twitter

Follow Us On Twitter

.link-google

Follow Us On Google+

.link-linkedin

Follow Us On LinkedIn

.link-pinterest

Follow Us On Pinterest

.link-tumblr

Follow Us On Tumblr

.link-youtube

Follow Us On YouTube

.link-instagram

Follow Us On Instagram

SVG Fill Colors

Use these SVG color classes to apply a fill to svg elements. The options for SVG fills, intended for use with icons, reflect Solid's text colors and social branding colors.

  • .svg-gray
  • .svg-gray-lighter
  • .svg-gray-lightest
  • .svg-red
  • .svg-pink
  • .svg-orange
  • .svg-blue
  • .svg-purple
  • .svg-teal
  • .svg-green
  • .svg-white
  • .svg-facebook
  • .svg-twitter
  • .svg-google
  • .svg-linkedin
  • .svg-pinterest
  • .svg-tumblr
  • .svg-youtube
  • .svg-instagram
<svg class="svg-gray">
  <path>...</path>
</svg>