# Pattern

## Primary colours

Blue <hex>#2e51a1</hex> <rgb>rgb(46,81,161)</rgb> <accessibility>
color & black 2.8:1
color & white 7.5:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
</accessibility>
color & black 5:1
color & white 4.2:1
WCAG 2.0 AA
✓✓
✗ ✓
WCAG 2.0 AAA
✗ ✓
✗ ✗
blue-l
color & black 11.9:1
color & white 1.8:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
blue-xl
color & black 1.7:1
color & white 12.1:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
blue-d
color & black 1.1:1
color & white 18.4:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
blue-xd Grey <hex>#7f7f7f</hex> <rgb>rgb(127,127,127)</rgb> <accessibility>
color & black 5.2:1
color & white 4:1
WCAG 2.0 AA
✓✓
✗ ✓
WCAG 2.0 AAA
✗ ✓
✗ ✗
</accessibility>
color & black 9.9:1
color & white 2.1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Light
color & black 14.7:1
color & white 1.4:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Lighter
color & black 18.4:1
color & white 1.1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Lightest
color & black 21:1
color & white 1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
White
color & black 21:1
color & white 1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Default page
color & black 21:1
color & white 1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Light
color & black 2.4:1
color & white 8.6:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
Dark
color & black 2.4:1
color & white 8.6:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
Darker
color & black 1:1
color & white 21:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
Black
color & black 1:1
color & white 21:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
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};
    	}
    }