Colours

$textBold

hsl(0, 0%, 12%)

#1f1f1f

$textRegular

hsl(0, 0%, 20%)

#333

$textSubtle

hsl(0, 0%, 33%)

#545454

$textMinimal

hsl(0, 0%, 46%)

#757575

$background

hsl(0, 0%, 96%)

#f5f5f5

$backgroundAccent

hsl(215, 100%, 98%)

#f5f9ff

$black

#000

$white

#fff

$grey100

hsl(0, 0%, 96%)

#f5f5f5

$grey200

hsl(0, 0%, 92%)

#ebebeb

$grey300

hsl(0, 0%, 88%)

#e0e0e0

$grey400

hsl(0, 0%, 81%)

#cfcfcf

$grey500

hsl(0, 0%, 73%)

#bababa

$grey600

hsl(0, 0%, 62%)

#9e9e9e

$grey700

hsl(0, 0%, 46%)

#757575

$grey800

hsl(0, 0%, 33%)

#545454

$grey900

hsl(0, 0%, 20%)

#333

$grey1000

hsl(0, 0%, 12%)

#1f1f1f

$grey1100

hsl(0, 0%, 10%)

#1a1a1a

$grey1200

hsl(0, 0%, 6%)

#0f0f0f

$blue100

hsl(215, 100%, 98%)

#f5f9ff

$blue200

hsl(212, 100%, 95%)

#e5f1ff

$blue300

hsl(211, 100%, 92%)

#d6eaff

$blue400

hsl(211, 100%, 88%)

#c2dfff

$blue500

hsl(212, 100%, 80%)

#99c9ff

$blue600

hsl(213, 100%, 71%)

#6baeff

$blue700

hsl(214, 100%, 58%)

#2986ff

$blue800

hsl(217, 92%, 51%)

#0f67f5

$blue900

hsl(223, 79%, 44%)

#184ac9

$blue1000

hsl(228, 82%, 35%)

#102da2

$blue1100

hsl(228, 63%, 23%)

#162460

$blue1200

hsl(227, 57%, 11%)

#0c132c

$pink100

hsl(311, 100%, 98%)

#fff5fd

$pink200

hsl(310, 100%, 95%)

#ffe5fb

$pink300

hsl(311, 100%, 90%)

#ffccf6

$pink400

hsl(313, 100%, 80%)

#ff99e9

$pink500

hsl(313, 83%, 72%)

#f37cd9

$pink600

hsl(315, 82%, 66%)

#ef61cc

$pink700

hsl(316, 63%, 56%)

#d548b0

$pink800

hsl(317, 63%, 44%)

#b72a8f

$pink900

hsl(318, 63%, 37%)

#9a2376

$pink1000

hsl(319, 55%, 33%)

#822665

$pink1100

hsl(318, 98%, 16%)

#510139

$pink1200

hsl(318, 97%, 12%)

#3c012a

$purple100

hsl(246, 83%, 98%)

#f7f6fe

$purple200

hsl(244, 74%, 95%)

#eae9fc

$purple300

hsl(246, 76%, 92%)

#dedbfa

$purple400

hsl(246, 74%, 85%)

#c2bcf5

$purple500

hsl(249, 72%, 76%)

#a396ee

$purple600

hsl(252, 70%, 66%)

#846ce5

$purple700

hsl(256, 65%, 62%)

#815fdd

$purple800

hsl(252, 51%, 51%)

#5c42c2

$purple900

hsl(257, 54%, 42%)

#5231a5

$purple1000

hsl(257, 53%, 35%)

#452a89

$purple1100

hsl(255, 57%, 23%)

#2a195c

$purple1200

hsl(255, 76%, 13%)

#15083a

$cyan100

hsl(198, 100%, 97%)

#f0faff

$cyan200

hsl(199, 100%, 94%)

#e0f5ff

$cyan300

hsl(201, 100%, 89%)

#c7ebff

$cyan400

hsl(200, 100%, 84%)

#ade4ff

$cyan500

hsl(201, 96%, 73%)

#78cefc

$cyan600

hsl(202, 85%, 60%)

#42b0f0

$cyan700

hsl(204, 81%, 46%)

#1688d4

$cyan800

hsl(205, 100%, 38%)

#0071c2

$cyan900

