diff --git a/apps/website/src/pages/GetStarted/get-started.css b/apps/website/src/pages/GetStarted/get-started.css
index 09ddb6217..74c457644 100644
--- a/apps/website/src/pages/GetStarted/get-started.css
+++ b/apps/website/src/pages/GetStarted/get-started.css
@@ -94,9 +94,9 @@
             transform: scale(1);
         }
 
-        &:first-of-type { --accent-color: var(--brand-1); }
-        &:nth-of-type(2) { --accent-color: var(--brand-2); }
-        &:last-of-type { --accent-color: var(--brand-3); }
+        &.windows { --accent-color: var(--brand-1); }
+        &.linux { --accent-color: var(--brand-2); }
+        &.macos { --accent-color: var(--brand-3); }
     }
 
     .download-footer {
diff --git a/apps/website/src/pages/GetStarted/get-started.tsx b/apps/website/src/pages/GetStarted/get-started.tsx
index f458c9e4d..c418314ae 100644
--- a/apps/website/src/pages/GetStarted/get-started.tsx
+++ b/apps/website/src/pages/GetStarted/get-started.tsx
@@ -90,7 +90,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ], isRecommen
                     )}
                     </>
             }
-            className={`download-card ${isRecommended ? "recommended" : ""}`}
+            className={`download-card ${platform} ${isRecommended ? "recommended" : ""}`}
         >
             {unwrapText(entry.description)}