Colours

Base colours

PrimoCSS Framework default colour variables. All variables can be found in _settings.color.scss and to override any variables change them in _settings.variables.scss found in the root of the SCSS folder. All colours here should set the visual tone of the framework.

All base colours are the starting point in PrimoCSS, used for either backgrounds, text or to remove a colour.

Black
$color-black | #000000

White
$color-white | #FFFFFF

Transparent
$color-transparent


Grey colours

There is a six colour scale for grey's in PrimoCSS. They can be used for text, backgrounds or borders.

Grey lightest
$color-grey-lightest | #F7F7F7

Grey lighter
$color-grey-lighter | #EEEEEE

Grey light
$color-grey-light | #CBCBCB

Grey
$color-grey | #888888

Grey dark
$color-grey-dark | #666666

Grey darker
$color-grey-darker | #333333

Grey darkest
$color-grey-darkest | #111111


Primary colours

All primary colours can be used for any site or UI requirement. They can be used for action buttons, focus states, notification messages / alerts and form elements. Also they can reflect a site brand. All colours have a lighter and darker shade.

Red
$color-red | #E83A46

Red light
$color-red-light | #ED6871

Red dark
$color-red-dark | #A8141E

Orange
$color-orange | #E83A46

Orange light
$color-orange-light | #F8774E

Orange dark
$color-orange-dark | #A62D07

Yellow
$color-yellow | #FFB400

Yellow light
$color-yellow-light | #FFC333

Yellow dark
$color-yellow-dark | #996C00

Blue
$color-blue | #00A6ED

Blue light
$color-blue-light | #21BCFF

Blue dark
$color-blue-dark | #005F87

Green
$color-green | #7FB800

Green light
$color-green-light | #A2EB00

Green dark
$color-green-dark | #395200

Navy
$color-navy | #0D2C54

Navy light
$color-navy-light | #144380

Navy dark
$color-navy-dark | #030912