diff --git a/src/info/components/basic-page.js b/src/info/components/basic-page.js
index 31f80bd..cd431bb 100644
--- a/src/info/components/basic-page.js
+++ b/src/info/components/basic-page.js
@@ -32,7 +32,7 @@ export default function BasicPage({
   const url = Boolean(back_url) ? back_url : "/";
 
   return (
-    <div className="min-h-screen bg-werefox-grey-light dark:bg-werefox-grey font-nerd">
+    <div className="min-h-screen bg-skye-werefox-grey-light dark:bg-skye-werefox-grey font-nerd">
       <Head>
         <title>{page_title}</title>
         <link rel="icon" href="/favicon.ico" />
diff --git a/src/info/components/contacts-link.js b/src/info/components/contacts-link.js
index 9f0518c..add98cd 100644
--- a/src/info/components/contacts-link.js
+++ b/src/info/components/contacts-link.js
@@ -6,7 +6,7 @@ export default function ContactsLink({ src, alt, url, description, url_text }) {
     <div>
       <Link href={url}>
         <a target="_blank">
-          <div className="p-2 md:text-lg sm:text-md text-xs text-center rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition">
+          <div className="p-2 md:text-lg sm:text-md text-xs text-center rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink hover:animate-yip transition">
             <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
               <Image src={src} layout="fill" objectFit="contain" alt={alt} />
             </span>{" "}
diff --git a/src/info/components/faq-block.js b/src/info/components/faq-block.js
index c6108d8..32b01e6 100644
--- a/src/info/components/faq-block.js
+++ b/src/info/components/faq-block.js
@@ -2,7 +2,7 @@ import FCard from "./faq-card";
 
 export default function FAQBlock({ faqs }) {
   return (
-    <div className="p-4 space-y-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey-dark">
+    <div className="p-4 space-y-4 rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
       {Object.keys(faqs).map((faq) => (
         <FCard
           key={faq}
diff --git a/src/info/components/faq-card.js b/src/info/components/faq-card.js
index 9f0b27d..432ebc8 100644
--- a/src/info/components/faq-card.js
+++ b/src/info/components/faq-card.js
@@ -6,12 +6,12 @@ export default function TestimonialCard({ question, answer, src, alt }) {
 
   return (
     <div className="space-y-2">
-      <div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
-        <p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
+      <div className="ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
+        <p className="p-8 text-center text-lg sm:text-xl text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
           {question}
         </p>
       </div>
-      <div className=" ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition">
+      <div className=" ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink hover:animate-yip transition">
         <Link href="https://vulpine.club/@shadow8t4">
           <a target="_blank">
             <div className="p-2 flex">
diff --git a/src/info/components/footer-button.js b/src/info/components/footer-button.js
index cf84bae..0d32145 100644
--- a/src/info/components/footer-button.js
+++ b/src/info/components/footer-button.js
@@ -7,7 +7,7 @@ export default function footerButton({ url, inner_text, is_external }) {
     <div className="flex-1 overflow-visible">
       <Link href={url}>
         <a target={target}>
-          <div className="ml-1 mr-1 rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink  text-werefox-blue-darker dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink transition">
+          <div className="ml-1 mr-1 rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink  text-skye-werefox-blue-darker dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink transition">
             <p className="pl-2 pr-2 text-center sm:text-md text-sm">
               {inner_text}
             </p>
diff --git a/src/info/components/footer-card.js b/src/info/components/footer-card.js
index 6847e8c..fe8bdaa 100644
--- a/src/info/components/footer-card.js
+++ b/src/info/components/footer-card.js
@@ -1,8 +1,8 @@
 import FButton from "./footer-button";
 export default function FooterCard() {
   return (
-    <footer className="p-4 space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey-dark">
-      <div className="flex text-werefox-blue-darker dark:text-werefox-blue">
+    <footer className="p-4 space-y-2 rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
+      <div className="flex text-skye-werefox-blue-darker dark:text-skye-werefox-blue">
         <div className="flex-1"></div>
         <FButton
           url="https://info.werefox.dev/contacts"
@@ -16,7 +16,7 @@ export default function FooterCard() {
         />
         <div className="flex-1"></div>
       </div>
-      <div className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
+      <div className="text-center text-xs text-skye-werefox-grey-darkest dark:text-skye-werefox-grey-lightest">
         This site uses{" "}
         <div className="inline-block pt-1 pb-1">
           <FButton
diff --git a/src/info/components/home-page.js b/src/info/components/home-page.js
index 0d8bbca..5d95254 100644
--- a/src/info/components/home-page.js
+++ b/src/info/components/home-page.js
@@ -4,7 +4,7 @@ import FCard from "../components/footer-card";
 
 export default function HomePage({ page_title, card_title, children }) {
   return (
-    <div className="min-h-screen bg-werefox-grey-light dark:bg-werefox-grey font-nerd">
+    <div className="min-h-screen bg-skye-werefox-grey-light dark:bg-skye-werefox-grey font-nerd">
       <Head>
         <title>{page_title}</title>
         <link rel="icon" href="/favicon.ico" />
diff --git a/src/info/components/identity-button.js b/src/info/components/identity-button.js
index 5e1c507..b4910a2 100644
--- a/src/info/components/identity-button.js
+++ b/src/info/components/identity-button.js
@@ -16,7 +16,7 @@ export default function IdentityButton({
     <div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
       <Link href={`${url}${maybeLocator}`}>
         <a
-          className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition`}
+          className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink hover:animate-yip transition`}
         >
           {images.map((source) => (
             <span
diff --git a/src/info/components/identity-card-button.js b/src/info/components/identity-card-button.js
index dbcc278..88f10f0 100644
--- a/src/info/components/identity-card-button.js
+++ b/src/info/components/identity-card-button.js
@@ -5,7 +5,7 @@ export default function IdentityCardButton({ url, button_text }) {
     <div>
       <Link href={url}>
         <a target="_blank">
-          <div className="p-4 hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink hover:animate-yip transition">
+          <div className="p-4 hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink hover:animate-yip transition">
             {button_text}
           </div>
         </a>
diff --git a/src/info/components/identity-card-textbox.js b/src/info/components/identity-card-textbox.js
index 7078aae..478a899 100644
--- a/src/info/components/identity-card-textbox.js
+++ b/src/info/components/identity-card-textbox.js
@@ -7,7 +7,7 @@ export default function IdentityCardTextBox({ info }) {
     infodict = Object.assign({}, infoarray);
   }
   return (
-    <div className="p-4 text-center text-md sm:text-lg ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
+    <div className="p-4 text-center text-md sm:text-lg ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue">
       {Object.keys(infodict).map((i) => (
         <p className="overflow-auto" key={i}>
           {infodict[i] == "" ? <br /> : infodict[i]}
diff --git a/src/info/components/identity-card.js b/src/info/components/identity-card.js
index 0a7cdad..b6c1a4f 100644
--- a/src/info/components/identity-card.js
+++ b/src/info/components/identity-card.js
@@ -2,7 +2,7 @@ import WCard from "./werefox-card";
 
 export default function IdentityCard({ title, src, alt, children }) {
   return (
-    <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+    <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-light dark:bg-skye-werefox-grey">
       <WCard title={title} title_emoji={{ src: `${src}`, alt: `${alt}` }}>
         {children}
       </WCard>
diff --git a/src/info/components/introduction-card.js b/src/info/components/introduction-card.js
index 0dfb50e..8dade50 100644
--- a/src/info/components/introduction-card.js
+++ b/src/info/components/introduction-card.js
@@ -4,7 +4,7 @@ export default function introductionCard({ introduction }) {
       {Object.keys(introduction).map((info) => (
         <p
           key={info}
-          className="overflow-wrap w-full text-lg text-center text-werefox-blue-dark dark:text-werefox-blue"
+          className="overflow-wrap w-full text-lg text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue"
         >
           {introduction[info]}
         </p>
diff --git a/src/info/components/kofi-donation-widget.js b/src/info/components/kofi-donation-widget.js
index d36c083..922e57f 100644
--- a/src/info/components/kofi-donation-widget.js
+++ b/src/info/components/kofi-donation-widget.js
@@ -4,11 +4,11 @@ export default function KofiDonationWidget({ title, url }) {
   return (
     <div className="pb-6 flex justify-center">
       <details className="rounded-lg p-1 overflow-auto">
-        <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+        <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker text-md text-center text-skye-werefox-grey-darker dark:text-skye-werefox-grey-lighter bg-skye-werefox-blue dark:bg-skye-werefox-blue-dark transition hover:bg-skye-werefox-blue-light dark:hover:bg-skye-werefox-blue-darker">
           <strong>{title}</strong>
         </summary>
         <div className="pt-2">
-          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker overflow-auto">
+          <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker overflow-auto">
             <Iframe
               className="rounded-lg w-96 min-w-96"
               url={url}
diff --git a/src/info/components/page-button.js b/src/info/components/page-button.js
index f321a81..c5101d5 100644
--- a/src/info/components/page-button.js
+++ b/src/info/components/page-button.js
@@ -13,7 +13,7 @@ export default function PageButton({
       <div>
         <Link href={url}>
           <a
-            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-werefox-grey-lightest dark:bg-werefox-grey-dark ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink focus:text-werefox-pink-dark dark:focus:text-werefox-pink hover:animate-yip transition`}
+            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink focus:text-skye-werefox-pink-dark dark:focus:text-skye-werefox-pink hover:animate-yip transition`}
             target="_blank"
           >
             {images.map((source) => (
@@ -39,7 +39,7 @@ export default function PageButton({
       <div>
         <Link href={url}>
           <a
-            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-werefox-grey-lightest dark:bg-werefox-grey-dark ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink focus:text-werefox-pink-dark dark:focus:text-werefox-pink hover:animate-yip transition`}
+            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink focus:text-skye-werefox-pink-dark dark:focus:text-skye-werefox-pink hover:animate-yip transition`}
           >
             {images.map((source) => (
               <span
diff --git a/src/info/components/project-card.js b/src/info/components/project-card.js
index 38aa125..0831691 100644
--- a/src/info/components/project-card.js
+++ b/src/info/components/project-card.js
@@ -14,7 +14,7 @@ export default function projectCard({
       <div>
         <Link href={url}>
           <a target="_blank">
-            <li className="p-4 space-y-2 rounded-sm ring-2 text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink hover:animate-yip transition">
+            <li className="p-4 space-y-2 rounded-sm ring-2 text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink hover:animate-yip transition">
               <div className="text-lg text-center">
                 <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
                   <Image
@@ -37,7 +37,7 @@ export default function projectCard({
       <div>
         <Link href={url}>
           <a>
-            <li className="p-4 space-y-2 rounded-sm ring-2 text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink hover:animate-yip transition">
+            <li className="p-4 space-y-2 rounded-sm ring-2 text-skye-werefox-blue-dark dark:text-skye-werefox-blue hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue hover:ring-skye-werefox-pink-dark dark:hover:ring-skye-werefox-pink hover:animate-yip transition">
               <div className="text-lg text-center">
                 <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
                   <Image
diff --git a/src/info/components/server-block.js b/src/info/components/server-block.js
index 50daae6..33c4b39 100644
--- a/src/info/components/server-block.js
+++ b/src/info/components/server-block.js
@@ -4,14 +4,14 @@ import Link from "next/link";
 export default function ServerBlock({ servers }) {
   return (
     <div className="p-4 w-full inline-flow align-middle justify-center space-y-8">
-      <div className="p-4 ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
+      <div className="p-4 ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue">
         <p>
           All the stuff I run uses the following server machines with reverse
           SSH connections to a{" "}
           <Link href="https://www.linode.com/?r=61251dc51397edcfacadd7f3744b258b63ad4248">
             <a
               target="_blank"
-              className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+              className="transition hover:text-skye-werefox-pink-dark dark:hover:text-skye-werefox-pink"
             >
               Linode VPS
             </a>
diff --git a/src/info/components/server-card.js b/src/info/components/server-card.js
index 0de342e..f1708db 100644
--- a/src/info/components/server-card.js
+++ b/src/info/components/server-card.js
@@ -1,6 +1,6 @@
 export default function ServerCard({ server, model, cpu, gpu, ram, os }) {
   return (
-    <div className="p-2 space-y-1 w-full inline-flow text-left ring-4 ring-werefox-blue-darkest dark:ring-werefox-blue bg-werefox-grey-lightest dark:bg-werefox-grey-darker text-lg text-werefox-cyan-dark dark:text-werefox-cyan-light">
+    <div className="p-2 space-y-1 w-full inline-flow text-left ring-4 ring-skye-werefox-blue-darkest dark:ring-skye-werefox-blue bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-darker text-lg text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan-light">
       <p>
         <code>{`System: ${server}`}</code>
       </p>
diff --git a/src/info/components/support-block.js b/src/info/components/support-block.js
index 81c235d..2320564 100644
--- a/src/info/components/support-block.js
+++ b/src/info/components/support-block.js
@@ -9,7 +9,7 @@ export default function SupportBlock({ support }) {
         support my way!! 💙"
     >
       <div className="p-4 space-y-4">
-        <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
+        <p className="text-lg md:text-2xl text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue">
           You could support me through Patreon, Ko-fi, or Liberapay
         </p>
         {Object.keys(support).map((sup) => (
diff --git a/src/info/components/support-button.js b/src/info/components/support-button.js
index f08f1e9..e0f73ab 100644
--- a/src/info/components/support-button.js
+++ b/src/info/components/support-button.js
@@ -8,7 +8,7 @@ export default function SupportButton({ title, alt, src, url }) {
       <div className="w-full justify-center flex">
         <Link href={url}>
           <a target="_blank">
-            <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+            <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker text-lg text-center text-skye-werefox-grey-darker dark:text-skye-werefox-grey-lightest bg-skye-werefox-blue dark:bg-skye-werefox-blue-dark transition hover:bg-skye-werefox-blue-light dark:hover:bg-skye-werefox-blue-darker">
               <span className="inline-block h-6">
                 <img alt={alt} src={src} className="inline-block h-6"></img>
               </span>{" "}
@@ -24,7 +24,7 @@ export default function SupportButton({ title, alt, src, url }) {
         <Link href={url}>
           <a
             target="_blank"
-            className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker"
+            className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker"
           >
             <img
               alt={alt}
diff --git a/src/info/components/testimonial-card.js b/src/info/components/testimonial-card.js
index c3788c0..f22337c 100644
--- a/src/info/components/testimonial-card.js
+++ b/src/info/components/testimonial-card.js
@@ -8,7 +8,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
   const testimonialdict = Object.assign({}, testimonialarray);
 
   return (
-    <div className="rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
+    <div className="rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue hover:animate-yip transition">
       <Link href={url}>
         <a target="_blank">
           <div className="min-w-full flex overflow-hidden">
diff --git a/src/info/components/title-card.js b/src/info/components/title-card.js
index a2ad51f..81f14d2 100644
--- a/src/info/components/title-card.js
+++ b/src/info/components/title-card.js
@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export default function TitleCard({ card_title }) {
   return (
-    <div className="p-4 w-full rounded-sm ring-4 ring-werefox-blue-dark dark:ring-werefox-blue bg-werefox-grey-lightest dark:bg-werefox-grey-dark text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
+    <div className="p-4 w-full rounded-sm ring-4 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark text-xl text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue">
       <span className="animate-bounce align-middle inline-block w-6 h-6">
         <Image
           src="/emoji/pixel_alexis.png"
diff --git a/src/info/components/werefox-card-title.js b/src/info/components/werefox-card-title.js
index 6c20f0b..78fd463 100644
--- a/src/info/components/werefox-card-title.js
+++ b/src/info/components/werefox-card-title.js
@@ -3,7 +3,7 @@ import Image from "next/image";
 export default function WerefoxCardTitle({ title, title_emoji }) {
   if (Boolean(title_emoji)) {
     return (
-      <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue ">
+      <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue ">
         <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
           <Image
             src={title_emoji["src"]}
@@ -12,15 +12,15 @@ export default function WerefoxCardTitle({ title, title_emoji }) {
             alt={title_emoji["alt"]}
           />
         </span>
-        <p className="inline text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
+        <p className="inline text-md sm:text-lg text-skye-werefox-blue-dark dark:text-skye-werefox-blue">
           {` ${title}`}
         </p>
       </div>
     );
   } else {
     return (
-      <div className="rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
-        <p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
+      <div className="rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue">
+        <p className="p-4 text-center text-md sm:text-lg text-skye-werefox-blue-dark dark:text-skye-werefox-blue">
           {title}
         </p>
       </div>
diff --git a/src/info/components/werefox-card.js b/src/info/components/werefox-card.js
index 2ea98c4..12eb5b2 100644
--- a/src/info/components/werefox-card.js
+++ b/src/info/components/werefox-card.js
@@ -3,18 +3,18 @@ import WCT from "./werefox-card-title";
 export default function WerefoxCard({ title_emoji, title, children }) {
   if (Boolean(title_emoji)) {
     return (
-      <div className="p-4 space-y-4 text-center text-werefox-blue-dark dark:text-werefox-blue rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey-dark">
+      <div className="p-4 space-y-4 text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
         <WCT title={title} title_emoji={title_emoji} />
-        <div className="p-4 space-y-4 rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
+        <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue">
           {children}
         </div>
       </div>
     );
   } else {
     return (
-      <div className="p-4 space-y-4 text-center text-werefox-blue-dark dark:text-werefox-blue rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey-dark">
+      <div className="p-4 space-y-4 text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
         <WCT title={title} />
-        <div className="p-4 space-y-4 rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
+        <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-blue-dark dark:ring-skye-werefox-blue">
           {children}
         </div>
       </div>
diff --git a/src/info/pages/hrt/index.js b/src/info/pages/hrt/index.js
index 59e3f13..332ec2c 100644
--- a/src/info/pages/hrt/index.js
+++ b/src/info/pages/hrt/index.js
@@ -47,7 +47,7 @@ export default function HRT({ startTimes }) {
       page_button_title="Take me back home!"
     >
       <WCard title={`I'm so glad you're interested!!`}>
-        <div className="p-2 sm:text-xl text-lg text-center text-werefox-blue-dark dark:text-werefox-blue grid grid-cols-1 grid-rows-4 gap-2">
+        <div className="p-2 sm:text-xl text-lg text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue grid grid-cols-1 grid-rows-4 gap-2">
           <p>I've been on HRT for:</p>
           {Object.keys(timesArray).map((t) => (
             <p key={t}>{timesArray[t]}</p>
diff --git a/src/info/pages/projects/index.js b/src/info/pages/projects/index.js
index 6bc206c..954c15a 100644
--- a/src/info/pages/projects/index.js
+++ b/src/info/pages/projects/index.js
@@ -27,7 +27,7 @@ export default function Services({ PROJECTS }) {
       card_title="Some stuff I do!"
       page_button_title="Take me back home!"
     >
-      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+      <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-light dark:bg-skye-werefox-grey">
         <PBlock title="Personal Projects" cards={PROJECTS} />
       </div>
     </BasicPage>
diff --git a/src/info/pages/projects/other/index.js b/src/info/pages/projects/other/index.js
index 969e43c..c903113 100644
--- a/src/info/pages/projects/other/index.js
+++ b/src/info/pages/projects/other/index.js
@@ -31,7 +31,7 @@ export default function Services({ OTHER }) {
       page_button_title="Take me back!"
       back_url="/projects"
     >
-      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+      <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-light dark:bg-skye-werefox-grey">
         <PBlock title="Miscelaneous Projects" cards={OTHER} />
       </div>
     </BasicPage>
diff --git a/src/info/pages/projects/private/index.js b/src/info/pages/projects/private/index.js
index d1b0cff..8f39965 100644
--- a/src/info/pages/projects/private/index.js
+++ b/src/info/pages/projects/private/index.js
@@ -31,7 +31,7 @@ export default function Services({ PRIVATE }) {
       page_button_title="Take me back!"
       back_url="/projects"
     >
-      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+      <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-light dark:bg-skye-werefox-grey">
         <PBlock title="Private Services" cards={PRIVATE} />
       </div>
     </BasicPage>
diff --git a/src/info/pages/projects/services/index.js b/src/info/pages/projects/services/index.js
index f625562..16b7cb1 100644
--- a/src/info/pages/projects/services/index.js
+++ b/src/info/pages/projects/services/index.js
@@ -31,7 +31,7 @@ export default function Services({ SERVICES }) {
       page_button_title="Take me back!"
       back_url="/projects"
     >
-      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+      <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-light dark:bg-skye-werefox-grey">
         <PBlock title="Services" cards={SERVICES} />
       </div>
     </BasicPage>
diff --git a/src/info/pages/projects/streaming/index.js b/src/info/pages/projects/streaming/index.js
index 0743b66..84a0e24 100644
--- a/src/info/pages/projects/streaming/index.js
+++ b/src/info/pages/projects/streaming/index.js
@@ -31,7 +31,7 @@ export default function Services({ STREAMING }) {
       page_button_title="Take me back!"
       back_url="/projects"
     >
-      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+      <div className="rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-light dark:bg-skye-werefox-grey">
         <PBlock title="Streaming" cards={STREAMING} />
       </div>
     </BasicPage>
diff --git a/src/info/tailwind.config.js b/src/info/tailwind.config.js
index 137fa15..ddaf04a 100644
--- a/src/info/tailwind.config.js
+++ b/src/info/tailwind.config.js
@@ -7,25 +7,25 @@ module.exports = {
         nerd: ["DejaVuSansMono"],
       },
       colors: {
-        "werefox-cyan": {
+        "ada-werefox-cyan": {
           light: "#AAFFFF",
           DEFAULT: "#50FFFF",
           dark: "#008888",
         },
-        "werefox-blue": {
+        "skye-werefox-blue": {
           light: "#94C2FF",
           DEFAULT: "#75B1FF",
           dark: "#0052B8",
           darker: "#00377A",
           darkest: "#00326B",
         },
-        "werefox-pink": {
+        "skye-werefox-pink": {
           DEFAULT: "#FF84CA",
           dark: "#9E0054",
           darker: "#8A0040",
           darkest: "#75003F",
         },
-        "werefox-grey": {
+        "skye-werefox-grey": {
           lightest: "#EEE",
           lighter: "#DBDBDB",
           light: "#CCC",
@@ -33,6 +33,19 @@ module.exports = {
           dark: "#242424",
           darker: "#121212",
         },
+        "alice-werefox-red": {
+          light: "#FFCCCF",
+          DEFAULT: "#FF8F94",
+          dark: "#800008",
+          darker: "#550006",
+          darkest: "#7A0000",
+        },
+        "alice-werefox-blue": {
+          DEFAULT: "#B6A3FF",
+          dark: "#3300FF",
+          darker: "#2C00DB",
+          darkest: "#2700C2",
+        },
       },
       flex: {
         5: "5 5 0%",
