diff --git a/src/assets/styles/themes.scss b/src/assets/styles/themes.scss
index 73a1e90..4400a8c 100644
--- a/src/assets/styles/themes.scss
+++ b/src/assets/styles/themes.scss
@@ -1,10 +1,10 @@
 :root {
-	--bg-color: #{$grey-80};
-	--page-color: #{$grey-100};
-	--card-color: #{$grey-90};
-	--mention-bg-color: #{$grey-90};
+	--bg-color: #{$gray-80};
+	--page-color: #{$gray-100};
+	--card-color: #{$gray-90};
+	--mention-bg-color: #{$gray-90};
 
-	--text-color: #{$grey-20};
+	--text-color: #{$gray-20};
 }
 
 [data-theme='dark'] {
diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte
index 54f3586..15d9eca 100644
--- a/src/lib/components/Album.svelte
+++ b/src/lib/components/Album.svelte
@@ -205,7 +205,7 @@
 			flex-direction: column;
 			gap: $unit * 1.5;
 			text-decoration: none;
-			transition: gap 0.125s ease-in-out;
+			transition: gap $transition-fast ease-in-out;
 			width: 100%;
 			height: 100%;
 
@@ -243,7 +243,7 @@
 				align-items: center;
 				justify-content: center;
 				font-size: 24px;
-				transition: all 0.3s ease;
+				transition: all $transition-medium ease;
 				backdrop-filter: blur(10px);
 
 				&.corner {
diff --git a/src/lib/components/AvatarHeadphones.svelte b/src/lib/components/AvatarHeadphones.svelte
index 1112ab5..d86110e 100644
--- a/src/lib/components/AvatarHeadphones.svelte
+++ b/src/lib/components/AvatarHeadphones.svelte
@@ -85,7 +85,7 @@
 		svg {
 			width: 100%;
 			height: auto;
-			animation: fadeIn 0.3s ease-out;
+			animation: fadeIn $transition-medium ease-out;
 		}
 	}
 
diff --git a/src/lib/components/Game.svelte b/src/lib/components/Game.svelte
index bb76bba..42901e7 100644
--- a/src/lib/components/Game.svelte
+++ b/src/lib/components/Game.svelte
@@ -77,7 +77,7 @@
 			flex-direction: column;
 			gap: $unit * 1.5;
 			text-decoration: none;
-			transition: gap 0.125s ease-in-out;
+			transition: gap $transition-fast ease-in-out;
 
 			img {
 				border: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index ff6ea85..20ed9a1 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -60,7 +60,7 @@
 		padding: calc($unit-5x - ($unit-5x - $unit-2x) * var(--padding-progress)) $unit-2x;
 		pointer-events: none;
 		// Add a very subtle transition to smooth out any remaining jitter
-		transition: padding 0.1s ease-out;
+		transition: padding $transition-instant ease-out;
 
 		@include breakpoint('phone') {
 			padding: calc($unit-3x - ($unit-3x - $unit-2x) * var(--padding-progress)) $unit-2x;
@@ -82,7 +82,7 @@
 			z-index: -1;
 			opacity: var(--gradient-opacity);
 			// Add a very subtle transition to smooth out any remaining jitter
-			transition: opacity 0.1s ease-out;
+			transition: opacity $transition-instant ease-out;
 		}
 	}
 
diff --git a/src/lib/components/Lightbox.svelte b/src/lib/components/Lightbox.svelte
index e3b1bd7..0098889 100644
--- a/src/lib/components/Lightbox.svelte
+++ b/src/lib/components/Lightbox.svelte
@@ -2,6 +2,9 @@
 	import { onMount } from 'svelte'
 	import { fade, scale } from 'svelte/transition'
 
+	// Convert CSS transition durations to milliseconds for Svelte transitions
+	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s
+
 	let {
 		images = [],
 		selectedIndex = $bindable(0),
@@ -76,7 +79,7 @@
 	<div
 		class="lightbox-backdrop"
 		onclick={handleBackgroundClick}
-		transition:fade={{ duration: 200 }}
+		transition:fade={{ duration: TRANSITION_NORMAL_MS }}
 		role="button"
 		tabindex="-1"
 	>
@@ -85,7 +88,7 @@
 				<img
 					src={images[selectedIndex]}
 					alt="{alt} {selectedIndex + 1}"
-					transition:scale={{ duration: 200, start: 0.9 }}
+					transition:scale={{ duration: TRANSITION_NORMAL_MS, start: 0.9 }}
 				/>
 			</div>
 
diff --git a/src/lib/components/LinkCard.svelte b/src/lib/components/LinkCard.svelte
index 9848d13..d9ec6a5 100644
--- a/src/lib/components/LinkCard.svelte
+++ b/src/lib/components/LinkCard.svelte
@@ -202,7 +202,7 @@
 	.skeleton {
 		background: $gray-80;
 		border-radius: 4px;
-		animation: pulse 1.5s ease-in-out infinite;
+		animation: pulse $animation-slow ease-in-out infinite;
 	}
 
 	.skeleton-meta {
diff --git a/src/lib/components/NavDropdown.svelte b/src/lib/components/NavDropdown.svelte
index 3294dc8..5eca792 100644
--- a/src/lib/components/NavDropdown.svelte
+++ b/src/lib/components/NavDropdown.svelte
@@ -185,7 +185,7 @@
 		font-size: $font-size;
 		font-weight: 400;
 		cursor: pointer;
-		transition: all 0.2s ease;
+		transition: all $transition-normal ease;
 		box-shadow: 0 $unit-1px $unit-3px $shadow-light;
 
 		&:hover {
@@ -209,7 +209,7 @@
 			height: $unit-2x;
 			margin-left: auto;
 			flex-shrink: 0;
-			transition: transform 0.2s ease;
+			transition: transform $transition-normal ease;
 			fill: none;
 			stroke: currentColor;
 			stroke-width: $unit-2px;
@@ -233,7 +233,7 @@
 		box-shadow: 0 $unit-half $unit-12px $shadow-medium;
 		padding: $unit;
 		z-index: 10;
-		animation: dropdownOpen 0.2s ease;
+		animation: dropdownOpen $transition-normal ease;
 	}
 
 	.dropdown-section {
@@ -254,7 +254,7 @@
 		text-decoration: none;
 		color: $gray-20;
 		font-size: $font-size;
-		transition: background-color 0.2s ease;
+		transition: background-color $transition-normal ease;
 
 		&:hover:not(.section-header) {
 			background-color: $gray-97;
diff --git a/src/lib/components/NowPlaying.svelte b/src/lib/components/NowPlaying.svelte
index 000a309..f89e11e 100644
--- a/src/lib/components/NowPlaying.svelte
+++ b/src/lib/components/NowPlaying.svelte
@@ -55,7 +55,7 @@
 		font-size: $font-size-small;
 		backdrop-filter: blur(10px);
 		z-index: $z-index-dropdown;
-		animation: fadeIn 0.3s ease-out;
+		animation: fadeIn $transition-medium ease-out;
 		width: fit-content;
 	}
 
@@ -80,7 +80,7 @@
 	.bar {
 		width: 3px;
 		background: $accent-color;
-		animation: dance 0.6s ease-in-out infinite;
+		animation: dance $animation-fast ease-in-out infinite;
 		transform-origin: bottom;
 	}
 
diff --git a/src/lib/components/PhotoViewEnhanced.svelte b/src/lib/components/PhotoViewEnhanced.svelte
index 5508279..d17cef3 100644
--- a/src/lib/components/PhotoViewEnhanced.svelte
+++ b/src/lib/components/PhotoViewEnhanced.svelte
@@ -224,7 +224,7 @@
 				height: 100px;
 				pointer-events: none;
 				z-index: 10;
-				transition: opacity 0.3s ease;
+				transition: opacity $transition-medium ease;
 			}
 
 			&::before {
diff --git a/src/lib/components/SegmentedController.svelte b/src/lib/components/SegmentedController.svelte
index f63fd28..e7ade56 100644
--- a/src/lib/components/SegmentedController.svelte
+++ b/src/lib/components/SegmentedController.svelte
@@ -146,7 +146,7 @@
 		left: $unit;
 		height: calc(100% - #{$unit * 2});
 		border-radius: 100px;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: all $transition-medium cubic-bezier(0.4, 0, 0.2, 1);
 		z-index: $z-index-base;
 	}
 
diff --git a/src/lib/components/UniverseCard.svelte b/src/lib/components/UniverseCard.svelte
index f8f7f3a..822b46e 100644
--- a/src/lib/components/UniverseCard.svelte
+++ b/src/lib/components/UniverseCard.svelte
@@ -79,7 +79,7 @@
 		background: $gray-100;
 		border-radius: $card-corner-radius;
 		border: $unit-1px solid $gray-95;
-		transition: all 0.2s ease;
+		transition: all $transition-normal ease;
 		cursor: pointer;
 		outline: none;
 
@@ -111,14 +111,14 @@
 		color: $gray-40;
 		font-size: $font-size-small;
 		font-weight: 400;
-		transition: color 0.2s ease;
+		transition: color $transition-normal ease;
 	}
 
 	:global(.card-icon) {
 		width: $unit-2x;
 		height: $unit-2x;
 		fill: $gray-40;
-		transition: all 0.2s ease;
+		transition: all $transition-normal ease;
 	}
 
 	.universe-card--post {
@@ -140,7 +140,7 @@
 		:global(.card-title-link) {
 			color: $gray-10;
 			text-decoration: none;
-			transition: all 0.2s ease;
+			transition: all $transition-normal ease;
 		}
 	}
 
@@ -155,25 +155,25 @@
 			}
 
 			:global(.card-icon rect:nth-child(1)) {
-				transition: all 0.3s ease;
+				transition: all $transition-medium ease;
 				height: $unit-6px;
 				y: $unit-2px;
 			}
 
 			:global(.card-icon rect:nth-child(2)) {
-				transition: all 0.3s ease;
+				transition: all $transition-medium ease;
 				height: $unit-10px;
 				y: $unit-2px;
 			}
 
 			:global(.card-icon rect:nth-child(3)) {
-				transition: all 0.3s ease;
+				transition: all $transition-medium ease;
 				height: $unit;
 				y: $unit-10px;
 			}
 
 			:global(.card-icon rect:nth-child(4)) {
-				transition: all 0.3s ease;
+				transition: all $transition-medium ease;
 				height: $unit-half;
 				y: $unit-14px;
 			}
@@ -191,7 +191,7 @@
 		:global(.card-title-link) {
 			color: $gray-10;
 			text-decoration: none;
-			transition: all 0.2s ease;
+			transition: all $transition-normal ease;
 		}
 	}
 </style>
diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte
index 9ee5f2a..0cb31a4 100644
--- a/src/lib/components/admin/Button.svelte
+++ b/src/lib/components/admin/Button.svelte
@@ -174,7 +174,7 @@
 		font-weight: 400;
 		border: none;
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: all $transition-fast ease;
 		outline: none;
 		position: relative;
 		white-space: nowrap;
diff --git a/src/lib/components/admin/Input.svelte b/src/lib/components/admin/Input.svelte
index 7048c79..6587f4b 100644
--- a/src/lib/components/admin/Input.svelte
+++ b/src/lib/components/admin/Input.svelte
@@ -252,7 +252,7 @@
 		border: 1px solid rgba(0, 0, 0, 0.1);
 		z-index: 1;
 		cursor: pointer;
-		transition: border-color 0.15s ease;
+		transition: border-color $transition-fast ease;
 
 		&:hover {
 			border-color: rgba(0, 0, 0, 0.2);
@@ -265,7 +265,7 @@
 		border: 1px solid transparent;
 		color: $input-text-color;
 		background-color: $input-background-color;
-		transition: all 0.15s ease;
+		transition: all $transition-fast ease;
 
 		&:hover {
 			background-color: $input-background-color-hover;
diff --git a/src/lib/components/admin/LoadingSpinner.svelte b/src/lib/components/admin/LoadingSpinner.svelte
index c89d683..670616a 100644
--- a/src/lib/components/admin/LoadingSpinner.svelte
+++ b/src/lib/components/admin/LoadingSpinner.svelte
@@ -34,7 +34,7 @@
 		border: 3px solid $gray-80;
 		border-top-color: $primary-color;
 		border-radius: 50%;
-		animation: spin 0.8s linear infinite;
+		animation: spin $animation-normal linear infinite;
 	}
 
 	@keyframes spin {
diff --git a/src/lib/components/admin/Modal.svelte b/src/lib/components/admin/Modal.svelte
index c85cb87..2aec16e 100644
--- a/src/lib/components/admin/Modal.svelte
+++ b/src/lib/components/admin/Modal.svelte
@@ -3,6 +3,9 @@
 	import { fade } from 'svelte/transition'
 	import Button from './Button.svelte'
 
+	// Convert CSS transition durations to milliseconds for Svelte transitions
+	const TRANSITION_FAST_MS = 150 // $transition-fast: 0.15s
+
 	interface Props {
 		isOpen: boolean
 		size?: 'small' | 'medium' | 'large' | 'jumbo' | 'full'
@@ -77,8 +80,8 @@
 </script>
 
 {#if isOpen}
-	<div class="modal-backdrop" on:click={handleBackdropClick} transition:fade={{ duration: 150 }}>
-		<div class="modal {modalClass}" on:click|stopPropagation transition:fade={{ duration: 150 }}>
+	<div class="modal-backdrop" on:click={handleBackdropClick} transition:fade={{ duration: TRANSITION_FAST_MS }}>
+		<div class="modal {modalClass}" on:click|stopPropagation transition:fade={{ duration: TRANSITION_FAST_MS }}>
 			{#if showCloseButton}
 				<Button
 					variant="ghost"
diff --git a/src/lib/components/edra/headless/components/EmbedContextMenu.svelte b/src/lib/components/edra/headless/components/EmbedContextMenu.svelte
index 6c7fd2d..16e2337 100644
--- a/src/lib/components/edra/headless/components/EmbedContextMenu.svelte
+++ b/src/lib/components/edra/headless/components/EmbedContextMenu.svelte
@@ -2,6 +2,9 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { fly } from 'svelte/transition'
 
+	// Convert CSS transition durations to milliseconds for Svelte transitions
+	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s
+
 	interface Props {
 		x: number
 		y: number
@@ -56,7 +59,7 @@
 	bind:this={dropdown}
 	class="embed-context-menu"
 	style="left: {x}px; top: {y}px;"
-	transition:fly={{ y: -10, duration: 200 }}
+	transition:fly={{ y: -10, duration: TRANSITION_NORMAL_MS }}
 	tabindex="-1"
 >
 	<div class="menu-url">{url}</div>
diff --git a/src/lib/components/edra/headless/components/LinkContextMenu.svelte b/src/lib/components/edra/headless/components/LinkContextMenu.svelte
index a29e3ab..c187eaa 100644
--- a/src/lib/components/edra/headless/components/LinkContextMenu.svelte
+++ b/src/lib/components/edra/headless/components/LinkContextMenu.svelte
@@ -2,6 +2,9 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { fly } from 'svelte/transition'
 
+	// Convert CSS transition durations to milliseconds for Svelte transitions
+	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s
+
 	interface Props {
 		x: number
 		y: number
@@ -56,7 +59,7 @@
 	bind:this={dropdown}
 	class="link-context-menu"
 	style="left: {x}px; top: {y}px;"
-	transition:fly={{ y: -10, duration: 200 }}
+	transition:fly={{ y: -10, duration: TRANSITION_NORMAL_MS }}
 	tabindex="-1"
 >
 	<div class="menu-url">{url}</div>
diff --git a/src/lib/components/edra/headless/components/LinkEditDialog.svelte b/src/lib/components/edra/headless/components/LinkEditDialog.svelte
index 484f606..f71b6f6 100644
--- a/src/lib/components/edra/headless/components/LinkEditDialog.svelte
+++ b/src/lib/components/edra/headless/components/LinkEditDialog.svelte
@@ -4,6 +4,9 @@
 	import Check from 'lucide-svelte/icons/check'
 	import X from 'lucide-svelte/icons/x'
 
+	// Convert CSS transition durations to milliseconds for Svelte transitions
+	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s
+
 	interface Props {
 		x: number
 		y: number
@@ -66,7 +69,7 @@
 	bind:this={dialogElement}
 	class="link-edit-dialog"
 	style="left: {x}px; top: {y}px;"
-	transition:fly={{ y: -10, duration: 200 }}
+	transition:fly={{ y: -10, duration: TRANSITION_NORMAL_MS }}
 	onkeydown={handleKeydown}
 >
 	<div class="dialog-content">
diff --git a/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte b/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte
index ab07572..2537c48 100644
--- a/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte
+++ b/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte
@@ -2,6 +2,9 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { fly } from 'svelte/transition'
 
+	// Convert CSS transition durations to milliseconds for Svelte transitions
+	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s
+
 	interface Props {
 		x: number
 		y: number
@@ -50,7 +53,7 @@
 	bind:this={dropdown}
 	class="url-convert-dropdown"
 	style="left: {x}px; top: {y}px;"
-	transition:fly={{ y: -10, duration: 200 }}
+	transition:fly={{ y: -10, duration: TRANSITION_NORMAL_MS }}
 	tabindex="-1"
 >
 	<button class="convert-button" onclick={handleConvert}> Convert to card </button>
diff --git a/src/lib/components/edra/tooltip.scss b/src/lib/components/edra/tooltip.scss
index 12877d3..f476b1e 100644
--- a/src/lib/components/edra/tooltip.scss
+++ b/src/lib/components/edra/tooltip.scss
@@ -4,8 +4,8 @@
 
 // Link tooltip styles - only apply to tooltips with the link-tooltip theme
 :global(.tippy-box[data-theme~='link-tooltip']) {
-	background-color: $grey-00;
-	color: $grey-100;
+	background-color: $gray-00;
+	color: $gray-100;
 	font-size: $font-size-extra-small;
 	font-family: $font-stack;
 	font-weight: $font-weight;
@@ -18,7 +18,7 @@
 }
 
 :global(.tippy-box[data-theme~='link-tooltip'] .tippy-arrow) {
-	color: $grey-00;
+	color: $gray-00;
 }
 
 // Animation adjustments for link tooltips
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 917449f..a4798df 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -176,7 +176,7 @@
 		padding: $unit-half $unit-2x !important;
 		font-size: $font-size-extra-small !important;
 		font-weight: $font-weight-med !important;
-		transition: background-color 0.2s ease !important;
+		transition: background-color $transition-normal ease !important;
 
 		&:hover {
 			background: $blue-40 !important;
@@ -191,7 +191,7 @@
 		padding: $unit-half $unit-2x !important;
 		font-size: $font-size-extra-small !important;
 		font-weight: $font-weight-med !important;
-		transition: all 0.2s ease !important;
+		transition: all $transition-normal ease !important;
 
 		&:hover {
 			background: $gray-95 !important;