diff --git a/src/app.css b/src/app.css
index f06edc5b..12556d45 100644
--- a/src/app.css
+++ b/src/app.css
@@ -55,4 +55,14 @@
 	body.dark .page-body {
 		@apply bg-pbw-dark;
 	}
+
+	.pbw-text-color-base {
+		@apply text-gray-800 dark:text-gray-200;
+	}
+	.pbw-text-color-primary {
+		@apply text-gray-600 dark:text-gray-100;
+	}
+	.pbw-text-color-secondary {
+		@apply text-gray-500 dark:text-gray-300;
+	}
 }
diff --git a/src/lib/components/CollectionList.svelte b/src/lib/components/CollectionList.svelte
index 67225d6c..fe543ac7 100644
--- a/src/lib/components/CollectionList.svelte
+++ b/src/lib/components/CollectionList.svelte
@@ -66,26 +66,26 @@
 					<a href={_url(col, item)} class="hover:underline">{item.shortname || item.name}</a>
 				</h3>
 				{#if col === 'event'}
-					<div class="text-xl text-gray-500 dark:text-gray-200  my-2">
+					<div class="text-xl pbw-text-color-secondary  my-2">
 						<span class="font-bold">{formatItemDate(item)}</span>
 						{#if item.attendees}<br />{item.attendees} ppl{/if}
 					</div>
 				{/if}
 				{#if col === 'media-partner'}
-					<div class="text-base text-gray-500 dark:text-gray-200 my-2">{item.description}</div>
+					<div class="text-base pbw-text-color-secondary my-2">{item.description}</div>
 				{/if}
 				{#if col === 'speaker'}
-					<div class="text-base text-gray-500 dark:text-gray-200 my-2">
+					<div class="text-base pbw-text-color-secondary my-2">
 						<SvelteMarkdown source={item.caption} />
 					</div>
 				{/if}
 				{#if col === 'union'}
-					<div class="text-base text-gray-500 dark:text-gray-200 my-2">
+					<div class="text-base pbw-text-color-secondary my-2">
 						<SvelteMarkdown source={item.description} />
 					</div>
 				{/if}
 				{#if col === 'place'}
-					<div class="text-xl text-gray-500 dark:text-gray-200 my-2">{item.capacity} ppl</div>
+					<div class="text-xl pbw-text-color-secondary my-2">{item.capacity} ppl</div>
 				{/if}
 			</div>
 		{/if}
diff --git a/src/lib/components/TimelineHeatmap.svelte b/src/lib/components/TimelineHeatmap.svelte
index 07053342..bd2dc509 100644
--- a/src/lib/components/TimelineHeatmap.svelte
+++ b/src/lib/components/TimelineHeatmap.svelte
@@ -128,7 +128,7 @@
 				: 'hidden'}"
 			style="left: {selectedSegment.event.layerX}px;"
 		>
-			<div class="uppercase text-gray-500 dark:text-gray-300 text-lg">{selectedSegment.title}</div>
+			<div class="uppercase pbw-text-color-secondary text-lg">{selectedSegment.title}</div>
 			<div class="text-xl mt-4">
 				{#each selectedSegment.data.events.map((e) => {
 					return [eventDetail(e[0]), e[1]];
diff --git a/src/routes/[entry]/+page.svelte b/src/routes/[entry]/+page.svelte
index 9f4eaad8..a001638e 100644
--- a/src/routes/[entry]/+page.svelte
+++ b/src/routes/[entry]/+page.svelte
@@ -46,7 +46,7 @@
 
 		<TimelineHeatmap {data} />
 
-		<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
+		<h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
 			<a href="/{entry}/events">Conferences & Hackathons</a> ({conferences.length})
 		</h2>
 		<div
@@ -54,7 +54,7 @@
 		>
 			<CollectionList arr={conferences} img="logo" col="event" {entry} offer={true} />
 		</div>
-		<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
+		<h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
 			<a href="/{entry}/events">Other events</a> ({otherEvents.length})
 		</h2>
 		<div
@@ -62,12 +62,10 @@
 		>
 			<CollectionList arr={otherEvents} img="logo" col="event" {entry} />
 		</div>
-		<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+		<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 			<a href="/{entry}/speakers">Speakers</a> ({data.bundle.speakers.length})
 		</h2>
-		<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
-			International 🌎
-		</h2>
+		<h2 class="text-xl uppercase font-bold mt-10 pbw-text-color-secondary">International 🌎</h2>
 		<div
 			class="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 my-6 text-center text-xl"
 		>
@@ -76,7 +74,7 @@
 				{entry}
 			/>
 		</div>
-		<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+		<h2 class="text-xl uppercase font-bold mt-10 pbw-text-color-secondary">
 			Local - Czech 🇨🇿 & Slovak 🇸🇰
 		</h2>
 		<div
@@ -87,7 +85,7 @@
 				{entry}
 			/>
 		</div>
-		<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+		<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 			<a href="/{entry}/places">Places</a> ({data.bundle.places.length})
 		</h2>
 		<div
@@ -96,7 +94,7 @@
 			<CollectionList arr={data.bundle.places} col="place" img="photo" {entry} />
 		</div>
 		{#if data.bundle.benefits}
-			<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
+			<h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
 				<a href="/{entry}/benefits">Benefits for visitors</a> ({data.bundle.benefits.length})
 			</h2>
 			<div
@@ -113,14 +111,12 @@
 			</div>
 		{/if}
 		{#if data.bundle['media-partners']}
-			<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
+			<h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
 				<a href="/{entry}/media-partners">Media Partners & Communities</a> ({data.bundle[
 					'media-partners'
 				].length})
 			</h2>
-			<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
-				International 🌎
-			</h2>
+			<h2 class="text-xl uppercase font-bold mt-10 pbw-text-color-secondary">International 🌎</h2>
 			<div
 				class="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-7 xl:grid-cols-9 my-6 text-center text-2xl mb-8"
 			>
@@ -135,7 +131,7 @@
 					size="small"
 				/>
 			</div>
-			<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+			<h2 class="text-xl uppercase font-bold mt-10 pbw-text-color-secondary">
 				Local - Czech 🇨🇿 & Slovak 🇸🇰
 			</h2>
 			<div
diff --git a/src/routes/[entry]/[type]/+page.svelte b/src/routes/[entry]/[type]/+page.svelte
index 0311e619..df7e8703 100644
--- a/src/routes/[entry]/[type]/+page.svelte
+++ b/src/routes/[entry]/[type]/+page.svelte
@@ -69,10 +69,10 @@
 	<div class="w-full">
 		<div class="max-w-7xl mx-auto pt-5 md:pt-10">
 			<div class="mx-4 xl:mx-0">
-				<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
+				<h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
 					{tc.title} ({processedItems.length})
 				</h2>
-				<div class="text-xl mt-6 text-gray-800 dark:text-gray-200">
+				<div class="text-xl mt-6 pbw-text-color-base">
 					<table class="w-full table-auto">
 						<thead>
 							<tr class="text-left">
diff --git a/src/routes/[entry]/[type]/[slug]/+page.svelte b/src/routes/[entry]/[type]/[slug]/+page.svelte
index 3fc7f3d9..29bea6ad 100644
--- a/src/routes/[entry]/[type]/[slug]/+page.svelte
+++ b/src/routes/[entry]/[type]/[slug]/+page.svelte
@@ -61,9 +61,9 @@
 				/>
 				<div class="flex-grow">
 					<!--div class="font-normal text opacity-50 mt-4 md:mt-0 mb-1" style="line-height: 0.6em;"><a href="/{entry}/{col}">{col.toUpperCase()}</a></div-->
-					<h2 class="text-4xl md:text-5xl font-bold text-gray-600 dark:text-gray-100 mt-4 md:mt-0">
+					<h1 class="pbw-text-color-primary text-4xl md:text-5xl font-bold mt-4 md:mt-0">
 						{item.name}
-					</h2>
+					</h1>
 					{#if col === 'event'}
 						<div class="text-2xl flex gap-4 mt-2 flex-wrap">
 							<div class="flex gap-1 items-center">
@@ -289,9 +289,7 @@
 
 			{#if col === 'event'}
 				{#if item.tracks}
-					<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
-						Tracks
-					</h2>
+					<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">Tracks</h2>
 					<div class="flex flex-wrap gap-2 mt-4">
 						{#each item.tracks as track}
 							<div
@@ -304,9 +302,7 @@
 					</div>
 				{/if}
 				{#if item.segments}
-					<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
-						Schedule
-					</h2>
+					<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">Schedule</h2>
 					{#each eventDates(item) as date}
 						<div class="mb-6">
 							<h3 class="mt-4 text-xl uppercase text-gray-500 dark:text-gray-400">
@@ -325,7 +321,7 @@
 					{/each}
 				{/if}
 				{#if item.speakers}
-					<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+					<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 						Speakers ({item.speakers?.length || 0})
 					</h2>
 					<div
@@ -335,7 +331,7 @@
 					</div>
 				{/if}
 				{#if item.events}
-					<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+					<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 						Sub-Events ({item.events?.length || 0})
 					</h2>
 					<div
@@ -345,7 +341,7 @@
 					</div>
 				{/if}
 				{#if item.venues}
-					<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+					<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 						Venues ({item.venues?.length || 0})
 					</h2>
 					<div
@@ -360,7 +356,7 @@
 				{/if}
 			{/if}
 			{#if col === 'union'}
-				<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+				<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 					Big events ({item.events?.map((eId) => data.bundle.events.find((e) => e.id === eId))
 						.length})
 				</h2>
@@ -375,7 +371,7 @@
 				</div>
 			{/if}
 			{#if col === 'speaker'}
-				<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+				<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 					Events ({data.bundle.events.filter((e) => e.speakers?.find((s) => s.id === item.id))
 						.length || 0})
 				</h2>
@@ -390,7 +386,7 @@
 				</div>
 			{/if}
 			{#if col === 'place'}
-				<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+				<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 					Events ({data.bundle.events.filter((e) => e.venues?.includes(item.id)).length || 0})
 				</h2>
 				<div
@@ -404,7 +400,7 @@
 				</div>
 			{/if}
 			{#if col === 'chain'}
-				<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
+				<h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
 					Events ({data.bundle.events.filter((e) => e.chains?.includes(item.id)).length || 0})
 				</h2>
 				<div
diff --git a/src/routes/[entry]/day/[date]/+page.svelte b/src/routes/[entry]/day/[date]/+page.svelte
index 8e07822f..de02b292 100644
--- a/src/routes/[entry]/day/[date]/+page.svelte
+++ b/src/routes/[entry]/day/[date]/+page.svelte
@@ -54,7 +54,7 @@
 	<div class="max-w-7xl mx-auto pt-5 md:pt-10">
 		<div class="mx-4 xl:mx-0">
 			<TimelineHeatmap {data} highlightDay={$page.params.date} />
-			<h2 class="text-3xl md:text-4xl font-bold text-gray-600 dark:text-gray-100">
+			<h2 class="text-3xl md:text-4xl font-bold pbw-text-color-primary">
 				{format(new Date($page.params.date), 'MMMM d, yyyy - EEEE')}
 			</h2>
 			<div class="mt-10">
diff --git a/src/routes/[entry]/schedule/+page.svelte b/src/routes/[entry]/schedule/+page.svelte
index a5eaf145..22e1b49d 100644
--- a/src/routes/[entry]/schedule/+page.svelte
+++ b/src/routes/[entry]/schedule/+page.svelte
@@ -67,7 +67,7 @@
 						<a href="/{$page.params.entry}/day/{day.date}" class=" text-pbw-red hover:underline"
 							>{format(new Date(day.date), 'MMMM d, yyyy')}</a
 						>
-						<span class="dark:text-gray-500">- {format(new Date(day.date), 'EEEE')}</span>
+						<span class="pbw-text-color-primary">- {format(new Date(day.date), 'EEEE')}</span>
 					</h2>
 					<div class="mt-6">
 						<CalendarList