Vanilla framework documentation

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.

$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


Design