diff --git a/src/app/about/page.module.css b/src/app/about/page.module.css
index dffb2af8..773d16f5 100644
--- a/src/app/about/page.module.css
+++ b/src/app/about/page.module.css
@@ -1,7 +1,7 @@
-/* Questions card — custom border color (#7AFFB2 at 30% opacity) */
+/* Questions card — custom border color (bright-teal-300 at 30% opacity) */
 .questionsCard {
   padding: 40px;
-  border: 1px solid rgba(122, 255, 178, 0.3);
+  border: 1px solid color-mix(in srgb, var(--bright-teal-300) 30%, transparent);
   border-radius: 16px;
   align-self: flex-start;
 }
diff --git a/src/app/developers/page.module.css b/src/app/developers/page.module.css
index 329a0796..1c3c734a 100644
--- a/src/app/developers/page.module.css
+++ b/src/app/developers/page.module.css
@@ -83,8 +83,8 @@ a.endpointCard {
   flex: none;
   padding: 3px 8px;
   border-radius: 6px;
-  background-color: rgba(122, 255, 178, 0.12);
-  color: var(--bright-green);
+  background-color: color-mix(in srgb, var(--bright-teal-300) 12%, transparent);
+  color: var(--bright-teal-300);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
diff --git a/src/app/globals.css b/src/app/globals.css
index 818b4982..3169d03a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -216,7 +216,7 @@ label {
   color: var(--bright-teal-500);
 }
 .color-light-teal {
-  color: var(--bright-green);
+  color: var(--bright-teal-300);
 }
 .color-white {
   color: #fff;
@@ -227,7 +227,11 @@ label {
 
 .underline {
   text-decoration: underline;
-  text-decoration-color: rgba(122, 255, 178, 0.3);
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--bright-teal-300) 30%,
+    transparent
+  );
   text-underline-offset: 6px;
   transition: all var(--hover-transition);
 }
diff --git a/src/components/Navigation.module.css b/src/components/Navigation.module.css
index 06e8a46e..742baef0 100644
--- a/src/components/Navigation.module.css
+++ b/src/components/Navigation.module.css
@@ -89,7 +89,7 @@
   height: 40px;
   padding-left: 4px;
   padding-right: 16px;
-  border: 1px solid rgba(122, 255, 178, 0.3);
+  border: 1px solid color-mix(in srgb, var(--bright-teal-300) 30%, transparent);
   border-radius: 20px;
   flex: none;
   max-width: 100%;
@@ -108,7 +108,7 @@
   gap: 8px;
   height: 40px;
   padding: 0 16px;
-  border: 1px solid rgba(122, 255, 178, 0.3);
+  border: 1px solid color-mix(in srgb, var(--bright-teal-300) 30%, transparent);
   border-radius: 20px;
   transition: all var(--hover-transition);
   position: relative;
@@ -134,7 +134,7 @@
   height: 40px;
   padding-left: 4px;
   padding-right: 16px;
-  border: 1px solid rgba(122, 255, 178, 0.3);
+  border: 1px solid color-mix(in srgb, var(--bright-teal-300) 30%, transparent);
   border-radius: 20px;
   width: 100%;
   max-width: 100%;
diff --git a/src/components/SearchModal.module.css b/src/components/SearchModal.module.css
index 23489bed..85a18b61 100644
--- a/src/components/SearchModal.module.css
+++ b/src/components/SearchModal.module.css
@@ -71,7 +71,7 @@
 
 .filter-chip {
   flex: none;
-  background-color: var(--bright-green);
+  background-color: var(--bright-teal-300);
   color: var(--teal-900);
   border: none;
   border-radius: 999px;
@@ -80,7 +80,11 @@
 }
 
 .filter-chip:hover {
-  background-color: color-mix(in srgb, var(--bright-green) 80%, var(--white));
+  background-color: color-mix(
+    in srgb,
+    var(--bright-teal-300) 80%,
+    var(--white)
+  );
 }
 
 .filter-chip svg {
@@ -224,7 +228,7 @@
 
 .result-icon-initials {
   background-color: var(--teal-750);
-  color: var(--bright-green);
+  color: var(--bright-teal-300);
   border-radius: 50%;
 }
 
@@ -242,7 +246,7 @@
 }
 
 .result-subtitle {
-  color: var(--bright-green);
+  color: var(--bright-teal-300);
 }
 
 .result-description {