diff --git a/README.md b/README.md
index e3a2d04..3646174 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,8 @@ See `.env.example` for an example of the required keys and values.
 - `PUBLIC_OBA_REGION_NAME` - string: (required) displayed in the header.
 - `PUBLIC_OBA_LOGO_URL` - string: (required) The URL of your transit agency's logo.
 - `PUBLIC_NAV_BAR_LINKS` - JSON string: (required) A dictionary of the links displayed across the navigation bar.
+- `PUBLIC_APP_PRIMARY_COLOR` - string: (required) The hex color code for the application's primary brand color. Must be wrapped in quotes (e.g., "#214666").
+- `PUBLIC_APP_SECONDARY_COLOR` - string: (required) The hex color code for the application's secondary brand color. Must be wrapped in quotes (e.g., "#486621").
 
 ### OBA Server
 
diff --git a/package-lock.json b/package-lock.json
index a074611..d694cc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
 				"@googlemaps/js-api-loader": "^1.16.8",
 				"@maplibre/maplibre-gl-leaflet": "^0.0.22",
 				"@tailwindcss/forms": "^0.5.9",
-				"dotenv": "^16.4.5",
+				"dotenv": "^16.4.7",
 				"gtfs-realtime-bindings": "^1.1.1",
 				"leaflet": "^1.9.4",
 				"leaflet-polylinedecorator": "^1.6.0",
