HamburgerHamburger Icon

Color

The full range of Buffy colors are ADA compliant and developed for the digital screen. While the primary colors should be utilized for most use cases, the expanded set of colors can be used for more complex appications like screen design. There are also monochrome colors for text, separators and inactive states. In addition, colors for success or error notifications are represented.

eucalyptus: #1f3f39

<div className="shared__bg-eucalyptus" />
Copy

lightEucalyptus: #b1edd8

<div className="shared__bg-lightEucalyptus" />
Copy

buffyOrange: #dc582a

<div className="shared__bg-buffyOrange" />
Copy

lightBuffyOrange: #f7cdb8

<div className="shared__bg-lightBuffyOrange" />
Copy

buffyPurple: #9678d3

<div className="shared__bg-buffyPurple" />
Copy

lightBuffyPurple: #d5cbf2

<div className="shared__bg-lightBuffyPurple" />
Copy

subdued: #666

<div className="shared__bg-subdued" />
Copy

sand: #f7f6f1

<div className="shared__bg-sand" />
Copy

oatmeal: #f1ead5

<div className="shared__bg-oatmeal" />
Copy

standardWhite: #fff

<div className="shared__bg-standardWhite" />
Copy

standardBlack: #19191a

<div className="shared__bg-standardBlack" />
Copy

purple100: #f6f5fa

<div className="shared__bg-purple100" />
Copy

purple200: #d7c9f5

<div className="shared__bg-purple200" />
Copy

purple300: #b79deb

<div className="shared__bg-purple300" />
Copy

purple: #7f5ccc

<div className="shared__bg-purple" />
Copy

purple500: #4836a3

<div className="shared__bg-purple500" />
Copy

purple600: #1d1c66

<div className="shared__bg-purple600" />
Copy

purpleHoliday: #28023a

<div className="shared__bg-purpleHoliday" />
Copy

orange100: #fff6f2

<div className="shared__bg-orange100" />
Copy

orange200: #fbccb5

<div className="shared__bg-orange200" />
Copy

orange300: #f7a47a

<div className="shared__bg-orange300" />
Copy

orange: #e36526

<div className="shared__bg-orange" />
Copy

orange500: #bd4408

<div className="shared__bg-orange500" />
Copy

orange600: #872d00

<div className="shared__bg-orange600" />
Copy

orangeHoliday: #ee5004

<div className="shared__bg-orangeHoliday" />
Copy

buffyYellow: #fdefb0

<div className="shared__bg-buffyYellow" />
Copy

navy: #242a6e

<div className="shared__bg-navy" />
Copy

yellow100: #f7f6f1

<div className="shared__bg-yellow100" />
Copy

yellow200: #fff1cc

<div className="shared__bg-yellow200" />
Copy

yellow300: #ffdc67

<div className="shared__bg-yellow300" />
Copy

yellow: #f7b500

<div className="shared__bg-yellow" />
Copy

yellow400: #e39f00

<div className="shared__bg-yellow400" />
Copy

yellow500: #b87a00

<div className="shared__bg-yellow500" />
Copy

yellow600: #663d00

<div className="shared__bg-yellow600" />
Copy

green100: #fafcf2

<div className="shared__bg-green100" />
Copy

green200: #d8edaf

<div className="shared__bg-green200" />
Copy

green300: #b6db6e

<div className="shared__bg-green300" />
Copy

green: #7eaf1d

<div className="shared__bg-green" />
Copy

green500: #47660a

<div className="shared__bg-green500" />
Copy

green600: #2b4000

<div className="shared__bg-green600" />
Copy

blue100: #f7fbff

<div className="shared__bg-blue100" />
Copy

blue200: #adccf2

<div className="shared__bg-blue200" />
Copy

blue300: #699ee4

<div className="shared__bg-blue300" />
Copy

blue: #135bbf

<div className="shared__bg-blue" />
Copy

blue500: #014392

<div className="shared__bg-blue500" />
Copy

blue600: #00264d

<div className="shared__bg-blue600" />
Copy

black300: #6f6f75

<div className="shared__bg-black300" />
Copy

black0: #19191a

<div className="shared__bg-black0" />
Copy

grey100: #f6f5fa

<div className="shared__bg-grey100" />
Copy

grey200: #ececef

<div className="shared__bg-grey200" />
Copy

grey300: #dadadf

<div className="shared__bg-grey300" />
Copy

grey: #b0afb8

<div className="shared__bg-grey" />
Copy

greyBackground: #f7f7f7

<div className="shared__bg-greyBackground" />
Copy

white0: #fff

<div className="shared__bg-white0" />
Copy

success: #009903

<div className="shared__bg-success" />
Copy

error: #cc0a0a

<div className="shared__bg-error" />
Copy

defaultText: #1f3f39

<div className="shared__bg-defaultText" />
Copy

defaultButton: #b1edd8

<div className="shared__bg-defaultButton" />
Copy

footer: #1f3f39

<div className="shared__bg-footer" />
Copy

footerButton: #b1edd8

<div className="shared__bg-footerButton" />
Copy

footerButtonText: #1f3f39

<div className="shared__bg-footerButtonText" />
Copy

outline: #b1edd8

<div className="shared__bg-outline" />
Copy