Vanilla framework documentation


Vanilla works with a fairly neutral color palette consisting of a range of greys and a traffic light palette (red, yellow, green) plus blue.

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.

When planning your pages, make sure there is an even distribution and well-balanced percentage of light and strong colors. Think of the screen as a whole: it shouldn't be top- or bottom-heavy.

Setting Value
$color-brand #333
$color-x-light #fff
$color-light #f7f7f7
$color-mid-light #cdcdcd
$color-mid-dark #666
$color-dark #111
$color-x-dark #000
$color-negative #c7162b
$color-caution #f99b11
$color-positive #0e8420
$color-information #335280
$color-link #007aa6
$color-accent $color-brand
$color-accent-background $color-brand
$color-navigation-background $color-x-light