diff --git a/www/wip_new_website/content/index.md b/www/wip_new_website/content/index.md
index db6a5800fe..98272194c2 100644
--- a/www/wip_new_website/content/index.md
+++ b/www/wip_new_website/content/index.md
@@ -1,15 +1,14 @@
 <div role="presentation" id="homepage-intro-box">
   <h1 id="homepage-h1">Roc</h1>
   <svg id="homepage-logo" alt="The Roc logo, a purple origami bird made of six triangles" width="240" height="240" viewBox="0 0 51 53" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M23.6751 22.7086L17.655 53L27.4527 45.2132L26.4673 39.3424L23.6751 22.7086Z" fill="#612BDE"/>
-      <path d="M37.2438 19.0101L44.0315 26.3689L45 22L45.9665 16.6324L37.2438 19.0101Z" fill="#8257E5"/>
-      <path d="M23.8834 3.21052L0 0L23.6751 22.7086L23.8834 3.21052Z" fill="#8257E5"/>
-      <path d="M44.0315 26.3689L23.6751 22.7086L26.4673 39.3424L44.0315 26.3689Z" fill="#8257E5"/>
-      <path d="M50.5 22L45.9665 16.6324L45 22H50.5Z" fill="#612BDE"/>
-      <path d="M23.6751 22.7086L44.0315 26.3689L37.2438 19.0101L23.8834 3.21052L23.6751 22.7086Z" fill="#612BDE"/>
+      <path d="M23.6751 22.7086L17.655 53L27.4527 45.2132L26.4673 39.3424L23.6751 22.7086Z" class="logo-dark"/>
+      <path d="M37.2438 19.0101L44.0315 26.3689L45 22L45.9665 16.6324L37.2438 19.0101Z" class="logo-light"/>
+      <path d="M23.8834 3.21052L0 0L23.6751 22.7086L23.8834 3.21052Z" class="logo-light"/>
+      <path d="M44.0315 26.3689L23.6751 22.7086L26.4673 39.3424L44.0315 26.3689Z" class="logo-light"/>
+      <path d="M50.5 22L45.9665 16.6324L45 22H50.5Z" class="logo-dark"/>
+      <path d="M23.6751 22.7086L44.0315 26.3689L37.2438 19.0101L23.8834 3.21052L23.6751 22.7086Z" class="logo-dark"/>
   </svg>
 
-
   <p id="homepage-tagline">A fast, friendly, functional language.</p>
 
   <!-- This exact sample was chosen for several reasons:
diff --git a/www/wip_new_website/static/site.css b/www/wip_new_website/static/site.css
index 8420df42f1..9e1c695af5 100644
--- a/www/wip_new_website/static/site.css
+++ b/www/wip_new_website/static/site.css
@@ -66,6 +66,14 @@ footer {
     margin: 0 auto;
 }
 
+.logo-dark {
+    fill: #612BDE;
+}
+
+.logo-light {
+    fill: #8257E5;
+}
+
 /* Used for e.g. displaying the instruction "Click" on desktop and "Touch" on mobile.
  * When we think we're on mobile (based on max-width), we can switch the instruction.
 */
@@ -643,6 +651,14 @@ li {
         --heading-color: #eee;
     }
 
+    .logo-dark {
+        fill: #6c3bdc;
+    }
+
+    .logo-light {
+        fill: #8A66DE;
+    }
+
     #homepage-h1 {
         color: #fcf9fd;
     }