@@ -2563,9 +2563,9 @@
 			"license": "MIT"
 		},
 		"node_modules/dotenv": {
-			"version": "16.4.5",
-			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
-			"integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+			"version": "16.4.7",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+			"integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
 			"license": "BSD-2-Clause",
 			"engines": {
 				"node": ">=12"
diff --git a/package.json b/package.json
index b5c71e9..23ede08 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
 		"@googlemaps/js-api-loader": "^1.16.8",
 		"@maplibre/maplibre-gl-leaflet": "^0.0.22",
 		"@tailwindcss/forms": "^0.5.9",
-		"dotenv": "^16.4.5",
+		"dotenv": "^16.4.7",
 		"gtfs-realtime-bindings": "^1.1.1",
 		"leaflet": "^1.9.4",
 		"leaflet-polylinedecorator": "^1.6.0",
diff --git a/src/app.css b/src/app.css
index 91088bd..6a4385b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,7 +28,7 @@
 	}
 
 	.tab-container__item--active {
-		@apply border-b-2 border-green-500 text-green-500;
+		@apply border-b-2 border-brand-secondary text-brand-secondary;
 	}
 
 	.button {
@@ -36,7 +36,7 @@
 	}
 
 	.button--primary {
-		@apply rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600;
+		@apply rounded-md bg-brand-secondary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-secondary;
 	}
 
 	.rtl {
diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index 8cba661..8b62d24 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -36,7 +36,7 @@
 			return {
 				status: `${$t('status.on_time')}`,
 				text: `${$t('status.arrives_on_time')}`,
-				color: 'text-green-500'
+				color: 'text-brand'
 			};
 		} else {
 			return {
diff --git a/src/components/map/StopMarker.svelte b/src/components/map/StopMarker.svelte
index b993847..b95ca61 100644
--- a/src/components/map/StopMarker.svelte
+++ b/src/components/map/StopMarker.svelte
@@ -40,7 +40,7 @@
 	}
 
 	.highlight {
-		@apply scale-125 border-green-600 drop-shadow-md;
+		@apply scale-125 border-brand-secondary drop-shadow-md;
 	}
 
 	.custom-marker:hover {
diff --git a/src/components/map/VehiclePopupContent.svelte b/src/components/map/VehiclePopupContent.svelte
index be858b2..305c27a 100644
--- a/src/components/map/VehiclePopupContent.svelte
+++ b/src/components/map/VehiclePopupContent.svelte
@@ -14,7 +14,7 @@
 
 <div class="max-w-xs rounded-lg bg-white p-4 text-gray-800 shadow-md">
 	<div class="mb-2 flex items-center">
-		<div class="rounded bg-green-100 px-2 py-1 text-lg font-bold text-green-600">
+		<div class="rounded bg-green-100 px-2 py-1 text-lg font-bold text-brand-secondary">
 			{nextDestination}
 		</div>
 	</div>
diff --git a/src/components/navigation/AlertsModal.svelte b/src/components/navigation/AlertsModal.svelte
index fe90050..2bc3c69 100644
--- a/src/components/navigation/AlertsModal.svelte
+++ b/src/components/navigation/AlertsModal.svelte
@@ -42,7 +42,7 @@
 				{$t('alert.close')}
 			</Button>
 			<Button
-				class="bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600"
+				class="bg-brand-secondary text-white hover:bg-brand-secondary dark:bg-brand dark:hover:bg-brand-secondary"
 				on:click={() => window.open(getUrlTranslation(), '_blank')}
 			>
 				{$t('alert.more_info')}
diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte
index 0316135..cc1a2c8 100644
--- a/src/components/oba/TripDetailsPane.svelte
+++ b/src/components/oba/TripDetailsPane.svelte
@@ -104,7 +104,7 @@
 							{#if index === busPosition}
 								<FontAwesomeIcon
 									icon={faBus}
-									class="absolute bg-white text-xl text-green-500 dark:bg-black"
+									class="absolute bg-white text-xl text-brand dark:bg-black"
 								/>
 							{/if}
 							{#if tripStop.stopId === stop.id}
diff --git a/src/components/routes/RouteModal.svelte b/src/components/routes/RouteModal.svelte
index a5b752c..80ec599 100644
--- a/src/components/routes/RouteModal.svelte
+++ b/src/components/routes/RouteModal.svelte
@@ -22,7 +22,7 @@
 	{#if stops && selectedRoute}
 		<div class="space-y-4">
 			<div>
-				<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
+				<div class="h-36 rounded-lg bg-brand-secondary bg-opacity-80 p-4">
 					<h1 class="mb-6 text-center text-2xl font-bold text-white">
 						Route: {selectedRoute.shortName}
 					</h1>
diff --git a/src/components/search/SearchPane.svelte b/src/components/search/SearchPane.svelte
index e978eaa..85f02f7 100644
--- a/src/components/search/SearchPane.svelte
+++ b/src/components/search/SearchPane.svelte
@@ -170,7 +170,7 @@
 			<div class="mt-0 sm:mt-0">
 				<button
 					type="button"
-					class="mt-3 text-sm font-medium text-green-600 underline hover:text-green-400 focus:outline-none"
+					class="mt-3 text-sm font-medium text-brand-secondary underline hover:text-brand focus:outline-none"
 					onclick={handleViewAllRoutes}
 				>
 					{$t('search.click_here')}
diff --git a/src/components/stops/StopPageHeader.svelte b/src/components/stops/StopPageHeader.svelte
index ca04e5e..d67fa6d 100644
--- a/src/components/stops/StopPageHeader.svelte
+++ b/src/components/stops/StopPageHeader.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div class="my-4 text-center">
-	<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-green-700">
+	<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-brand-secondary">
 		{stopName}
 	</h1>
 	<div class="text-normal mt-2 flex items-center justify-center gap-x-8 text-gray-700">
diff --git a/src/components/stops/StopPane.svelte b/src/components/stops/StopPane.svelte
index fb0974b..212b940 100644
--- a/src/components/stops/StopPane.svelte
+++ b/src/components/stops/StopPane.svelte
@@ -97,7 +97,9 @@
 		{#if arrivalsAndDepartures}
 			<div class="space-y-4">
 				<div>
-					<div class="relative flex flex-col gap-y-1 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
+					<div
+						class="relative flex flex-col gap-y-1 rounded-lg bg-brand-secondary bg-opacity-80 p-4"
+					>
 						<h1 class="h1 mb-0 text-white">{stop.name}</h1>
 						<h2 class="h2 mb-0 text-white">{$t('stop')} #{stop.id}</h2>
 						{#if routeShortNames()}
@@ -106,7 +108,7 @@
 						<div class="mt-auto flex justify-end">
 							<a
 								href={`/stops/${stop.id}/schedule`}
-								class="inline-block rounded-lg border border-green-500 bg-green-500 px-3 py-1 text-sm font-medium text-white shadow-md transition duration-200 ease-in-out hover:bg-green-600"
+								class="inline-block rounded-lg border border-brand bg-brand px-3 py-1 text-sm font-medium text-white shadow-md transition duration-200 ease-in-out hover:bg-brand-secondary"
 								target="_blank"
 							>
 								{$t('schedule_for_stop.view_schedule')}
diff --git a/src/components/trip-planner/LegDetails.svelte b/src/components/trip-planner/LegDetails.svelte
index 2b23901..95e9723 100644
--- a/src/components/trip-planner/LegDetails.svelte
+++ b/src/components/trip-planner/LegDetails.svelte
@@ -29,7 +29,7 @@
 			break;
 		case 'BUS':
 			icon = faBus;
-			iconColor = 'text-green-600';
+			iconColor = 'text-brand-secondary';
 			break;
 		case 'TRAIN':
 			icon = faTrain;
@@ -54,7 +54,7 @@
 
 <div class="relative flex items-start pb-8">
 	<div
-		class="absolute left-5 top-5 border-l-4 border-green-400 {isWalking
+		class="absolute left-5 top-5 border-l-4 border-brand {isWalking
 			? 'border-dotted'
 			: 'border-gray-300'} h-full"
 	></div>
@@ -92,7 +92,7 @@
 
 		<div class="mt-4 space-y-4 text-sm text-gray-600 dark:text-gray-100">
 			<div class="mb-2 flex items-center">
-				<FontAwesomeIcon icon={faArrowRight} class="mr-2 text-green-500" />
+				<FontAwesomeIcon icon={faArrowRight} class="mr-2 text-brand" />
 				<span class="font-medium">{leg.to.name}</span>
 			</div>
 			<div class="mb-2 flex items-center">
diff --git a/src/components/trip-planner/TripPlan.svelte b/src/components/trip-planner/TripPlan.svelte
index 30c547e..a1a7b8a 100644
--- a/src/components/trip-planner/TripPlan.svelte
+++ b/src/components/trip-planner/TripPlan.svelte
@@ -192,15 +192,7 @@
 
 	<button
 		onclick={planTrip}
-		class="mt-4 flex w-full items-center justify-center rounded-md bg-green-500 py-2 text-white shadow-md
-           transition-colors
-           hover:bg-green-600
-           disabled:cursor-not-allowed
-           disabled:bg-gray-300
-           dark:bg-green-800
-           dark:hover:bg-green-900
-           disabled:dark:bg-gray-700/50
-           disabled:dark:text-gray-400"
+		class="mt-4 flex w-full items-center justify-center rounded-md bg-brand py-2 text-white shadow-md transition-colors hover:bg-brand-secondary disabled:cursor-not-allowed disabled:bg-gray-300 dark:bg-green-800 dark:hover:bg-green-900 disabled:dark:bg-gray-700/50 disabled:dark:text-gray-400"
 		disabled={!selectedFrom || !selectedTo}
 	>
 		{#if loading}
diff --git a/tailwind.config.js b/tailwind.config.js
index 01af366..a9993ba 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,7 @@
 import flowbitePlugin from 'flowbite/plugin';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -10,6 +13,8 @@ export default {
 	theme: {
 		extend: {
 			colors: {
+				brand: process.env.PUBLIC_APP_PRIMARY_COLOR || '#78aa36',
+				'brand-secondary': process.env.PUBLIC_APP_SECONDARY_COLOR || '#486621',
 				// flowbite-svelte
 				primary: {
 					50: '#FFF5F2',