hsl(206, 100%, 30%)

#005799

$cyan1000

hsl(205, 100%, 21%)

#003e6b

$cyan1100

hsl(206, 97%, 15%)

#012b4b

$cyan1200

hsl(207, 73%, 9%)

#061928

$green100

hsl(148, 93%, 94%)

#e1feef

$green200

hsl(149, 95%, 91%)

#d2fee7

$green300

hsl(147, 87%, 85%)

#b7fad5

$green400

hsl(148, 84%, 70%)

#72f3ae

$green500

hsl(148, 75%, 54%)

#32e284

$green600

hsl(148, 77%, 45%)

#1acb6d

$green700

hsl(148, 84%, 36%)

#0fa957

$green800

hsl(158, 79%, 29%)

#10845a

$green900

hsl(166, 71%, 24%)

#126954

$green1000

hsl(166, 67%, 20%)

#115545

$green1100

hsl(169, 88%, 10%)

#033028

$green1200

hsl(155, 93%, 5%)

#01190f

$magenta100

hsl(330, 100%, 99%)

#fffafc

$magenta200

hsl(329, 100%, 96%)

#ffebf5

$magenta300

hsl(332, 100%, 92%)

#ffd6e9

$magenta400

hsl(333, 100%, 90%)

#ffcce3

$magenta500

hsl(333, 90%, 80%)

#fa9ec7

$magenta600

hsl(333, 87%, 72%)

#f679b1

$magenta700

hsl(333, 75%, 59%)

#e5488f

$magenta800

hsl(333, 69%, 49%)

#d32774

$magenta900

hsl(333, 74%, 36%)

#a01855

$magenta1000

hsl(333, 86%, 25%)

#77093a

$magenta1100

hsl(333, 95%, 16%)

#500225

$magenta1200

hsl(334, 62%, 10%)

#290a17

$red100

hsl(0, 100%, 99%)

#fffafa

$red200

hsl(0, 100%, 96%)

#ffebeb

$red300

hsl(0, 100%, 96%)

#ffebeb

$red400

hsl(357, 100%, 93%)

#ffdbdd

$red500

hsl(356, 96%, 83%)

#fdaab0

$red600

hsl(357, 90%, 73%)

#f87c82

$red700

hsl(357, 80%, 59%)

#ea434b

$red800

hsl(357, 76%, 49%)

#dc1e27

$red900

hsl(357, 73%, 37%)

#a31920

$red1000

hsl(357, 79%, 26%)

#770e13

$red1100

hsl(357, 91%, 17%)

#530408

$red1200

hsl(357, 73%, 10%)

#2c0709

$teal100

hsl(180, 83%, 95%)

#e8fdfd

$teal200

hsl(180, 75%, 88%)

#c9f7f7

$teal300

hsl(180, 71%, 78%)

#9fefef

$teal400

hsl(179, 70%, 71%)

#81e9e7

$teal500

hsl(179, 65%, 52%)

#35d4d2

$teal600

hsl(179, 76%, 41%)

#19b8b5

$teal700

hsl(179, 91%, 31%)

#079795

$teal800

hsl(178, 100%, 25%)

#00807b

$teal900

hsl(180, 100%, 18%)

#005c5c

$teal1000

hsl(183, 100%, 13%)

#003f42

$teal1100

hsl(187, 92%, 10%)

#022b31

$teal1200

hsl(186, 56%, 7%)

#081a1c

$orange100

hsl(45, 100%, 96%)

#fffaeb

$orange200

hsl(46, 100%, 89%)

#fff2c7

$orange300

hsl(46, 100%, 77%)

#ffe48a

$orange400

hsl(44, 100%, 65%)

#ffcf4d

$orange500

hsl(41, 100%, 55%)

#ffb61a

$orange600

hsl(29, 100%, 55%)

#ff881a

$orange700

hsl(35, 95%, 50%)

#f99406

$orange800

hsl(22, 94%, 54%)

#f86c1b

$orange900

hsl(22, 100%, 46%)

#eb5600

$orange1000

hsl(20, 100%, 39%)

#c74200

$orange1100

hsl(18, 100%, 27%)

#8a2900

$orange1200

hsl(18, 100%, 21%)

#6b2000

$yellow100

hsl(53, 94%, 93%)

