Color


These guidelines are the framework upon which we have built our system for how color is used in Vanilla, we use a fairly neutral color palette along with a traffic light palette.

$color-x-light
#fff

$color-light
#f7f7f7

$color-mid-x-light
#e5e5e5

$color-mid-light
#cdcdcd

$color-mid-dark
#666

$color-dark
#111

$color-x-dark
#000

$color-brand
#333

$color-negative
#c7162b

$color-caution
#f99b11

$color-positive
#0e8420

$color-information
#335280

$color-link
#007aa6

$color-accent
#333

$color-accent-background
#333

$color-navigation-background
#fff

You can define a brand color ($color-brand) that can be used for call-to-action buttons and other highlights across the framework. The default Vanilla brand color is $color-dark.

brand-color

Accessibility

It’s important for us to meet all web accessibility standards. Vanilla encourages meeting the minimum contrast ratios specified by WCAG 2.1 Level AA for text, icons and background colors.

Do:Use a minimum contrast ratio of 4.5 for normal text and UI components

text-color-do button-color-do

Don't:Use low-contrast text and background combinations. e.g., dark text on a dark background.

text-color-don't button-color-don't

Design

For more information view the color design spec, which includes the specification in markdown format and a PNG image.