diff --git a/styles/base/colors.css b/styles/base/colors.css
index b85e5be..6a5dbdc 100644
--- a/styles/base/colors.css
+++ b/styles/base/colors.css
@@ -56,6 +56,9 @@
   --color-on-primary-fixed:     #00164e;
   --color-on-primary-fixed-variant: #264191;
 
+  --color-primary-12: rgba(182, 196, 255, 0.12);
+  --color-primary-87: #dce1ff;
+
   --color-success: #5ccf91;
   --color-warning: #f4e04d;
   --color-danger:  #cc3b3b;
diff --git a/styles/components/project-card.css b/styles/components/project-card.css
index 7e76b0e..42b8a30 100644
--- a/styles/components/project-card.css
+++ b/styles/components/project-card.css
@@ -34,7 +34,7 @@
 }
 
 .project-card__type {
-	background: rgba(182, 196, 255, 0.12);
+	background: var(--color-primary-12);
 	color: var(--color-primary, #b6c4ff);
 	padding: 0.25rem 0.5rem;
 	border-radius: 0.25rem;
@@ -104,7 +104,7 @@
 	border-color: var(--color-primary, #b6c4ff);
 }
 
-.project-card__action--primary:hover { background: #dce1ff; border-color: #dce1ff; }
+.project-card__action--primary:hover { background: var(--color-primary-87); border-color: var(--color-primary-87); }
 
 .project-card__action--secondary {
 	color: var(--color-on-surface, #e3e1e9);