#fefadc

$yellow200

hsl(54, 92%, 85%)

#fcf5b6

$yellow300

hsl(54, 92%, 75%)

#faee85

$yellow400

hsl(52, 97%, 63%)

#fce445

$yellow500

hsl(51, 100%, 46%)

#ebc700

$yellow600

hsl(49, 100%, 39%)

#c7a200

$yellow700

hsl(48, 100%, 35%)

#b38f00

$yellow800

hsl(46, 100%, 30%)

#997500

$yellow900

hsl(44, 100%, 22%)

#705200

$yellow1000

hsl(44, 100%, 18%)

#5c4300

$yellow1100

hsl(41, 100%, 11%)

#382600

$yellow1200

hsl(39, 100%, 8%)

#291b00

$lime100

hsl(73, 94%, 93%)

#f7fedc

$lime200

hsl(73, 94%, 87%)

#f0fdbf

$lime300

hsl(73, 90%, 77%)

#e2f990

$lime400

hsl(74, 82%, 69%)

#d3f16f

$lime500

hsl(74, 68%, 58%)

#bbdd4b

$lime600

hsl(74, 77%, 41%)

#93b918

$lime700

hsl(75, 100%, 31%)

#779e00

$lime800

hsl(75, 100%, 27%)

#678a00

$lime900

hsl(75, 100%, 19%)

#496100

$lime1000

hsl(75, 100%, 15%)

#394d00

$lime1100

hsl(75, 100%, 9%)

#222e00

$lime1200

hsl(74, 100%, 6%)

#171f00

$lapis100

hsl(214, 100%, 97%)

#f0f6ff

$lapis200

hsl(215, 100%, 95%)

#e5f0ff

$lapis300

hsl(202, 100%, 87%)

#bde7ff

$lapis400

hsl(212, 100%, 83%)

#a8d1ff

$lapis500

hsl(220, 95%, 76%)

#88aefc

$lapis600

hsl(230, 84%, 70%)

#7288f3

$lapis700

hsl(240, 79%, 66%)

#6464ed

$lapis800

hsl(240, 59%, 52%)

#3c3ccd

$lapis900

hsl(240, 58%, 38%)

#292999

$lapis1000

hsl(240, 63%, 29%)

#1b1b79

$lapis1100

hsl(240, 87%, 18%)

#060656

$lapis1200

hsl(240, 97%, 12%)

#01013c

$maroon100

hsl(15, 100%, 98%)

#fff7f5

$maroon200

hsl(16, 100%, 93%)

#ffe5db

$maroon300

hsl(16, 100%, 87%)

#ffcebd

$maroon400

hsl(16, 100%, 80%)

#ffb499

$maroon500

hsl(7, 89%, 70%)

#f77e6e

$maroon600

hsl(7, 78%, 60%)

#e95c49

$maroon700

hsl(7, 67%, 44%)

#bb3725

$maroon800

hsl(7, 95%, 32%)

#9f1604

$maroon900

hsl(349, 89%, 28%)

#87081f

$maroon1000

hsl(346, 77%, 26%)

#750f27

$maroon1100

hsl(335, 73%, 20%)

#580e2d

$maroon1200

hsl(335, 81%, 12%)

#37061a

$marsh100

hsl(147, 50%, 96%)

#f0faf4

$marsh200

hsl(147, 27%, 88%)

#d8e9e0

$marsh300

hsl(147, 26%, 82%)

#c5ddd0

$marsh400

hsl(147, 25%, 73%)

#a9cbb8

$marsh500

hsl(147, 22%, 60%)

#83af97

$marsh600

hsl(147, 15%, 48%)

#688d79

$marsh700

hsl(147, 15%, 37%)

#506d5d

$marsh800

hsl(147, 23%, 29%)

#395b48

$marsh900

hsl(147, 25%, 21%)

#284334

$marsh1000

hsl(147, 17%, 18%)

#26362d

$marsh1100

hsl(147, 24%, 13%)

#192920

$marsh1200

hsl(147, 14%, 7%)

#0f1412

$coolGrey100

hsl(206, 47%, 97%)

#f4f8fb

$coolGrey200

hsl(205, 35%, 93%)

#e7eef3

$coolGrey300

hsl(206, 27%, 90%)

