Jump to main content


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.

Use a minimum contrast ratio of 4.5 for normal text and UI components.
text-color-do button-color-do
Use low-contrast text and background combinations.
text-color-don't button-color-don't

Color theming

Starting with the 2.3.0 release, Vanilla framework introduces a theming mechanism. The current default for all components is referred to as the light theme. A subset of elements and components now offer a dark theme:

Element / Component Variable Default value
checkbox $theme-default-forms light
radio $theme-default-forms light
hr $theme-default-hr light
Contextual menu $theme-default-p-contextual-menu light
Lists / Divider $theme-default-p-divider light
Lists / Middot $theme-default-p-inline-list--middot light
Navigation $theme-default-nav light
Side navigation $theme-default-p-side-navigation light
Search box $theme-default-p-search-box light

Future releases will expand this list to include all elements and components.

Setting the default color theme per element / component

To set the default theme to dark on any of the elements / components listed above:

  • Go to _settings_themes.scss
  • Set the value of the respective variable in the table above to 'dark'

Invoking a theme that is not currently a default

Besides setting the default, you can invoke the non-default theme by adding a class to your markup. For the list of themed elements above, add is-dark (if the default for the respective element or component is light, or is-light if the default is dark.