Color

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`