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.

















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.



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


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