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
#e40c78, $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
#bf5608, $fill-promoted-orange
.fill-teal
#007c7c, $fill-teal
.fill-green
#68af15, $fill-green
.fill-green-lighter
#e1efd0, $fill-green-lighter
.fill-gray
#aaaaaa, $fill-gray
.fill-gray-light
#d7d7d7, $fill-gray-light
.fill-gray-lighter
#f4f4f4, $fill-gray-lighter
.fill-gray-darker
#222222, $fill-gray-darker
.fill-white
#ffffff, $fill-white
The following colors are only to be used when referencing the associated social network.
.fill-facebook
#3b5998, $fill-facebook
.fill-buzzfeed
#ee3322, $fill-buzzfeed
.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
#FF0000, $fill-youtube
.fill-instagram
#000000, $fill-instagram
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
#757575, $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
#e40c78, $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.
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
.
a
, .link-blue
.link-gray
.link-gray-lighter
.link-white
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
.link-twitter
.link-google
.link-linkedin
.link-pinterest
.link-tumblr
.link-youtube
.link-instagram
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-buzzfeed
svg-twitter
svg-google
svg-linkedin
svg-pinterest
svg-tumblr
svg-youtube
svg-instagram