Addded colours/a palette.

src/_palette.scss

@@ -0,0 +1,166 @@
+$grey50: #FAFAFF;
+$grey100: #EEEEF7;
+$grey200: #CECEE3;
+$grey300: #AEAED1;
+$grey400: #8484AE;
+$grey500: #6B6B94;
+$grey600: #52527A;
+$grey700: #3B3B5E;
+$grey800: #1F1F47;
+$grey900: #0F0F24;
+
+$black: #000008;
+$white: #FCFCFF;
+
+$red50: #FFE3E4;
+$red100: #FFCFD0;
+$red200: #FFCFD0;
+$red300: #FA989A;
+$red400: #F77275;
+$red500: #E04F53;
+$red600: #C4393E;
+$red700: #9C2A2E;
+$red800: #780D11;
+$red900: #59080B;
+$red: $red500;
+
+$orange50: #FFF3DB;
+$orange100: #FFEDC9;
+$orange200: #FFDF9E;
+$orange300: #FCCD6F;
+$orange400: #FABC41;
+$orange500: #F5A300;
+$orange600: #D68F00;
+$orange700: #AD7400;
+$orange800: #855800;
+$orange900: #694600;
+$orange: $orange500;
+
+$yellow50: #FFFCE0;
+$yellow100: #FFF9BF;
+$yellow200: #FFF599;
+$yellow300: #FFF27D;
+$yellow400: #FFE854;
+$yellow500: #F0D911;
+$yellow600: #DEC800;
+$yellow700: #C7B400;
+$yellow800: #B09F00;
+$yellow900: #8A7C00;
+$yellow: $yellow500;
+
+$pear50: #F8FFDB;
+$pear100: #F4FFC9;
+$pear200: #EEFFAB;
+$pear300: #E9FF91;
+$pear400: #DAF56C;
+$pear500: #C3E344;
+$pear600: #9FC700;
+$pear700: #7F9917;
+$pear800: #5B7006;
+$pear900: #46540D;
+$pear: $pear500;
+
+$green50: #EBFCE8;
+$green100: #E1FADC;
+$green200: #D2F7CB;
+$green300: #B1F0A5;
+$green400: #8DE87D;
+$green500: #64DB4F;
+$green600: #54B842;
+$green700: #469937;
+$green800: #3B822F;
+$green900: #295920;
+$green: $green500;
+
+$sea50: #D9FFEF;
+$sea100: #C5FAE4;
+$sea200: #ABF7D7;
+$sea300: #83F2C4;
+$sea400: #55EDAE;
+$sea500: #27E596;
+$sea600: #1BC27D;
+$sea700: #15A167;
+$sea800: #0E784C;
+$sea900: #0A5436;
+$sea: $sea500;
+
+$cyan50: #E5FFFF;
+$cyan100: #CFFFFE;
+$cyan200: #B4FAF9;
+$cyan300: #94F7F6;
+$cyan400: #72F2F2;
+$cyan500: #2FEBEB;
+$cyan600: #14DEDE;
+$cyan700: #10B5B5;
+$cyan800: #0D8F8F;
+$cyan900: #0A6B6B;
+$cyan: $cyan500;
+
+$blue50: #E5F3FF;
+$blue100: #D4EBFF;
+$blue200: #BFE1FF;
+$blue300: #BFE1FF;
+$blue400: #72BCFC;
+$blue500: #44A6FC;
+$blue600: #2184DB;
+$blue700: #196CB5;
+$blue800: #135894;
+$blue900: #0E4575;
+$blue: $blue500;
+
+$indigo50: #EBEBFF;
+$indigo100: #D6D6FF;
+$indigo200: #C7C8FF;
+$indigo300: #A8AAFF;
+$indigo400: #8587FF;
+$indigo500: #6D6FF2;
+$indigo600: #5658DB;
+$indigo700: #4648BD;
+$indigo800: #363799;
+$indigo900: #26277A;
+$indigo: $indigo500;
+
+$purple50: #F7E8FF;
+$purple100: #F1D9FC;
+$purple200: #E5BBFA;
+$purple300: #D698F5;
+$purple400: #C571F0;
+$purple500: #B647ED;
+$purple600: #9E3CCF;
+$purple700: #7C2EA3;
+$purple800: #5D1E7D;
+$purple900: #4A1663;
+$purple: $purple500;
+
+$magenta50: #FFE8FF;
+$magenta100: #FFD6FF;
+$magenta200: #FCC2FC;
+$magenta300: #FCA2FC;
+$magenta400: #FA7DFA;
+$magenta500: #EB5BEB;
+$magenta600: #D943D9;
+$magenta700: #C23AC2;
+$magenta800: #9E2B9E;
+$magenta900: #751D75;
+$magenta: $magenta500;
+
+$pink50: #FFE5F2;
+$pink100: #FFCCE6;
+$pink200: #FFADD5;
+$pink300: #FF87C1;
+$pink400: #FF69B2;
+$pink500: #FF4DA3;
+$pink600: #E03D8C;
+$pink700: #C9347D;
+$pink800: #AD2A6A;
+$pink900: #8C2055;
+$pink: $pink500;
+
+$surface: $grey100;
+$text: $grey800;
+$primary: $sea;
+
+$success: $sea;
+$danger: $red;
+$warning: $yellow;
+$info: $blue;

src/defaults.scss

@@ -1,3 +1,5 @@
+@use "palette";
+
 :root,
 *,
 *::before,
@@ -11,4 +13,6 @@
 :root,
 body {
     font-family: 'Manrope', sans-serif;
+    color: palette.$text;
+    background-color: palette.$surface;
 }

src/headings.scss

@@ -1,3 +1,5 @@
+@use "palette";
+
 h1, h2, h3, h4, h5, h6 {
     font-weight: 200;
     margin: .75em 0 .25em 0;
@@ -14,7 +16,7 @@ h1 {
         left: 0;
         width: 5rem;
         height: .1rem;
-        background-color: black;
+        background-color: palette.$primary;
     }
 }