diff --git a/src/app/apps/components/connector/connector.component.scss b/src/app/apps/components/connector/connector.component.scss
index cd79c71bc..bfd7bf1b4 100644
--- a/src/app/apps/components/connector/connector.component.scss
+++ b/src/app/apps/components/connector/connector.component.scss
@@ -36,7 +36,7 @@ $info-height: $file-list-row-height;
 	}
 
 	&.connector-facebook {
-		background-color: #1877f2;
+		background-color: $facebook-brand;
 		.logo-img {
 			height: 2 * $grid-unit;
 			background-image: url('/assets/img/facebook/f-logo-white.png');
@@ -44,7 +44,7 @@ $info-height: $file-list-row-height;
 	}
 
 	&.connector-familysearch {
-		background-color: #87ba41;
+		background-color: $familysearch-brand;
 		.logo-img {
 			background-image: url('/app/assets/img/familysearch/tree-name-logo.png');
 		}
diff --git a/src/app/auth/components/or-divider/or-divider.component.scss b/src/app/auth/components/or-divider/or-divider.component.scss
index 2df0d41be..d912bc08c 100644
--- a/src/app/auth/components/or-divider/or-divider.component.scss
+++ b/src/app/auth/components/or-divider/or-divider.component.scss
@@ -1,17 +1,18 @@
 @import 'fonts';
+@import 'colors';
 
 .or-divider {
 	display: flex;
 	align-items: center;
 	text-align: center;
-	color: #ffffff;
+	color: $PR-brand-white;
 	margin: 24px 0;
 }
 
 .line {
 	flex-grow: 1;
 	height: 1px;
-	background-color: rgba(255, 255, 255, 0.32);
+	background-color: rgba($PR-brand-white, 0.32);
 	margin: 0 10px;
 }
 
@@ -23,5 +24,5 @@
 	line-height: 16px;
 	letter-spacing: 2.24px;
 	padding: 0 10px;
-	color: rgba(255, 255, 255, 0.32);
+	color: rgba($PR-brand-white, 0.32);
 }
diff --git a/src/app/component-library/components/button/button.component.scss b/src/app/component-library/components/button/button.component.scss
index f21177b05..55510af12 100644
--- a/src/app/component-library/components/button/button.component.scss
+++ b/src/app/component-library/components/button/button.component.scss
@@ -1,11 +1,11 @@
 @import 'variables';
 
 @mixin darkButton($isLink: false) {
-	background-color: rgba(255, 255, 255, 0);
-	border: 1px solid rgba(255, 255, 255, 0.32);
+	background-color: rgba($PR-brand-white, 0);
+	border: 1px solid rgba($PR-brand-white, 0.32);
 
 	& > .button-text {
-		color: white;
+		color: $PR-brand-white;
 		margin: 0;
 		@include bodyMedium;
 
@@ -16,10 +16,10 @@
 }
 
 @mixin lightButton($isLink: false) {
-	background-color: $white;
-	border: 1px solid rgba(184, 187, 201, 1);
+	background-color: $PR-brand-white;
+	border: 1px solid rgba($PR-blue-200, 1);
 	& > .button-text {
-		color: rgba(19, 27, 74, 1);
+		color: rgba($PR-blue-900, 1);
 		margin: 0;
 		@include bodyMedium;
 
@@ -29,7 +29,7 @@
 	}
 
 	& > .icon {
-		color: rgba(19, 27, 74, 1);
+		color: rgba($PR-blue-900, 1);
 	}
 }
 
@@ -60,14 +60,14 @@
 	}
 
 	& > .icon {
-		color: white;
+		color: $PR-brand-white;
 	}
 
 	&-primary {
 		&.button-light {
 			@include darkButton();
 			&:focus {
-				border: 2px solid white;
+				border: 2px solid $PR-brand-white;
 			}
 		}
 		&.button-dark {
@@ -79,12 +79,12 @@
 		&.button-light {
 			@include lightButton();
 			&:focus {
-				border: 2px solid black;
+				border: 2px solid $PR-brand-black;
 			}
 		}
 		&.button-dark {
 			@include darkButton();
-			border: 1px solid rgba(255, 255, 255, 0.32);
+			border: 1px solid rgba($PR-brand-white, 0.32);
 		}
 	}
 
@@ -118,7 +118,7 @@
 	}
 
 	&-text {
-		color: white;
+		color: $PR-brand-white;
 		margin: 0;
 		@include bodyMedium;
 	}
diff --git a/src/app/component-library/components/checkbox/checkbox.component.scss b/src/app/component-library/components/checkbox/checkbox.component.scss
index 8da74d187..aefb94244 100644
--- a/src/app/component-library/components/checkbox/checkbox.component.scss
+++ b/src/app/component-library/components/checkbox/checkbox.component.scss
@@ -49,7 +49,7 @@
 
 .checkbox-container-enabled.checkbox-container-primary {
 	& > .checkbox {
-		border: 2.5px solid rgba(19, 27, 74, 1);
+		border: 2.5px solid rgba($PR-blue-900, 1);
 		transition: background-color 0.2s;
 		border-radius: 4px;
 	}
@@ -57,7 +57,7 @@
 	& > .checkbox::after {
 		content: '';
 		position: absolute;
-		background-color: rgba(19, 27, 74, 1);
+		background-color: rgba($PR-blue-900, 1);
 		transition: opacity 0.2s;
 		opacity: 0;
 		border-radius: 2px;
@@ -71,13 +71,13 @@
 	}
 
 	& > label {
-		color: rgba(19, 27, 74, 1);
+		color: rgba($PR-blue-900, 1);
 	}
 }
 
 .checkbox-container-enabled.checkbox-container-secondary {
 	& > .checkbox {
-		border: 2.5px solid white;
+		border: 2.5px solid $PR-brand-white;
 		transition: background-color 0.2s;
 		border-radius: 4px;
 	}
@@ -85,7 +85,7 @@
 	& > .checkbox::after {
 		content: '';
 		position: absolute;
-		background-color: white;
+		background-color: $PR-brand-white;
 		transition: opacity 0.2s;
 		opacity: 0;
 		border-radius: 2px;
@@ -99,14 +99,14 @@
 	}
 
 	& > label {
-		color: white;
+		color: $PR-brand-white;
 	}
 }
 
 .checkbox-container-disabled.checkbox-container-primary {
 	cursor: not-allowed;
 	& > .checkbox {
-		border: 1px solid #646464;
+		border: 1px solid $gray-dark;
 		transition: background-color 0.2s;
 	}
 
@@ -114,7 +114,7 @@
 	& > .checkbox::after {
 		content: '';
 		position: absolute;
-		background-color: white;
+		background-color: $PR-brand-white;
 		transition: opacity 0.2s;
 		opacity: 0;
 		border-radius: 2px;
@@ -124,7 +124,7 @@
 
 	& > .checkbox {
 		background-color: $gray-light;
-		border: 1px solid #646464;
+		border: 1px solid $gray-dark;
 	}
 
 	& > .checkbox::before,
@@ -140,7 +140,7 @@
 .checkbox-container-disabled.checkbox-container-secondary {
 	cursor: not-allowed;
 	& > .checkbox {
-		border: 1px solid #646464;
+		border: 1px solid $gray-dark;
 		transition: background-color 0.2s;
 	}
 
@@ -148,7 +148,7 @@
 	& > .checkbox::after {
 		content: '';
 		position: absolute;
-		background-color: white;
+		background-color: $PR-brand-white;
 		transition: opacity 0.2s;
 		opacity: 0;
 		border-radius: 2px;
@@ -158,7 +158,7 @@
 
 	& > .checkbox {
 		background-color: $gray-light;
-		border: 1px solid #646464;
+		border: 1px solid $gray-dark;
 	}
 
 	& > .checkbox::before,
@@ -178,23 +178,23 @@ label {
 
 .checkbox-container-enabled.checkbox-container-secondary.checkbox-container-secondary-onboarding {
 	& > .checkbox.checked {
-		border: 2.5px solid white;
+		border: 2.5px solid $PR-brand-white;
 		transition: background-color 0.2s;
 		border-radius: 4px;
-		background-color: white;
+		background-color: $PR-brand-white;
 	}
 	& > .checkbox.checked::before,
 	& > .checkbox.checked::after {
 		content: '';
 		position: absolute;
-		background-color: white;
+		background-color: $PR-brand-white;
 		transition: opacity 0.2s;
 		opacity: 0;
 		border-radius: 2px;
 		background: linear-gradient(
 			to right,
 			rgba(184, 67, 166, 1),
-			rgba(128, 0, 128, 1)
+			rgba($PR-brand-purple, 1)
 		);
 	}
 
@@ -206,6 +206,6 @@ label {
 	}
 
 	& > label {
-		color: white;
+		color: $PR-brand-white;
 	}
 }
diff --git a/src/app/component-library/components/form-input/form-input.component.scss b/src/app/component-library/components/form-input/form-input.component.scss
index 226d80c07..5d7fb43e4 100644
--- a/src/app/component-library/components/form-input/form-input.component.scss
+++ b/src/app/component-library/components/form-input/form-input.component.scss
@@ -44,17 +44,17 @@
 	}
 
 	&-dark {
-		background: rgba(255, 255, 255, 0.08);
+		background: rgba($PR-brand-white, 0.08);
 		opacity: 0.8;
-		color: white;
-		border: 1px solid rgba(255, 255, 255, 0.16);
+		color: $PR-brand-white;
+		border: 1px solid rgba($PR-brand-white, 0.16);
 		&:focus {
 			background-color: $form-background-dark !important;
 			opacity: 1;
 			border: 1px solid $form-border;
 		}
 		&::placeholder {
-			color: white;
+			color: $PR-brand-white;
 		}
 	}
 }
diff --git a/src/app/component-library/components/toggle/toggle.component.scss b/src/app/component-library/components/toggle/toggle.component.scss
index 0cbe57914..d5ce49dbf 100644
--- a/src/app/component-library/components/toggle/toggle.component.scss
+++ b/src/app/component-library/components/toggle/toggle.component.scss
@@ -21,13 +21,13 @@
 		height: 20px;
 		border-radius: 25px;
 		position: relative;
-		background-color: rgba(255, 255, 255, 0.32);
+		background-color: rgba($PR-brand-white, 0.32);
 		transition: background-color 0.2s;
 
 		& > .toggle-knob {
 			width: 15px;
 			height: 15px;
-			background-color: $white;
+			background-color: $PR-brand-white;
 			border-radius: 50%;
 			position: absolute;
 			top: 2.5px;
diff --git a/src/app/core/components/upload-button/upload-button.component.scss b/src/app/core/components/upload-button/upload-button.component.scss
index c49f704ef..a49abb6eb 100644
--- a/src/app/core/components/upload-button/upload-button.component.scss
+++ b/src/app/core/components/upload-button/upload-button.component.scss
@@ -3,7 +3,7 @@
 $padding-x: $navbar-button-icon-padding;
 
 .btn-alternate {
-	color: white;
+	color: $PR-brand-white;
 	margin-bottom: 0;
 	padding-left: $padding-x;
 	padding-right: $padding-x;
diff --git a/src/app/core/components/upload-progress/upload-progress.component.scss b/src/app/core/components/upload-progress/upload-progress.component.scss
index 6a3e8aad1..24ca2473e 100644
--- a/src/app/core/components/upload-progress/upload-progress.component.scss
+++ b/src/app/core/components/upload-progress/upload-progress.component.scss
@@ -73,7 +73,7 @@ $easing: $tweaked-ease;
 	display: block;
 	margin: 0 auto;
 	visibility: hidden;
-	background: white;
+	background: $PR-brand-white;
 	position: relative;
 
 	&.visible {
diff --git a/src/app/file-browser/components/download-button/download-button.component.scss b/src/app/file-browser/components/download-button/download-button.component.scss
index e3e5cf289..bb6d0b479 100644
--- a/src/app/file-browser/components/download-button/download-button.component.scss
+++ b/src/app/file-browser/components/download-button/download-button.component.scss
@@ -1,3 +1,5 @@
+@import 'colors';
+
 @mixin flex {
 	display: flex;
 	align-items: center;
@@ -7,7 +9,7 @@
 	cursor: pointer;
 	display: flex;
 	justify-content: space-between;
-	border-bottom: 1px solid black;
+	border-bottom: 1px solid $PR-brand-black;
 	border-radius: 4px;
 	padding-bottom: 6px;
 
@@ -27,8 +29,8 @@
 	width: 211px;
 	height: fit-content;
 	box-shadow:
-		0px 2px 2px rgba(0, 0, 0, 0.24),
-		0px 0px 2px rgba(0, 0, 0, 0.12);
+		0px 2px 2px rgba($PR-brand-black, 0.24),
+		0px 0px 2px rgba($PR-brand-black, 0.12);
 	padding: 0.5rem 0;
 	margin-left: 3rem;
 	&-file-viewer {
diff --git a/src/app/shared/components/audio/audio.component.scss b/src/app/shared/components/audio/audio.component.scss
index b62e80ebb..4aed56ea7 100644
--- a/src/app/shared/components/audio/audio.component.scss
+++ b/src/app/shared/components/audio/audio.component.scss
@@ -1,3 +1,5 @@
+@import 'colors';
+
 :host {
 	position: absolute;
 	top: 0;
@@ -7,5 +9,5 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background: white;
+	background: $PR-brand-white;
 }
diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss b/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss
index a746c6426..7de57e929 100644
--- a/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss
@@ -17,7 +17,7 @@ pr-breadcrumb {
 	display: flex;
 	flex: 0 1 auto;
 	min-width: 0; // ✅ allow shrinking in flex layout
-	color: white;
+	color: $PR-brand-white;
 	white-space: normal;
 	word-break: break-word;
 	overflow-wrap: anywhere;
@@ -27,7 +27,7 @@ pr-breadcrumb {
 	}
 
 	a {
-		color: white;
+		color: $PR-brand-white;
 		text-decoration: none;
 
 		display: inline;
@@ -94,7 +94,7 @@ pr-breadcrumb {
 	.breadcrumb-shares-archives {
 		position: fixed;
 		top: $navbar-height-desktop;
-		background: white;
+		background: $PR-brand-white;
 		z-index: 100;
 	}
 }
diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.scss b/src/app/shared/components/datepicker-input/datepicker-input.component.scss
index cb93355ef..c8dde7bb3 100644
--- a/src/app/shared/components/datepicker-input/datepicker-input.component.scss
+++ b/src/app/shared/components/datepicker-input/datepicker-input.component.scss
@@ -47,7 +47,7 @@
 	align-items: center;
 
 	&:hover {
-		color: $PR-blue;
+		color: $PR-blue-900;
 	}
 
 	&.disabled {
@@ -67,10 +67,10 @@
 	z-index: 10;
 	margin-top: 4px;
 	width: fit-content;
-	background: $white;
+	background: $PR-brand-white;
 	border: 1px solid $PR-blue-100;
 	border-radius: 8px;
-	box-shadow: 0 4px 16px rgba($black, 0.12);
+	box-shadow: 0 4px 16px rgba($PR-brand-black, 0.12);
 	padding: 8px;
 
 	::ng-deep ngb-datepicker {
@@ -113,8 +113,8 @@
 				}
 
 				&.bg-primary {
-					background: $PR-blue !important;
-					color: $white;
+					background: $PR-blue-900 !important;
+					color: $PR-brand-white;
 					border-radius: 6px;
 				}
 			}
diff --git a/src/app/shared/components/message/message.component.scss b/src/app/shared/components/message/message.component.scss
index 5bf051e9c..b2f047b2b 100644
--- a/src/app/shared/components/message/message.component.scss
+++ b/src/app/shared/components/message/message.component.scss
@@ -1,3 +1,5 @@
+@import 'colors';
+
 $transition-length: 0.33s;
 
 :host {
@@ -15,7 +17,7 @@ $transition-length: 0.33s;
 	border-top-left-radius: 0px;
 	border-top-right-radius: 0px;
 	border-top: none;
-	box-shadow: 0 1rem 1rem rgb(0 0 0 / 15%);
+	box-shadow: 0 1rem 1rem rgba($PR-brand-black, 0.15);
 	padding-top: 0px;
 }
 
diff --git a/src/app/shared/components/tags/tags.component.scss b/src/app/shared/components/tags/tags.component.scss
index 3e7573d3f..6fca5b35f 100644
--- a/src/app/shared/components/tags/tags.component.scss
+++ b/src/app/shared/components/tags/tags.component.scss
@@ -40,7 +40,7 @@ $gutter-size: 0.25rem;
 		}
 		.customMetadataField {
 			border-radius: 0.5rem 0rem 0rem 0.5rem;
-			color: $white;
+			color: $PR-brand-white;
 			background: $PR-blue-light;
 			max-width: 6.5rem;
 		}
diff --git a/src/app/shared/components/thumbnail/thumbnail.component.scss b/src/app/shared/components/thumbnail/thumbnail.component.scss
index 08aca384b..8d3a053d4 100644
--- a/src/app/shared/components/thumbnail/thumbnail.component.scss
+++ b/src/app/shared/components/thumbnail/thumbnail.component.scss
@@ -25,7 +25,7 @@
 
 .pr-thumbnail-icon {
 	fa-icon {
-		color: #000;
+		color: $PR-brand-black;
 		user-select: none;
 		font-size: 7.8rem;
 	}
diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.scss b/src/app/shared/components/timepicker-input/timepicker-input.component.scss
index fc34d247b..1c961c2a5 100644
--- a/src/app/shared/components/timepicker-input/timepicker-input.component.scss
+++ b/src/app/shared/components/timepicker-input/timepicker-input.component.scss
@@ -74,7 +74,7 @@
 	align-items: center;
 
 	&:hover {
-		color: $PR-blue;
+		color: $PR-blue-900;
 	}
 
 	&.disabled {
@@ -95,10 +95,10 @@
 	z-index: 10;
 	margin-top: 4px;
 	width: fit-content;
-	background: $white;
+	background: $PR-brand-white;
 	border: 1px solid $PR-blue-100;
 	border-radius: 8px;
-	box-shadow: 0 4px 16px rgba($black, 0.12);
+	box-shadow: 0 4px 16px rgba($PR-brand-black, 0.12);
 	padding: 12px;
 
 	::ng-deep ngb-timepicker {
@@ -130,7 +130,7 @@
 			padding: 4px;
 
 			&:focus {
-				border-color: $PR-blue;
+				border-color: $PR-blue-900;
 				outline: none;
 			}
 		}
@@ -139,7 +139,7 @@
 			color: $PR-blue-600;
 
 			&:hover {
-				color: $PR-blue;
+				color: $PR-blue-900;
 			}
 		}
 
@@ -151,7 +151,7 @@
 				padding: 4px 12px;
 				font-size: 12px;
 				font-weight: 600;
-				color: $PR-blue;
+				color: $PR-blue-900;
 
 				&:hover {
 					background: $PR-blue-100;
diff --git a/src/app/shared/components/video/video.component.scss b/src/app/shared/components/video/video.component.scss
index b23e98864..dbee7bdae 100644
--- a/src/app/shared/components/video/video.component.scss
+++ b/src/app/shared/components/video/video.component.scss
@@ -26,7 +26,7 @@
 	}
 
 	&.processing {
-		background-color: rgba(white, 0.7);
+		background-color: rgba($PR-brand-white, 0.7);
 		video,
 		.loader {
 			display: none;
diff --git a/src/app/user-checklist/components/task-icon/task-icon.component.scss b/src/app/user-checklist/components/task-icon/task-icon.component.scss
index 33f5c28fc..015003e46 100644
--- a/src/app/user-checklist/components/task-icon/task-icon.component.scss
+++ b/src/app/user-checklist/components/task-icon/task-icon.component.scss
@@ -1,5 +1,7 @@
+@import 'colors';
+
 div:not(.completed) svg path {
-	fill: #131b4a;
+	fill: $PR-blue-900;
 }
 
 div.completed svg path {
diff --git a/src/styles/_loaders.scss b/src/styles/_loaders.scss
index d54d4576a..3dd54d53c 100644
--- a/src/styles/_loaders.scss
+++ b/src/styles/_loaders.scss
@@ -16,8 +16,8 @@ $dual-ring-size: 95px;
 	height: $dual-ring-size;
 	margin: 1px;
 	border-radius: 50%;
-	border: 6px solid $PR-blue;
-	border-color: $PR-blue transparent $PR-blue transparent;
+	border: 6px solid $PR-blue-900;
+	border-color: $PR-blue-900 transparent $PR-blue-900 transparent;
 	animation: lds-dual-ring 1.5s linear infinite;
 }
 
@@ -103,7 +103,7 @@ $fade-ring-opacity: 0.6;
 	content: '';
 }
 .fade-ring-loader:after {
-	background: $PR-blue;
+	background: $PR-blue-900;
 	width: 75%;
 	height: 75%;
 	border-radius: 50%;
diff --git a/src/styles/_profile.scss b/src/styles/_profile.scss
index 261a32060..959e22130 100644
--- a/src/styles/_profile.scss
+++ b/src/styles/_profile.scss
@@ -16,7 +16,7 @@ $profile-sidebar-width: pxToGrid(360px);
 
 	&.show-gradient {
 		$list:
-			$PR-blue 0%,
+			$PR-blue-900 0%,
 			$PR-purple 66%,
 			mix($PR-purple, $PR-orange, 50%) 100%;
 		@include gradient(to top left, $list);
diff --git a/src/styles/_timeline.scss b/src/styles/_timeline.scss
index a1c740b20..9d5a12f02 100644
--- a/src/styles/_timeline.scss
+++ b/src/styles/_timeline.scss
@@ -12,8 +12,8 @@
 		}
 
 		&.timeline-perm-blue {
-			border-color: $PR-blue;
-			background-color: lighten($PR-blue, 70%);
+			border-color: $PR-blue-900;
+			background-color: lighten($PR-blue-900, 70%);
 		}
 
 		&.timeline-perm-purple {
@@ -24,8 +24,8 @@
 
 	// .vis-item {
 	//   cursor: pointer;
-	//   border-color: $PR-blue;
-	//   background-color: lighten($PR-blue, 70%);
+	//   border-color: $PR-blue-900;
+	//   background-color: lighten($PR-blue-900, 70%);
 	// }
 
 	// .vis-item {
diff --git a/src/styles/_ui.scss b/src/styles/_ui.scss
index 8844d5caf..3237aad4d 100644
--- a/src/styles/_ui.scss
+++ b/src/styles/_ui.scss
@@ -249,7 +249,7 @@ button.btn-wordpress-alternate {
 	height: 100px;
 	padding: 0px 0.5rem;
 	color: white;
-	background-color: $PR-blue;
+	background-color: $PR-blue-900;
 
 	.banner-content {
 		margin: 0 auto;