#dfe6ec

$coolGrey400

hsl(205, 20%, 83%)

#cbd5dc

$coolGrey500

hsl(207, 16%, 76%)

#b8c3cc

$coolGrey600

hsl(207, 14%, 65%)

#99a7b2

$coolGrey700

hsl(206, 9%, 49%)

#727e88

$coolGrey800

hsl(207, 11%, 35%)

#4f5a63

$coolGrey900

hsl(208, 15%, 22%)

#303941

$coolGrey1000

hsl(208, 19%, 14%)

#1d242a

$coolGrey1100

hsl(207, 20%, 11%)

#161d22

$coolGrey1200

hsl(210, 18%, 7%)

#0f1215

$alpha100

hsla(0, 0%, 20%, 0.1)

$alpha150

hsla(0, 0%, 20%, 0.15)

$alpha200

hsla(0, 0%, 20%, 0.2)

$alpha250

hsla(0, 0%, 20%, 0.25)

$alpha600

hsla(0, 0%, 20%, 0.6)

$infoLight

hsl(215, 100%, 98%)

#f5f9ff

$info

hsl(217, 92%, 51%)

#0f67f5

$infoMid

hsl(223, 79%, 44%)

#184ac9

$infoDark

hsl(228, 82%, 35%)

#102da2

$successLight

hsl(119, 44%, 94%)

#e9f6e9

$success

hsl(119, 100%, 27%)

#028a00

$successMid

hsl(124, 100%, 22%)

#007007

$successDark

hsl(126, 100%, 17%)

#005709

$dangerLight

hsl(0, 77%, 95%)

#fce8e8

$danger

hsl(0, 96%, 48%)

#f00505

$dangerMid

hsl(0, 96%, 41%)

#cd0404

$dangerDark

hsl(0, 97%, 34%)

#ab0303

$warningLight

hsl(39, 100%, 94%)

#fff4e0

$warning

hsl(41, 100%, 55%)

#ffb61a

$warningMid

hsl(41, 89%, 48%)

#e7a20d

$warningDark

hsl(41, 100%, 41%)

#d18f00

$warningText

hsl(24, 100%, 37%)

#bd4b00

$subjectEnglish

hsl(333, 75%, 59%)

#e5488f

$subjectMaths

hsl(214, 100%, 58%)

#2986ff

$subjectScience

hsl(256, 65%, 62%)

#815fdd

$subjectVerbalReasoning

hsl(148, 84%, 36%)

#0fa957

$subjectNonVerbalReasoning

hsl(41, 100%, 55%)

#ffb61a

$subjectCreativeWriting

hsl(35, 95%, 50%)

#f99406

$subjectExamSkills

hsl(257, 53%, 35%)

#452a89

$subjectGcseEnglishLiterature

hsl(333, 75%, 59%)

#e5488f

$subjectGcseEnglishLanguage

hsl(256, 65%, 62%)

#815fdd

$subjectGcseMaths

hsl(214, 100%, 58%)

#2986ff

$subjectGcseChemistry

hsl(35, 95%, 50%)

#f99406

$subjectGcsePhysics

hsl(206, 9%, 49%)

#727e88

$subjectGcseBiology

hsl(148, 84%, 36%)

#0fa957

$glBlueLight

hsl(222, 68%, 78%)

#a1b8ed

$glBluePrimary

hsl(222, 56%, 55%)

#4c73cd

$glBlueDark

hsl(222, 35%, 43%)

#475e94

$primary100

hsl(215, 100%, 98%)

#f5f9ff

$primary200

hsl(212, 100%, 95%)

#e5f1ff

$primary300

hsl(211, 100%, 92%)

#d6eaff

$primary400

hsl(211, 100%, 88%)

#c2dfff

$primary500

hsl(212, 100%, 80%)

#99c9ff

$primary600

hsl(213, 100%, 71%)

#6baeff

$primary700

hsl(214, 100%, 58%)

#2986ff

$primary800

hsl(217, 92%, 51%)

#0f67f5

$primary900

hsl(223, 79%, 44%)

#184ac9

$primary1000

hsl(228, 82%, 35%)

#102da2

$primary1100

hsl(228, 63%, 23%)

#162460

$primary1200

hsl(227, 57%, 11%)

#0c132c