diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index 353b0bad..8846b2b7 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -267,7 +267,7 @@
 .flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:hover,
 .flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(0, 0, 0, 0.04) !important;
-  color: #1a3a5c !important;
+  color: colors.$blue-dark !important;
 }
 
 // Leaflet city tooltips: text-only with white text-shadow halo, matching
diff --git a/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss b/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss
index 81d8b9c7..91d62c14 100644
--- a/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss
+++ b/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss
@@ -79,12 +79,12 @@
     text-align: right;
   }
 
-  // Depart/arrive times inside the mini-list item: 20px / 500 / #022040
+  // Depart/arrive times inside the mini-list item: 20px / 500 / colors.$blue-dark
   // (dark navy) to match Angular's big time-group.
   &__time {
     font-size: 20px;
     font-weight: 500;
-    color: #022040;
+    color: colors.$blue-dark;
     line-height: 1;
   }
 
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index 1ba8e250..b9e99528 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -30,12 +30,12 @@
     line-height: 1;
   }
 
-  // Route-strip times. Angular: 20px/500/#022040 bold navy; strike-through
+  // Route-strip times. Angular: 20px/500/colors.$blue-dark bold navy; strike-through
   // slot underneath renders at 12px in the brand orange.
   &__time {
     font-size: 20px;
     font-weight: 500;
-    color: #022040;
+    color: colors.$blue-dark;
     line-height: 1.1;
 
     &-strike {
@@ -208,7 +208,7 @@
     &-value {
       font-size: 12px;
       font-weight: 400;
-      color: #022040;
+      color: colors.$blue-dark;
     }
 
     &-offset {
diff --git a/src/features/schedule/components/DayGroupedFlightList.scss b/src/features/schedule/components/DayGroupedFlightList.scss
index dca23c0b..187a2e73 100644
--- a/src/features/schedule/components/DayGroupedFlightList.scss
+++ b/src/features/schedule/components/DayGroupedFlightList.scss
@@ -87,7 +87,7 @@
 
   &__date {
     margin: 0;
-    color: #022040;
+    color: colors.$blue-dark;
     font-size: 18px;
     font-weight: 500;
   }
diff --git a/src/features/schedule/components/WeekTabs.scss b/src/features/schedule/components/WeekTabs.scss
index 80f3c0bd..daf0bf35 100644
--- a/src/features/schedule/components/WeekTabs.scss
+++ b/src/features/schedule/components/WeekTabs.scss
@@ -20,7 +20,7 @@
 
     &:hover:not(:disabled) {
       background: rgba(0, 0, 0, 0.04);
-      color: #1a3a5c;
+      color: colors.$blue-dark;
     }
     &:disabled {
       opacity: 0.3;
@@ -52,7 +52,7 @@
 
     &--active {
       background: #fff;
-      color: #022040;
+      color: colors.$blue-dark;
       font-weight: 600;
       box-shadow: inset 0 -2px 0 #2563eb;
       cursor: default;
diff --git a/src/ui/layout/PageLayout.scss b/src/ui/layout/PageLayout.scss
index 14be613e..b36b415b 100644
--- a/src/ui/layout/PageLayout.scss
+++ b/src/ui/layout/PageLayout.scss
@@ -1,4 +1,5 @@
 @use "../../styles/variables" as vars;
+@use "../../styles/colors" as colors;
 @use "../../styles/screen" as screen;
 
 .page-layout {
@@ -141,7 +142,7 @@
       left: 0;
       width: calc(100% - 20px);
       height: 25px;
-      background-color: #022040;
+      background-color: colors.$blue-dark;
       background-image: url("/assets/img/background.jpg");
       background-repeat: no-repeat;
       background-size: 100vw;