pages/_app.css

@@ -10,6 +10,7 @@ body {
   --lighter-pink: #FFE7E7;
   --orange: #F5917B;
   --light-orange: #FFC4A9;
+  --lighter-orange: #ffddcd;
   --navy: #252D41;
   --light-navy: #354265;
   --dark-navy: #141D34;
@@ -36,8 +37,11 @@ body {
   --dark--primary-accent: var(--pink);
   --dark--primary-accent-light: var(--light-pink);
   --dark--primary-accent-lighter: var(--lighter-pink);
+  --dark--primary-accent-dark: #dc538e;
+  --dark--primary-accent-darker: #c8417c;
   --dark--secondary-accent: var(--orange);
   --dark--secondary-accent-light: var(--light-orange);
+  --dark--secondary-accent-lighter: var(--lighter-orange);
   --dark--translucent-accent: rgba(239, 131, 157, 0.75);
   --dark--primary-heading: #FFC48D;
   --dark--secondary-heading: var(--pink);
@@ -54,8 +58,11 @@ body {
   --primary-accent: var(--dark--primary-accent);
   --primary-accent-light: var(--dark--primary-accent-light);
   --primary-accent-lighter: var(--dark--primary-accent-lighter);
+  --primary-accent-dark: var(--dark--primary-accent-dark);
+  --primary-accent-darker: var(--dark--primary-accent-darker);
   --secondary-accent: var(--dark--secondary-accent);
   --secondary-accent-light: var(--dark--secondary-accent-light);
+  --secondary-accent-lighter: var(--dark--secondary-accent-lighter);
   --translucent-accent: var(--dark--translucent-accent);
   --primary-heading: var(--dark--primary-heading);
   --secondary-heading: var(--dark--secondary-heading);

pages/academics.tsx

@@ -275,9 +275,13 @@ export default function Academics() {
           height={400}
           keys={A16Keys}
           colorRange={[
-            Color.primaryAccent,
-            Color.secondaryAccentLight,
             Color.primaryAccentLighter,
+            Color.secondaryAccentLighter,
+            Color.secondaryAccentLight,
+            Color.primaryAccentLight,
+            Color.primaryAccent,
+            Color.primaryAccentDark,
+            Color.primaryAccentDarker,
           ]}
           data={A16}
           margin={barGraphMargin}

utils/Color.ts

@@ -5,8 +5,11 @@ const colorNames = [
   "primaryAccent",
   "primaryAccentLight",
   "primaryAccentLighter",
+  "primaryAccentDark",
+  "primaryAccentDarker",
   "secondaryAccent",
   "secondaryAccentLight",
+  "secondaryAccentLighter",
   "primaryHeading",
   "secondaryHeading",
   "link",
@@ -26,8 +29,11 @@ export const Color: { [key in ColorName]: string } = {
   primaryAccent: "var(--primary-accent)",
   primaryAccentLight: "var(--primary-accent-light)",
   primaryAccentLighter: "var(--primary-accent-lighter)",
+  primaryAccentDark: "var(--primary-accent-dark)",
+  primaryAccentDarker: "var(--primary-accent-darker)",
   secondaryAccent: "var(--secondary-accent)",
   secondaryAccentLight: "var(--secondary-accent-light)",
+  secondaryAccentLighter: "var(--secondary-accent-lighter)",
   primaryHeading: "var(--primary-heading)",
   secondaryHeading: "var(--secondary-heading)",
   link: "var(--link)",