Blue #2e51a1 rgb(46,81,161)
color & black 2.8:1
color & white 7.5:1
WCAG 2.0 AA
WCAG 2.0 AAA
blue-l blue-xl blue-d blue-xd
Grey #7f7f7f rgb(127,127,127)
color & black 5.2:1
color & white 4:1
WCAG 2.0 AA
WCAG 2.0 AAA
Light Lighter Lightest White Default page Light Dark Darker Black Dark
:root {	
	--colour-blue: #2e51a1;
	--colour-blue-l: #5c7abf;
	--colour-blue-xl: #b2c3ec;
	--colour-blue-d: #133176;
	--colour-blue-xd: #031235;
	
	--colour-grey: #7f7f7f;
	--colour-grey-l: #b2b2b2;
	--colour-grey-xl: #d8d8d8;
	--colour-grey-xxl: #f0f0f0;
	--colour-white: #FFF;
	--colour-page: #FFF;
	--colour-light: #FFF;
	--colour-grey-d: #4c4c4c;
	--colour-grey-xd: #4c4c4c;
	--colour-black: #000;
	--colour-dark: #000;
}
$colour: (	
	colour-blue: #2e51a1,
	colour-blue-l: #5c7abf,
	colour-blue-xl: #b2c3ec,
	colour-blue-d: #133176,
	colour-blue-xd: #031235,
	
	colour-grey: #7f7f7f,
	colour-grey-l: #b2b2b2,
	colour-grey-xl: #d8d8d8,
	colour-grey-xxl: #f0f0f0,
	colour-white: #FFF,
	colour-page: #FFF,
	colour-light: #FFF,
	colour-grey-d: #4c4c4c,
	colour-grey-xd: #4c4c4c,
	colour-black: #000,
	colour-dark: #000,
);
:root {
	@each $name, $color in $colour {
		--#{$name}: #{$color};
	}
}