diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..6d0a4ae
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "ghostguild",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3003
+    }
+  ]
+}
diff --git a/app/app.vue b/app/app.vue
index 84d4ee0..bba60e3 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,6 @@
 <template>
   <UApp>
+    <SvgFilters />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 5e7c6d3..ed54874 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -199,11 +199,11 @@
   --color-circle-founder-dark: #76432a;
   --color-circle-founder-bg: rgba(178, 104, 64, 0.1);
 
-  /* Practitioner - deep gold/ochre */
-  --color-circle-practitioner: #8a7658;
-  --color-circle-practitioner-light: #b7a487;
-  --color-circle-practitioner-dark: #5a4d39;
-  --color-circle-practitioner-bg: rgba(138, 118, 88, 0.1);
+  /* Practitioner - sage green (growth, wisdom, mentorship) */
+  --color-circle-practitioner: #6b7c58;
+  --color-circle-practitioner-light: #8fa47a;
+  --color-circle-practitioner-dark: #4a5a39;
+  --color-circle-practitioner-bg: rgba(107, 124, 88, 0.1);
 
   /* Typographic scale */
   --text-display-xl: 3.5rem;
@@ -250,23 +250,23 @@
   --halftone-size: 8px 8px;
 }
 
-/* Dark mode */
+/* Dark mode - doubled opacity for perceptible candlelight warmth */
 .dark:root {
   --ambient-bg:
     radial-gradient(
       circle at 20% 80%,
-      rgba(224, 184, 110, 0.03) 0%,
+      rgba(224, 184, 110, 0.06) 0%,
       transparent 50%
     ),
     radial-gradient(
       circle at 80% 20%,
-      rgba(218, 154, 114, 0.02) 0%,
+      rgba(218, 154, 114, 0.04) 0%,
       transparent 50%
     ),
     radial-gradient(
-      circle at 40% 40%,
-      rgba(183, 164, 135, 0.01) 0%,
-      transparent 50%
+      circle at 50% 50%,
+      rgba(183, 164, 135, 0.02) 0%,
+      transparent 60%
     );
 
   --halftone-pattern: radial-gradient(
@@ -351,7 +351,7 @@ body {
   text-shadow: 0 0 10px rgba(224, 184, 110, 0.25);
 }
 
-/* Subtle noise overlay */
+/* Subtle noise overlay - SVG filter based, no image dependency */
 .ink-grain {
   position: relative;
 }
@@ -359,19 +359,15 @@ body {
 .ink-grain::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: url("/textures/grain.png");
-  background-repeat: repeat;
-  background-size: 128px 128px;
+  inset: 0;
+  filter: url(#grain-fine);
   mix-blend-mode: overlay;
   opacity: 0.04;
   pointer-events: none;
+  z-index: 1;
 }
 
-/* Paper fiber overlay */
+/* Paper fiber overlay - SVG filter based */
 .paper-texture {
   position: relative;
 }
@@ -379,15 +375,27 @@ body {
 .paper-texture::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: url("/textures/paper.png");
-  background-repeat: repeat;
-  background-size: 256px 256px;
+  inset: 0;
+  filter: url(#grain-paper);
   opacity: 0.04;
   pointer-events: none;
+  z-index: 1;
+}
+
+/* Generic grain overlay utility */
+.texture-grain-overlay {
+  position: relative;
+}
+
+.texture-grain-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  filter: url(#grain-fine);
+  opacity: 0.035;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 1;
 }
 
 /* Irregular line border */
@@ -410,10 +418,14 @@ body {
   border-radius: 50%;
 }
 
-/* Warm interior feel for content areas */
+/* Warm interior feel for content areas - enclosed, lit space */
 .guild-interior {
-  background: var(--ambient-bg);
-  box-shadow: inset 0 2px 8px rgba(26, 21, 16, 0.06);
+  background:
+    linear-gradient(180deg, rgba(26, 21, 16, 0.2) 0%, transparent 200px),
+    var(--ambient-bg);
+  box-shadow:
+    inset 0 2px 12px rgba(26, 21, 16, 0.12),
+    inset 0 0 60px rgba(26, 21, 16, 0.04);
 }
 
 /* Dithered gradients */
@@ -446,6 +458,112 @@ body {
     -2px 0px;
 }
 
+/* Fine dither - 2px, subtle surface texture */
+.dithered-fine {
+  background-image:
+    linear-gradient(45deg, var(--color-guild-700) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--color-guild-700) 25%, transparent 25%);
+  background-size: 2px 2px;
+}
+
+/* Dither fade - gradient from dithered to solid */
+.dithered-fade-top {
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      var(--color-guild-800) 0px,
+      var(--color-guild-800) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+  mask-image: linear-gradient(to bottom, black, transparent);
+  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
+}
+
+.dithered-fade-bottom {
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      var(--color-guild-800) 0px,
+      var(--color-guild-800) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+  mask-image: linear-gradient(to top, black, transparent);
+  -webkit-mask-image: linear-gradient(to top, black, transparent);
+}
+
+/* Circle badge utilities */
+.circle-badge-community {
+  background-color: var(--color-circle-community-bg);
+  color: var(--color-circle-community-light);
+  border: 1px solid color-mix(in srgb, var(--color-circle-community) 40%, transparent);
+}
+
+.circle-badge-founder {
+  background-color: var(--color-circle-founder-bg);
+  color: var(--color-circle-founder-light);
+  border: 1px solid color-mix(in srgb, var(--color-circle-founder) 40%, transparent);
+}
+
+.circle-badge-practitioner {
+  background-color: var(--color-circle-practitioner-bg);
+  color: var(--color-circle-practitioner-light);
+  border: 1px solid color-mix(in srgb, var(--color-circle-practitioner) 40%, transparent);
+}
+
+/* Circle surface treatments - subtle background for circle-specific sections */
+.circle-surface-community {
+  background-color: var(--color-circle-community-bg);
+}
+
+.circle-surface-founder {
+  background-color: var(--color-circle-founder-bg);
+}
+
+.circle-surface-practitioner {
+  background-color: var(--color-circle-practitioner-bg);
+}
+
+/* Parchment surface for elevated content panels */
+.parchment-surface {
+  background-color: var(--color-parchment-950);
+  border: 1px solid var(--color-parchment-800);
+}
+
+.dark .parchment-surface {
+  background-color: var(--color-guild-800);
+  border-color: var(--color-guild-700);
+}
+
+/* UI typography utilities */
+.text-ui-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-overline);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.text-ui-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-body-sm);
+}
+
+/* Illustration integration utilities */
+.guild-illustration {
+  max-width: 100%;
+  height: auto;
+  filter: drop-shadow(0 0 20px rgba(184, 135, 58, 0.08));
+}
+
+.guild-illustration-adaptive {
+  color: var(--color-guild-300);
+}
+
+.dark .guild-illustration-adaptive {
+  color: var(--color-guild-600);
+}
+
 /* Prose overrides for guild wiki/long-form content */
 .prose-guild {
   max-width: 72ch;
diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index b32ed17..0efc109 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -7,11 +7,14 @@
     ]"
   >
     <!-- Logo/Brand at top (desktop only) -->
-    <div v-if="!isMobile" class="p-8 border-b border-guild-700 bg-primary-500">
+    <!-- Logo/Brand: designer will replace text with logo asset -->
+    <div v-if="!isMobile" class="p-8 border-b border-guild-700 bg-guild-900">
       <NuxtLink to="/" class="flex flex-col items-center gap-3 group">
-        <span class="text-xl font-bold text-white warm-text tracking-wider"
-          >Ghost Guild Logo</span
-        >
+        <slot name="logo">
+          <span class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wider"
+            >Ghost Guild</span
+          >
+        </slot>
       </NuxtLink>
     </div>
 
@@ -112,16 +115,16 @@
 
           <div
             v-if="loginSuccess"
-            class="p-3 bg-green-900/20 rounded border border-green-800"
+            class="p-3 bg-candlelight-900/20 rounded border border-candlelight-800"
           >
-            <p class="text-green-300 text-sm">✅ Check your email!</p>
+            <p class="text-candlelight-400 text-sm">Check your email!</p>
           </div>
 
           <div
             v-if="loginError"
-            class="p-3 bg-red-900/20 rounded border border-red-800"
+            class="p-3 bg-ember-900/20 rounded border border-ember-800"
           >
-            <p class="text-red-300 text-sm">{{ loginError }}</p>
+            <p class="text-ember-400 text-sm">{{ loginError }}</p>
           </div>
         </div>
       </div>
diff --git a/app/components/EventSeriesTicketCard.vue b/app/components/EventSeriesTicketCard.vue
index a98e0a8..ba4f942 100644
--- a/app/components/EventSeriesTicketCard.vue
+++ b/app/components/EventSeriesTicketCard.vue
@@ -4,33 +4,33 @@
   >
     <!-- Header -->
     <div
-      class="bg-gradient-to-br from-purple-600 to-purple-800 dark:from-purple-700 dark:to-purple-900 p-6"
+      class="bg-gradient-to-br from-candlelight-500 to-candlelight-700 dark:from-candlelight-600 dark:to-candlelight-800 p-6"
     >
       <div class="flex items-start justify-between gap-4">
         <div class="flex-1">
           <div class="flex items-center gap-2 mb-2">
             <Icon
               name="heroicons:ticket"
-              class="w-5 h-5 text-purple-200 dark:text-purple-300"
+              class="w-5 h-5 text-candlelight-900 dark:text-candlelight-200"
             />
-            <span class="text-sm font-semibold text-purple-200 dark:text-purple-300">
+            <span class="text-sm font-semibold text-candlelight-900 dark:text-candlelight-200">
               Series Pass
             </span>
           </div>
           <h3 class="text-xl font-bold text-white mb-1">
             {{ ticket.name }}
           </h3>
-          <p v-if="ticket.description" class="text-sm text-purple-200 dark:text-purple-300">
+          <p v-if="ticket.description" class="text-sm text-candlelight-900 dark:text-candlelight-200">
             {{ ticket.description }}
           </p>
         </div>
         <div class="text-right flex-shrink-0">
-          <div class="text-3xl font-bold text-white">
+          <div class="text-3xl font-bold text-white text-ui-mono">
             {{ formatPrice(ticket.price, ticket.currency) }}
           </div>
           <div
             v-if="ticket.isEarlyBird"
-            class="text-xs text-purple-200 dark:text-purple-300 mt-1"
+            class="text-xs text-candlelight-900 dark:text-candlelight-200 mt-1"
           >
             Early Bird Price
           </div>
@@ -47,21 +47,21 @@
         </h4>
         <div class="space-y-2">
           <div class="flex items-center gap-2 text-guild-300 dark:text-guild-300">
-            <Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
+            <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400" />
             <span>Access to all {{ totalEvents }} events in the series</span>
           </div>
           <div
             v-if="ticket.isFree && !isMember"
             class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
           >
-            <Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
+            <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400" />
             <span>Automatic registration for all sessions</span>
           </div>
           <div
             v-if="memberSavings > 0"
             class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
           >
-            <Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
+            <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400" />
             <span>Save {{ formatPrice(memberSavings, ticket.currency) }} as a member</span>
           </div>
         </div>
@@ -79,9 +79,9 @@
             class="flex items-start gap-3 p-3 bg-guild-700/50 dark:bg-guild-600/30 rounded-lg"
           >
             <div
-              class="w-8 h-8 rounded-full bg-purple-600/20 border border-purple-500/30 flex items-center justify-center flex-shrink-0"
+              class="w-8 h-8 rounded-full bg-candlelight-600/20 border border-candlelight-500/30 flex items-center justify-center flex-shrink-0"
             >
-              <span class="text-sm font-bold text-purple-300">{{ index + 1 }}</span>
+              <span class="text-sm font-bold text-candlelight-300">{{ index + 1 }}</span>
             </div>
             <div class="flex-1 min-w-0">
               <div class="font-medium text-guild-100 dark:text-guild-100 text-sm">
@@ -104,13 +104,13 @@
       <!-- Member Benefit Callout -->
       <div
         v-if="ticket.isFree && isMember"
-        class="p-4 bg-green-900/20 border border-green-700/30 rounded-lg mb-6"
+        class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg mb-6"
       >
         <div class="flex items-start gap-3">
-          <Icon name="heroicons:sparkles" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
+          <Icon name="heroicons:sparkles" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
           <div>
-            <div class="font-semibold text-green-300 mb-1">Member Benefit</div>
-            <div class="text-sm text-green-400">
+            <div class="font-semibold text-candlelight-300 mb-1">Member Benefit</div>
+            <div class="text-sm text-candlelight-400">
               This series pass is free for Ghost Guild members! Complete registration to secure your spot.
             </div>
           </div>
@@ -120,13 +120,13 @@
       <!-- Public vs Member Pricing -->
       <div
         v-if="!ticket.isFree && publicPrice && ticket.type === 'member'"
-        class="p-4 bg-blue-900/20 border border-blue-700/30 rounded-lg mb-6"
+        class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg mb-6"
       >
         <div class="flex items-start gap-3">
-          <Icon name="heroicons:tag" class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
+          <Icon name="heroicons:tag" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
           <div class="flex-1">
-            <div class="font-semibold text-blue-300 mb-1">Member Savings</div>
-            <div class="text-sm text-blue-400">
+            <div class="font-semibold text-candlelight-300 mb-1">Member Savings</div>
+            <div class="text-sm text-candlelight-400">
               You're saving {{ formatPrice(memberSavings, ticket.currency) }} as a member.
               Public price: {{ formatPrice(publicPrice, ticket.currency) }}
             </div>
@@ -144,13 +144,13 @@
             :name="availability.remaining > 5 ? 'heroicons:check-circle' : 'heroicons:exclamation-triangle'"
             :class="[
               'w-5 h-5',
-              availability.remaining > 5 ? 'text-green-400' : 'text-yellow-400'
+              availability.remaining > 5 ? 'text-candlelight-400' : 'text-ember-400'
             ]"
           />
           <span
             :class="[
               'text-sm font-medium',
-              availability.remaining > 5 ? 'text-green-300' : 'text-yellow-300'
+              availability.remaining > 5 ? 'text-candlelight-300' : 'text-ember-300'
             ]"
           >
             {{ availability.remaining }} series pass{{ availability.remaining !== 1 ? 'es' : '' }} remaining
@@ -160,12 +160,12 @@
 
       <!-- Sold Out / Waitlist -->
       <div v-if="!available" class="space-y-3">
-        <div class="p-4 bg-red-900/20 border border-red-700/30 rounded-lg">
+        <div class="p-4 bg-ember-900/20 border border-ember-700/30 rounded-lg">
           <div class="flex items-start gap-3">
-            <Icon name="heroicons:exclamation-circle" class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
+            <Icon name="heroicons:exclamation-circle" class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" />
             <div>
-              <div class="font-semibold text-red-300 mb-1">Series Pass Sold Out</div>
-              <div class="text-sm text-red-400">
+              <div class="font-semibold text-ember-300 mb-1">Series Pass Sold Out</div>
+              <div class="text-sm text-ember-400">
                 All series passes have been claimed.
               </div>
             </div>
@@ -183,12 +183,12 @@
       </div>
 
       <!-- Already Registered -->
-      <div v-else-if="alreadyRegistered" class="p-4 bg-green-900/20 border border-green-700/30 rounded-lg">
+      <div v-else-if="alreadyRegistered" class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg">
         <div class="flex items-start gap-3">
-          <Icon name="heroicons:check-badge" class="w-6 h-6 text-green-400 flex-shrink-0" />
+          <Icon name="heroicons:check-badge" class="w-6 h-6 text-candlelight-400 flex-shrink-0" />
           <div>
-            <div class="font-semibold text-green-300 mb-1">You're Registered!</div>
-            <div class="text-sm text-green-400">
+            <div class="font-semibold text-candlelight-300 mb-1">You're Registered!</div>
+            <div class="text-sm text-candlelight-400">
               You have a series pass and are registered for all {{ totalEvents }} events.
             </div>
           </div>
diff --git a/app/components/EventTicketCard.vue b/app/components/EventTicketCard.vue
index 62838d3..5cd2e05 100644
--- a/app/components/EventTicketCard.vue
+++ b/app/components/EventTicketCard.vue
@@ -25,7 +25,7 @@
       <!-- Badge -->
       <div v-if="ticketInfo.isMember" class="flex-shrink-0 ml-4">
         <span
-          class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
+          class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400"
         >
           Members Only
         </span>
@@ -36,8 +36,8 @@
     <div class="mb-4">
       <div class="flex items-baseline gap-2">
         <span
-          class="text-3xl font-bold"
-          :class="ticketInfo.isFree ? 'text-green-400' : 'text-guild-100'"
+          class="text-3xl font-bold text-ui-mono"
+          :class="ticketInfo.isFree ? 'text-candlelight-400' : 'text-guild-100'"
         >
           {{ ticketInfo.formattedPrice }}
         </span>
@@ -74,9 +74,9 @@
     <!-- Member Savings -->
     <div
       v-if="ticketInfo.publicTicket && ticketInfo.memberSavings > 0"
-      class="mb-4 p-3 bg-green-900/20 rounded-lg border border-green-800"
+      class="mb-4 p-3 bg-candlelight-900/20 rounded-lg border border-candlelight-800"
     >
-      <p class="text-sm text-green-400">
+      <p class="text-sm text-candlelight-400">
         <Icon name="heroicons:check-circle" class="w-4 h-4 inline mr-1" />
         You save {{ formatPrice(ticketInfo.memberSavings) }} as a member!
       </p>
@@ -90,14 +90,14 @@
       <div>
         <span
           v-if="alreadyRegistered"
-          class="text-green-400 flex items-center gap-1"
+          class="text-candlelight-400 flex items-center gap-1"
         >
           <Icon name="heroicons:check-circle-solid" class="w-4 h-4" />
           You're registered
         </span>
         <span
           v-else-if="!isAvailable"
-          class="text-red-400 flex items-center gap-1"
+          class="text-ember-400 flex items-center gap-1"
         >
           <Icon name="heroicons:x-circle-solid" class="w-4 h-4" />
           Sold Out
diff --git a/app/components/EventTicketPurchase.vue b/app/components/EventTicketPurchase.vue
index 909cd80..4a201ed 100644
--- a/app/components/EventTicketPurchase.vue
+++ b/app/components/EventTicketPurchase.vue
@@ -11,26 +11,26 @@
     <!-- Error State -->
     <div
       v-else-if="error"
-      class="p-6 bg-red-900/20 rounded-xl border border-red-800"
+      class="p-6 bg-ember-900/20 rounded-xl border border-ember-800"
     >
-      <h3 class="text-lg font-semibold text-red-300 mb-2">
+      <h3 class="text-lg font-semibold text-ember-300 mb-2">
         Unable to Load Tickets
       </h3>
-      <p class="text-red-400">{{ error }}</p>
+      <p class="text-ember-400">{{ error }}</p>
     </div>
 
     <!-- Series Pass Required -->
     <div
       v-else-if="ticketInfo?.requiresSeriesPass"
-      class="p-6 bg-purple-900/20 rounded-xl border border-purple-800"
+      class="p-6 bg-candlelight-900/20 rounded-xl border border-candlelight-800"
     >
       <h3
-        class="text-lg font-semibold text-purple-300 mb-2 flex items-center gap-2"
+        class="text-lg font-semibold text-candlelight-300 mb-2 flex items-center gap-2"
       >
         <Icon name="heroicons:ticket" class="w-6 h-6" />
         Series Pass Required
       </h3>
-      <p class="text-purple-400 mb-4">
+      <p class="text-candlelight-400 mb-4">
         This event is part of
         <strong>{{ ticketInfo.series?.title }}</strong> and requires a series
         pass to attend.
@@ -51,15 +51,15 @@
     <!-- Already Registered -->
     <div
       v-else-if="ticketInfo?.alreadyRegistered"
-      class="p-6 bg-green-900/20 rounded-xl border border-green-800"
+      class="p-6 bg-candlelight-900/20 rounded-xl border border-candlelight-800"
     >
       <h3
-        class="text-lg font-semibold text-green-300 mb-2 flex items-center gap-2"
+        class="text-lg font-semibold text-candlelight-300 mb-2 flex items-center gap-2"
       >
         <Icon name="heroicons:check-circle-solid" class="w-6 h-6" />
         You're Registered!
       </h3>
-      <p class="text-green-400 mb-4">
+      <p class="text-candlelight-400 mb-4">
         <template v-if="ticketInfo.viaSeriesPass">
           You have access to this event via your series pass for
           <strong>{{ ticketInfo.series?.title }}</strong
@@ -136,9 +136,9 @@
           <!-- Member Benefits Notice -->
           <div
             v-if="ticketInfo.isMember && ticketInfo.isFree"
-            class="p-4 bg-purple-900/20 rounded-lg border border-purple-800"
+            class="p-4 bg-candlelight-900/20 rounded-lg border border-candlelight-800"
           >
-            <p class="text-sm text-purple-300 flex items-center gap-2">
+            <p class="text-sm text-candlelight-300 flex items-center gap-2">
               <Icon name="heroicons:sparkles" class="w-4 h-4" />
               This event is free for Ghost Guild members
             </p>
@@ -147,9 +147,9 @@
           <!-- Payment Required Notice -->
           <div
             v-if="!ticketInfo.isFree"
-            class="p-4 bg-blue-900/20 rounded-lg border border-blue-800"
+            class="p-4 bg-candlelight-900/20 rounded-lg border border-candlelight-800"
           >
-            <p class="text-sm text-blue-300 flex items-center gap-2">
+            <p class="text-sm text-candlelight-300 flex items-center gap-2">
               <Icon name="heroicons:credit-card" class="w-4 h-4" />
               Payment of {{ ticketInfo.formattedPrice }} will be processed
               securely
@@ -201,7 +201,7 @@
       <div v-else-if="!ticketInfo.available" class="text-center py-8">
         <Icon
           name="heroicons:x-circle"
-          class="w-16 h-16 text-red-400 mx-auto mb-4"
+          class="w-16 h-16 text-ember-400 mx-auto mb-4"
         />
         <h3 class="text-xl font-bold text-guild-100 mb-2">Event Sold Out</h3>
         <p class="text-guild-300">
diff --git a/app/components/GuildDivider.vue b/app/components/GuildDivider.vue
new file mode 100644
index 0000000..2f9fecc
--- /dev/null
+++ b/app/components/GuildDivider.vue
@@ -0,0 +1,47 @@
+<template>
+  <div :class="['guild-divider', spacing]" role="separator" aria-hidden="true">
+    <!-- Woodcut: irregular hand-drawn line -->
+    <svg
+      v-if="variant === 'woodcut'"
+      viewBox="0 0 800 12"
+      preserveAspectRatio="none"
+      class="w-full h-3 text-guild-600"
+    >
+      <path
+        d="M0,6 Q50,3 100,7 T200,5 T300,8 T400,4 T500,7 T600,5 T700,8 T800,6"
+        stroke="currentColor"
+        stroke-width="1.5"
+        fill="none"
+        stroke-dasharray="8,3,15,4,6,5"
+      />
+    </svg>
+
+    <!-- Dither: warm amber dithered line -->
+    <div v-else-if="variant === 'dither'" class="h-px dithered-warm opacity-60" />
+
+    <!-- Dots: halftone dot row -->
+    <div
+      v-else-if="variant === 'dots'"
+      class="h-2 halftone-texture opacity-30"
+    />
+
+    <!-- Simple: plain rule -->
+    <hr v-else class="border-guild-700" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'simple',
+    validator: (v) => ['simple', 'woodcut', 'dither', 'dots'].includes(v),
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const spacing = computed(() => props.compact ? 'my-4' : 'my-8')
+</script>
diff --git a/app/components/ImageUpload.vue b/app/components/ImageUpload.vue
index 04236f3..0b18cba 100644
--- a/app/components/ImageUpload.vue
+++ b/app/components/ImageUpload.vue
@@ -5,14 +5,14 @@
       <img
         :src="transformedImageUrl"
         :alt="modelValue.alt || 'Event image'"
-        class="w-full h-48 object-cover rounded-lg border border-neutral-200"
+        class="w-full h-48 object-cover rounded-lg border border-guild-700"
         @error="console.log('Image failed to load:', transformedImageUrl)"
         @load="console.log('Image loaded successfully:', transformedImageUrl)"
       />
       <button
         @click="removeImage"
         type="button"
-        class="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
+        class="absolute top-2 right-2 p-1 bg-ember-500 text-white rounded-full hover:bg-ember-600 transition-colors"
       >
         <Icon name="heroicons:x-mark" class="w-4 h-4" />
       </button>
@@ -21,11 +21,11 @@
     <!-- Upload Area -->
     <div
       v-if="!modelValue?.url"
-      class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors"
+      class="border-2 border-dashed border-guild-700 rounded-lg p-6 text-center hover:border-guild-600 transition-colors"
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
       @drop.prevent="handleDrop"
-      :class="{ 'border-blue-400 bg-blue-50': isDragging }"
+      :class="{ 'border-candlelight-400 bg-candlelight-900/20': isDragging }"
     >
       <input
         ref="fileInput"
@@ -36,52 +36,52 @@
       />
 
       <div class="space-y-3">
-        <Icon name="heroicons:photo" class="w-12 h-12 text-gray-400 mx-auto" />
+        <Icon name="heroicons:photo" class="w-12 h-12 text-guild-400 mx-auto" />
         <div>
-          <p class="text-gray-600">
+          <p class="text-guild-400">
             <button
               type="button"
               @click="$refs.fileInput.click()"
-              class="text-primary-600 hover:text-primary-500 font-medium"
+              class="text-candlelight-400 hover:text-candlelight-300 font-medium"
             >
               Click to upload
             </button>
             or drag and drop
           </p>
-          <p class="text-sm text-gray-500">PNG, JPG, GIF up to 10MB</p>
+          <p class="text-sm text-guild-500">PNG, JPG, GIF up to 10MB</p>
         </div>
       </div>
     </div>
 
     <!-- Alt Text Input -->
     <div v-if="modelValue?.url">
-      <label class="block text-sm font-medium text-gray-700 mb-1">
+      <label class="block text-sm font-medium text-guild-100 mb-1">
         Alt Text (for accessibility)
       </label>
       <input
         :value="modelValue.alt || ''"
         @input="updateAltText($event.target.value)"
         placeholder="Describe this image..."
-        class="w-full border border-neutral-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
       />
     </div>
 
     <!-- Upload Progress -->
     <div v-if="isUploading" class="space-y-2">
       <div class="flex items-center justify-between text-sm">
-        <span class="text-gray-600">Uploading...</span>
-        <span class="text-gray-600">{{ uploadProgress }}%</span>
+        <span class="text-guild-400">Uploading...</span>
+        <span class="text-guild-400">{{ uploadProgress }}%</span>
       </div>
-      <div class="w-full bg-gray-200 rounded-full h-2">
+      <div class="w-full bg-guild-800 rounded-full h-2">
         <div
-          class="bg-blue-600 h-2 rounded-full transition-all duration-300"
+          class="bg-candlelight-600 h-2 rounded-full transition-all duration-300"
           :style="`width: ${uploadProgress}%`"
         />
       </div>
     </div>
 
     <!-- Error Message -->
-    <div v-if="errorMessage" class="text-sm text-red-600">
+    <div v-if="errorMessage" class="text-sm text-ember-400">
       {{ errorMessage }}
     </div>
   </div>
diff --git a/app/components/LoginModal.vue b/app/components/LoginModal.vue
index a826505..bea9816 100644
--- a/app/components/LoginModal.vue
+++ b/app/components/LoginModal.vue
@@ -17,8 +17,8 @@
       <div class="space-y-6">
         <!-- Success State -->
         <div v-if="loginSuccess" class="text-center py-4">
-          <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <Icon name="heroicons:check-circle" class="w-10 h-10 text-green-400" />
+          <div class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Icon name="heroicons:check-circle" class="w-10 h-10 text-candlelight-400" />
           </div>
           <h3 class="text-lg font-semibold text-guild-100 mb-2">Check your email</h3>
           <p class="text-guild-300">
@@ -55,9 +55,9 @@
           <!-- Error Message -->
           <div
             v-if="loginError"
-            class="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"
+            class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg"
           >
-            <p class="text-red-400 text-sm">{{ loginError }}</p>
+            <p class="text-ember-400 text-sm">{{ loginError }}</p>
           </div>
 
           <!-- Submit Button -->
diff --git a/app/components/MemberStatusBanner.vue b/app/components/MemberStatusBanner.vue
index ea9192b..8eb8021 100644
--- a/app/components/MemberStatusBanner.vue
+++ b/app/components/MemberStatusBanner.vue
@@ -97,11 +97,11 @@ const handleActionClick = async () => {
 // Map color names to UButton color props
 const getButtonColor = (color) => {
   const colorMap = {
-    orange: "orange",
-    blue: "blue",
-    gray: "gray",
+    orange: "warning",
+    blue: "primary",
+    gray: "neutral",
   };
-  return colorMap[color] || "blue";
+  return colorMap[color] || "primary";
 };
 
 // Only show banner if status is not active
@@ -117,8 +117,8 @@ const nextAction = computed(() => getNextAction());
 const getActionButtonClass = (color) => {
   const baseClass = "hover:scale-105 active:scale-95";
   const colorClasses = {
-    orange: "bg-orange-600 text-white hover:bg-orange-700",
-    blue: "bg-blue-600 text-white hover:bg-blue-700",
+    orange: "bg-candlelight-600 text-white hover:bg-candlelight-700",
+    blue: "bg-guild-600 text-white hover:bg-guild-500",
     gray: "bg-guild-700 text-guild-100 hover:bg-guild-600",
   };
   return `${baseClass} ${colorClasses[color] || colorClasses.blue}`;
diff --git a/app/components/NaturalDateInput.vue b/app/components/NaturalDateInput.vue
index 646d13c..44374ac 100644
--- a/app/components/NaturalDateInput.vue
+++ b/app/components/NaturalDateInput.vue
@@ -18,12 +18,12 @@
           <Icon
             v-if="isValidParse && naturalInput.trim()"
             name="heroicons:check-circle"
-            class="w-5 h-5 text-green-500"
+            class="w-5 h-5 text-candlelight-500"
           />
           <Icon
             v-else-if="hasError && naturalInput.trim()"
             name="heroicons:exclamation-circle"
-            class="w-5 h-5 text-red-500"
+            class="w-5 h-5 text-ember-500"
           />
         </template>
       </UInput>
@@ -31,7 +31,7 @@
 
     <div
       v-if="parsedDate && isValidParse"
-      class="text-sm text-green-700 bg-green-50 px-3 py-2 rounded-lg border border-green-200"
+      class="text-sm text-candlelight-400 bg-candlelight-900/20 px-3 py-2 rounded-lg border border-candlelight-800"
     >
       <div class="flex items-center gap-2">
         <Icon name="heroicons:calendar" class="w-4 h-4" />
@@ -41,7 +41,7 @@
 
     <div
       v-if="hasError && naturalInput.trim()"
-      class="text-sm text-red-700 bg-red-50 px-3 py-2 rounded-lg border border-red-200"
+      class="text-sm text-ember-400 bg-ember-900/20 px-3 py-2 rounded-lg border border-ember-800"
     >
       <div class="flex items-center gap-2">
         <Icon name="heroicons:exclamation-triangle" class="w-4 h-4" />
@@ -51,7 +51,7 @@
 
     <!-- Fallback datetime-local input -->
     <details class="text-sm">
-      <summary class="cursor-pointer text-muted hover:text-default">
+      <summary class="cursor-pointer text-guild-400 hover:text-guild-100">
         Use traditional date picker
       </summary>
       <div class="mt-2">
diff --git a/app/components/PageHeader.vue b/app/components/PageHeader.vue
index b873572..a81c103 100644
--- a/app/components/PageHeader.vue
+++ b/app/components/PageHeader.vue
@@ -1,105 +1,60 @@
 <template>
   <header
     class="relative py-16 md:py-24 bg-cover bg-center"
-    style="background-image: url(&quot;/background-dither.png&quot;)"
+    style="background-image: url('/background-dither.webp')"
   >
     <div class="absolute inset-0 bg-black/40"></div>
     <UContainer class="relative z-10">
       <div class="text-center max-w-4xl mx-auto">
         <h1
-          class="font-bold mb-6 md:mb-8"
-          :class="[titleSizeClass, titleColorClass]"
+          class="font-bold mb-6 md:mb-8 text-white"
+          :class="titleSizeClass"
         >
           {{ title }}
         </h1>
 
         <p
           v-if="subtitle"
-          class="text-lg md:text-xl leading-relaxed mb-8"
-          :class="subtitleColorClass"
+          class="text-lg md:text-xl leading-relaxed mb-8 text-white/90"
         >
           {{ subtitle }}
         </p>
 
-        <!-- Interactive Content Area (for hero sections with carousels, etc.) -->
+        <!-- Interactive Content Area (for hero sections with carousels) -->
         <div
           v-if="showInteractiveArea"
-          :class="[
-            'rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm',
-            props.theme === 'guild'
-              ? 'bg-guild-800/60 border border-guild-700 candlelight-glow halftone-texture'
-              : 'bg-[--ui-bg-elevated] shadow-xl border border-blue-200',
-          ]"
+          class="rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm bg-guild-800/60 border border-guild-700 candlelight-glow halftone-texture"
         >
           <div class="flex items-center justify-between gap-3 md:gap-4">
             <button
-              :class="[
-                'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
-                props.theme === 'guild'
-                  ? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
-                  : 'bg-blue-500 text-white hover:bg-blue-600',
-              ]"
+              class="p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0 bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow"
               @click="$emit('prev')"
             >
-              <svg
-                class="w-5 h-5 md:w-6 md:h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M15 19l-7-7 7-7"
-                />
-              </svg>
+              <UIcon name="i-lucide-chevron-left" class="size-5 md:size-6" />
             </button>
 
             <div class="text-center flex-1 min-w-0">
               <slot name="interactive-content">
-                <p
-                  :class="[
-                    'text-base md:text-lg',
-                    props.theme === 'guild'
-                      ? 'text-guild-200'
-                      : 'text-[--ui-text-muted]',
-                  ]"
-                >
-                  {{
-                    interactiveContent ||
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                  }}
+                <p class="text-base md:text-lg text-guild-200">
+                  {{ interactiveContent }}
                 </p>
               </slot>
             </div>
 
             <button
-              :class="[
-                'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
-                props.theme === 'guild'
-                  ? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
-                  : 'bg-blue-500 text-white hover:bg-blue-600',
-              ]"
+              class="p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0 bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow"
               @click="$emit('next')"
             >
-              <svg
-                class="w-5 h-5 md:w-6 md:h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
+              <UIcon name="i-lucide-chevron-right" class="size-5 md:size-6" />
             </button>
           </div>
         </div>
 
+        <!-- Illustration slot for designer-provided assets -->
+        <div v-if="$slots.illustration" class="mb-8">
+          <slot name="illustration" />
+        </div>
+
         <!-- Call to Action Button -->
         <div v-if="showCta" class="flex justify-center">
           <UButton
@@ -122,8 +77,6 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
-
 const props = defineProps({
   title: {
     type: String,
@@ -131,18 +84,12 @@ const props = defineProps({
   },
   subtitle: {
     type: String,
-    default: "",
-  },
-  theme: {
-    type: String,
-    default: "blue",
-    validator: (value) =>
-      ["blue", "purple", "emerald", "gray", "guild"].includes(value),
+    default: '',
   },
   size: {
     type: String,
-    default: "large",
-    validator: (value) => ["small", "medium", "large", "hero"].includes(value),
+    default: 'large',
+    validator: (value) => ['small', 'medium', 'large', 'hero'].includes(value),
   },
   showInteractiveArea: {
     type: Boolean,
@@ -150,7 +97,7 @@ const props = defineProps({
   },
   interactiveContent: {
     type: String,
-    default: "",
+    default: '',
   },
   showCta: {
     type: Boolean,
@@ -158,55 +105,31 @@ const props = defineProps({
   },
   ctaText: {
     type: String,
-    default: "Get Started",
+    default: 'Get Started',
   },
   ctaLink: {
     type: String,
-    default: "/join",
+    default: '/join',
   },
   ctaSize: {
     type: String,
-    default: "lg",
+    default: 'lg',
   },
   ctaColor: {
     type: String,
-    default: "primary",
+    default: 'primary',
   },
-});
+})
 
-defineEmits(["prev", "next"]);
-
-const backgroundClass = computed(() => {
-  const themes = {
-    blue: "bg-gradient-to-br from-blue-50 to-indigo-100",
-    purple: "bg-gradient-to-br from-purple-50 to-violet-100",
-    emerald: "bg-gradient-to-br from-emerald-50 to-teal-100",
-    gray: "bg-neutral-100",
-    guild:
-      "bg-gradient-to-br from-guild-900 via-guild-800 to-candlelight-900 halftone-texture",
-  };
-  return themes[props.theme] || themes.blue;
-});
+defineEmits(['prev', 'next'])
 
 const titleSizeClass = computed(() => {
   const sizes = {
-    small: "text-2xl md:text-3xl",
-    medium: "text-3xl md:text-4xl",
-    large: "text-4xl md:text-5xl",
-    hero: "text-5xl md:text-6xl",
-  };
-  return sizes[props.size] || sizes.large;
-});
-
-const titleColorClass = computed(() => {
-  return "text-white";
-});
-
-const subtitleColorClass = computed(() => {
-  return "text-white";
-});
-
-const textColorClass = computed(() => {
-  return "text-white";
-});
+    small: 'text-display-sm',
+    medium: 'text-display',
+    large: 'text-display-lg',
+    hero: 'text-display-xl',
+  }
+  return sizes[props.size] || sizes.large
+})
 </script>
diff --git a/app/components/PeerSupportBadge.vue b/app/components/PeerSupportBadge.vue
index 2888823..0bca82a 100644
--- a/app/components/PeerSupportBadge.vue
+++ b/app/components/PeerSupportBadge.vue
@@ -17,7 +17,7 @@
       >
         <path
           d="M500 70 150 175.3v217.1C150 785 500 930 500 930s350-145 350-537.6V175.2L500 70Z"
-          class="fill-purple-500"
+          class="fill-candlelight-500"
         />
       </svg>
 
@@ -31,7 +31,7 @@
 
       <!-- Sparkle effect -->
       <div
-        class="absolute top-0 right-1 w-2 h-2 bg-yellow-300 rounded-full animate-pulse"
+        class="absolute top-0 right-1 w-2 h-2 bg-candlelight-300 rounded-full animate-pulse"
       ></div>
     </div>
   </div>
@@ -42,11 +42,11 @@
     :class="[
       'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium transition-all',
       variant === 'default' &&
-        'bg-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30',
+        'bg-candlelight-900/20 text-candlelight-400 border-candlelight-500/40 hover:bg-candlelight-900/30',
       variant === 'subtle' &&
-        'bg-purple-500/10 text-purple-400 border-purple-500/20',
+        'bg-candlelight-900/10 text-candlelight-500 border-candlelight-500/20',
       variant === 'solid' &&
-        'bg-purple-500 text-white border-purple-600 hover:bg-purple-600',
+        'bg-candlelight-500 text-white border-candlelight-600 hover:bg-candlelight-600',
     ]"
     :title="title"
   >
@@ -54,8 +54,8 @@
       name="heroicons:chat-bubble-left-right"
       :class="[
         'w-3.5 h-3.5',
-        variant === 'default' && 'text-purple-300',
-        variant === 'subtle' && 'text-purple-400',
+        variant === 'default' && 'text-candlelight-400',
+        variant === 'subtle' && 'text-candlelight-500',
         variant === 'solid' && 'text-white',
       ]"
     />
diff --git a/app/components/PrivacyToggle.vue b/app/components/PrivacyToggle.vue
index 6190c6e..b2d0227 100644
--- a/app/components/PrivacyToggle.vue
+++ b/app/components/PrivacyToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center gap-3 text-sm">
-    <span class="text-gray-700 dark:text-guild-400 text-xs font-medium"
+    <span class="text-guild-400 text-xs font-medium"
       >{{ label }}:</span
     >
     <div class="flex items-center gap-2">
@@ -8,8 +8,8 @@
         class="text-xs transition-colors"
         :class="
           isPrivate
-            ? 'text-gray-500 dark:text-guild-500'
-            : 'text-blue-600 dark:text-blue-400 font-semibold'
+            ? 'text-guild-500'
+            : 'text-candlelight-500 font-semibold'
         "
       >
         Members
@@ -24,8 +24,8 @@
         class="text-xs transition-colors"
         :class="
           isPrivate
-            ? 'text-blue-600 dark:text-blue-400 font-semibold'
-            : 'text-gray-500 dark:text-guild-500'
+            ? 'text-candlelight-500 font-semibold'
+            : 'text-guild-500'
         "
       >
         Private
@@ -38,19 +38,19 @@
 const props = defineProps({
   modelValue: {
     type: String,
-    default: "members",
+    default: 'members',
   },
   label: {
     type: String,
-    default: "Privacy",
+    default: 'Privacy',
   },
-});
+})
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue'])
 
-const isPrivate = computed(() => props.modelValue === "private");
+const isPrivate = computed(() => props.modelValue === 'private')
 
 const togglePrivacy = (value) => {
-  emit("update:modelValue", value ? "private" : "members");
-};
+  emit('update:modelValue', value ? 'private' : 'members')
+}
 </script>
diff --git a/app/components/SectionHeader.vue b/app/components/SectionHeader.vue
new file mode 100644
index 0000000..1b677f0
--- /dev/null
+++ b/app/components/SectionHeader.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="section-header" :class="[spacing]">
+    <p v-if="overline" class="text-ui-label text-candlelight-500 mb-2">
+      {{ overline }}
+    </p>
+    <component :is="tag" :class="[sizeClass, 'text-guild-100']">
+      <slot>{{ title }}</slot>
+    </component>
+    <p v-if="subtitle" class="mt-3 text-guild-400 text-lg leading-relaxed">
+      {{ subtitle }}
+    </p>
+    <GuildDivider v-if="divider" :variant="divider" compact class="mt-4" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  overline: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['xl', 'lg', 'md', 'sm'].includes(v),
+  },
+  tag: {
+    type: String,
+    default: 'h2',
+  },
+  divider: {
+    type: String,
+    default: '',
+    validator: (v) => ['', 'simple', 'woodcut', 'dither', 'dots'].includes(v),
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const sizeClass = computed(() => {
+  const sizes = {
+    xl: 'text-display-xl',
+    lg: 'text-display-lg',
+    md: 'text-display',
+    sm: 'text-display-sm',
+  }
+  return sizes[props.size]
+})
+
+const spacing = computed(() => props.compact ? 'mb-4' : 'mb-8')
+</script>
diff --git a/app/components/SeriesPassPurchase.vue b/app/components/SeriesPassPurchase.vue
index a0c504a..2dc61d9 100644
--- a/app/components/SeriesPassPurchase.vue
+++ b/app/components/SeriesPassPurchase.vue
@@ -11,12 +11,12 @@
     <!-- Error State -->
     <div
       v-else-if="error"
-      class="p-6 bg-red-900/20 rounded-xl border border-red-800"
+      class="p-6 bg-ember-900/20 rounded-xl border border-ember-800"
     >
-      <h3 class="text-lg font-semibold text-red-300 mb-2">
+      <h3 class="text-lg font-semibold text-ember-300 mb-2">
         Unable to Load Series Pass
       </h3>
-      <p class="text-red-400">{{ error }}</p>
+      <p class="text-ember-400">{{ error }}</p>
     </div>
 
     <!-- Content -->
@@ -93,18 +93,18 @@
           <!-- Member Benefits Notice -->
           <div
             v-if="passInfo.ticket.isFree && passInfo.memberInfo?.isMember"
-            class="p-4 bg-green-900/20 border border-green-700/30 rounded-lg"
+            class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg"
           >
             <div class="flex items-start gap-3">
               <Icon
                 name="heroicons:sparkles"
-                class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"
+                class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5"
               />
               <div>
-                <div class="font-semibold text-green-300 mb-1">
+                <div class="font-semibold text-candlelight-300 mb-1">
                   Member Benefit
                 </div>
-                <div class="text-sm text-green-400">
+                <div class="text-sm text-candlelight-400">
                   This series pass is free for Ghost Guild members!
                 </div>
               </div>
diff --git a/app/components/SvgFilters.vue b/app/components/SvgFilters.vue
new file mode 100644
index 0000000..be9870e
--- /dev/null
+++ b/app/components/SvgFilters.vue
@@ -0,0 +1,42 @@
+<template>
+  <!-- Hidden SVG filter definitions available to entire app -->
+  <svg class="absolute w-0 h-0 overflow-hidden" aria-hidden="true">
+    <defs>
+      <!-- Fine grain noise - for ink-grain effect -->
+      <filter id="grain-fine" x="0" y="0" width="100%" height="100%">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.65"
+          numOctaves="3"
+          stitchTiles="stitch"
+          result="noise"
+        />
+        <feColorMatrix type="saturate" values="0" in="noise" result="mono" />
+      </filter>
+
+      <!-- Paper fiber texture - for paper-texture effect -->
+      <filter id="grain-paper" x="0" y="0" width="100%" height="100%">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.04"
+          numOctaves="5"
+          stitchTiles="stitch"
+          result="noise"
+        />
+        <feColorMatrix type="saturate" values="0" in="noise" result="mono" />
+      </filter>
+
+      <!-- Coarse grain - for workshop/craft surface textures -->
+      <filter id="grain-coarse" x="0" y="0" width="100%" height="100%">
+        <feTurbulence
+          type="turbulence"
+          baseFrequency="0.3"
+          numOctaves="2"
+          stitchTiles="stitch"
+          result="noise"
+        />
+        <feColorMatrix type="saturate" values="0" in="noise" result="mono" />
+      </filter>
+    </defs>
+  </svg>
+</template>
diff --git a/app/components/UpdateForm.vue b/app/components/UpdateForm.vue
index 72add36..c8b9d98 100644
--- a/app/components/UpdateForm.vue
+++ b/app/components/UpdateForm.vue
@@ -93,9 +93,9 @@
     <!-- Error Message -->
     <div
       v-if="error"
-      class="bg-red-500/10 border border-red-500/30 rounded-lg p-4"
+      class="bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
     >
-      <p class="text-red-300">{{ error }}</p>
+      <p class="text-ember-400">{{ error }}</p>
     </div>
   </div>
 </template>
diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 92a57e7..3da85fa 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="min-h-screen bg-muted">
+  <div class="min-h-screen bg-guild-950">
     <!-- Admin Navigation -->
-    <nav class="bg-elevated border-b border-default shadow-sm">
+    <nav class="bg-guild-900 border-b border-guild-700 shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center py-4">
           <div class="flex items-center gap-8">
             <NuxtLink
               to="/"
-              class="text-xl font-bold text-highlighted hover:text-primary"
+              class="text-xl font-bold font-serif warm-text text-guild-100 hover:text-candlelight-400"
             >
               Ghost Guild
             </NuxtLink>
@@ -18,8 +18,8 @@
                 :class="[
                   'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
                   $route.path === '/admin'
-                    ? 'bg-primary/10 text-primary shadow-sm'
-                    : 'text-muted hover:text-primary hover:bg-primary/5',
+                    ? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
+                    : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
                 ]"
               >
                 <svg
@@ -49,8 +49,8 @@
                 :class="[
                   'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
                   $route.path.includes('/admin/members')
-                    ? 'bg-primary/10 text-primary shadow-sm'
-                    : 'text-muted hover:text-primary hover:bg-primary/5',
+                    ? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
+                    : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
                 ]"
               >
                 <svg
@@ -74,8 +74,8 @@
                 :class="[
                   'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
                   $route.path.includes('/admin/events')
-                    ? 'bg-primary/10 text-primary shadow-sm'
-                    : 'text-muted hover:text-primary hover:bg-primary/5',
+                    ? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
+                    : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
                 ]"
               >
                 <svg
@@ -99,8 +99,8 @@
                 :class="[
                   'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
                   $route.path.includes('/admin/series')
-                    ? 'bg-primary/10 text-primary shadow-sm'
-                    : 'text-muted hover:text-primary hover:bg-primary/5',
+                    ? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
+                    : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
                 ]"
               >
                 <svg
@@ -129,10 +129,10 @@
               v-click-outside="() => (showUserMenu = false)"
             >
               <button
-                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted cursor-pointer transition-colors"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-guild-800 cursor-pointer transition-colors"
               >
                 <div
-                  class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center"
+                  class="w-8 h-8 bg-candlelight-600 rounded-full flex items-center justify-center"
                 >
                   <svg
                     class="w-4 h-4 text-white"
@@ -148,11 +148,11 @@
                     />
                   </svg>
                 </div>
-                <span class="hidden md:block text-sm font-medium text-default"
+                <span class="hidden md:block text-sm font-medium text-guild-100"
                   >Admin</span
                 >
                 <svg
-                  class="w-4 h-4 text-gray-400"
+                  class="w-4 h-4 text-guild-400"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -169,14 +169,14 @@
               <!-- User Menu Dropdown -->
               <div
                 v-if="showUserMenu"
-                class="absolute right-0 mt-2 w-56 bg-elevated rounded-lg shadow-lg border border-default py-1 z-50"
+                class="absolute right-0 mt-2 w-56 bg-guild-800 rounded-lg shadow-lg border border-guild-700 py-1 z-50"
               >
                 <NuxtLink
                   to="/"
-                  class="flex items-center px-4 py-2 text-sm text-default hover:bg-muted"
+                  class="flex items-center px-4 py-2 text-sm text-guild-100 hover:bg-guild-700"
                 >
                   <svg
-                    class="w-4 h-4 mr-3 text-gray-400"
+                    class="w-4 h-4 mr-3 text-guild-400"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -198,10 +198,10 @@
                 </NuxtLink>
                 <NuxtLink
                   to="/admin/settings"
-                  class="flex items-center px-4 py-2 text-sm text-default hover:bg-muted"
+                  class="flex items-center px-4 py-2 text-sm text-guild-100 hover:bg-guild-700"
                 >
                   <svg
-                    class="w-4 h-4 mr-3 text-gray-400"
+                    class="w-4 h-4 mr-3 text-guild-400"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -221,13 +221,13 @@
                   </svg>
                   Settings
                 </NuxtLink>
-                <hr class="my-1 border-default" />
+                <hr class="my-1 border-guild-700" />
                 <button
                   @click="logout"
-                  class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+                  class="flex items-center w-full px-4 py-2 text-sm text-ember-400 hover:bg-ember-900/20"
                 >
                   <svg
-                    class="w-4 h-4 mr-3 text-red-500"
+                    class="w-4 h-4 mr-3 text-ember-400"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -249,7 +249,7 @@
     </nav>
 
     <!-- Mobile Navigation -->
-    <div class="md:hidden bg-elevated border-b border-default">
+    <div class="md:hidden bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center gap-2 py-3 overflow-x-auto">
           <NuxtLink
@@ -257,8 +257,8 @@
             :class="[
               'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
               $route.path === '/admin'
-                ? 'bg-primary/10 text-primary'
-                : 'text-muted hover:text-primary hover:bg-primary/5',
+                ? 'bg-candlelight-900/30 text-candlelight-400'
+                : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
             ]"
           >
             Dashboard
@@ -269,8 +269,8 @@
             :class="[
               'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
               $route.path.includes('/admin/members')
-                ? 'bg-primary/10 text-primary'
-                : 'text-muted hover:text-primary hover:bg-primary/5',
+                ? 'bg-candlelight-900/30 text-candlelight-400'
+                : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
             ]"
           >
             Members
@@ -281,8 +281,8 @@
             :class="[
               'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
               $route.path.includes('/admin/events')
-                ? 'bg-primary/10 text-primary'
-                : 'text-muted hover:text-primary hover:bg-primary/5',
+                ? 'bg-candlelight-900/30 text-candlelight-400'
+                : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
             ]"
           >
             Events
@@ -293,8 +293,8 @@
             :class="[
               'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
               $route.path.includes('/admin/series')
-                ? 'bg-primary/10 text-primary'
-                : 'text-muted hover:text-primary hover:bg-primary/5',
+                ? 'bg-candlelight-900/30 text-candlelight-400'
+                : 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
             ]"
           >
             Series
@@ -309,10 +309,10 @@
     </main>
 
     <!-- Footer -->
-    <footer class="bg-elevated border-t border-default mt-auto">
+    <footer class="bg-guild-900 border-t border-guild-700 mt-auto">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-8 text-center">
-          <p class="text-sm text-muted">
+          <p class="text-sm text-guild-400">
             &copy; 2025 Ghost Guild. Admin Panel.
           </p>
         </div>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3c3eb32..f8ec29b 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -4,7 +4,7 @@
     <div
       class="absolute inset-x-0 pointer-events-none z-0"
       style="
-        background-image: url(&quot;/background-dither.png&quot;);
+        background-image: url(&quot;/background-dither.webp&quot;);
         background-size: 100% auto;
         background-position: top center;
         background-repeat: no-repeat;
@@ -28,7 +28,7 @@
       <div class="flex items-center justify-between p-4">
         <NuxtLink
           to="/"
-          class="text-lg font-bold text-white warm-text tracking-wider"
+          class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wider"
         >
           Ghost Guild
         </NuxtLink>
diff --git a/app/layouts/landing.vue b/app/layouts/landing.vue
index dcf59e9..d7bc75a 100644
--- a/app/layouts/landing.vue
+++ b/app/layouts/landing.vue
@@ -4,7 +4,7 @@
     <nav class="w-full px-6 md:px-8 py-4">
       <div class="max-w-6xl mx-auto flex items-center justify-between">
         <!-- Logo/Wordmark -->
-        <NuxtLink to="/" class="text-xl font-bold text-primary-400 tracking-wide">
+        <NuxtLink to="/" class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wide">
           Ghost Guild
         </NuxtLink>
 
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 69c0b93..a9222b2 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -4,7 +4,6 @@
     <PageHeader
       title="About Ghost Guild"
       subtitle=""
-      theme="blue"
       size="large"
     />
 
@@ -129,7 +128,7 @@
     <section class="py-20 bg-[--ui-bg-elevated]">
       <UContainer>
         <div class="max-w-3xl">
-          <h2 class="text-2xl font-bold text-[--ui-text] mb-4">
+          <h2 class="text-display-sm font-bold text-[--ui-text] mb-4">
             Membership Circles
           </h2>
           <p class="text-lg text-[--ui-text-muted] mb-6">
diff --git a/app/pages/about/circles.vue b/app/pages/about/circles.vue
index 1fc7786..710fec1 100644
--- a/app/pages/about/circles.vue
+++ b/app/pages/about/circles.vue
@@ -4,7 +4,6 @@
     <PageHeader
       title="About Our Membership Circles"
       subtitle="All members of Ghost Guild share the Baby Ghosts mission: Advancing cooperative and worker-centric labour models in the Canadian interactive digital arts sector."
-      theme="blue"
       size="large"
     />
 
@@ -12,7 +11,7 @@
     <section class="py-20 bg-[--ui-bg]">
       <UContainer>
         <div class="max-w-4xl mx-auto">
-          <h2 class="text-3xl font-bold text-[--ui-text] mb-6">
+          <h2 class="text-display font-bold text-[--ui-text] mb-6">
             How membership works
           </h2>
 
@@ -43,7 +42,7 @@
     <section class="py-20 bg-[--ui-bg-elevated]">
       <UContainer>
         <div class="max-w-4xl mx-auto">
-          <h2 class="text-3xl font-bold text-[--ui-text] mb-4">
+          <h2 class="text-display font-bold text-[--ui-text] mb-4">
             Find your circle
           </h2>
           <p class="text-lg text-[--ui-text-muted] mb-12">
@@ -53,8 +52,8 @@
 
           <div class="space-y-12">
             <!-- Community Circle -->
-            <div class="">
-              <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
+            <div class="circle-surface-community rounded-xl p-6">
+              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
                 Community Circle
               </h3>
 
@@ -88,8 +87,8 @@
             </div>
 
             <!-- Founder Circle -->
-            <div class="">
-              <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
+            <div class="circle-surface-founder rounded-xl p-6">
+              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
                 Founder Circle
               </h3>
 
@@ -138,8 +137,8 @@
             </div>
 
             <!-- Practitioner Circle -->
-            <div class="">
-              <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
+            <div class="circle-surface-practitioner rounded-xl p-6">
+              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
                 Practitioner Circle
               </h3>
 
@@ -178,7 +177,7 @@
     <section class="py-20 bg-[--ui-bg]">
       <UContainer>
         <div class="max-w-4xl mx-auto">
-          <h2 class="text-3xl font-bold text-[--ui-text] mb-8">
+          <h2 class="text-display font-bold text-[--ui-text] mb-8">
             Important Notes
           </h2>
 
diff --git a/app/pages/admin/dashboard.vue b/app/pages/admin/dashboard.vue
index 57167a4..174ae34 100644
--- a/app/pages/admin/dashboard.vue
+++ b/app/pages/admin/dashboard.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-elevated border-b border-default">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-highlighted">Admin Dashboard</h1>
-          <p class="text-muted">
+          <h1 class="text-display font-bold text-guild-100">Admin Dashboard</h1>
+          <p class="text-guild-400">
             Manage Ghost Guild members, events, and community operations
           </p>
         </div>
@@ -14,19 +14,19 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Quick Stats -->
       <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Total Members</p>
-              <p class="text-2xl font-bold text-blue-600">
+              <p class="text-sm text-guild-400">Total Members</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 {{ stats.totalMembers || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-blue-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -42,19 +42,19 @@
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Active Events</p>
-              <p class="text-2xl font-bold text-green-600">
+              <p class="text-sm text-guild-400">Active Events</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 {{ stats.activeEvents || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-green-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -70,19 +70,19 @@
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Monthly Revenue</p>
-              <p class="text-2xl font-bold text-purple-600">
+              <p class="text-sm text-guild-400">Monthly Revenue</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 ${{ stats.monthlyRevenue || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-purple-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -98,19 +98,19 @@
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Pending Slack Invites</p>
-              <p class="text-2xl font-bold text-orange-600">
+              <p class="text-sm text-guild-400">Pending Slack Invites</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 {{ stats.pendingSlackInvites || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-orange-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -129,13 +129,13 @@
 
       <!-- Quick Actions -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="text-center">
             <div
-              class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
+              class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
             >
               <svg
-                class="w-8 h-8 text-blue-600"
+                class="w-8 h-8 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -148,28 +148,28 @@
                 ></path>
               </svg>
             </div>
-            <h3 class="text-lg font-semibold text-highlighted mb-2">
+            <h3 class="text-display-sm font-semibold text-guild-100 mb-2">
               Add New Member
             </h3>
-            <p class="text-muted text-sm mb-4">
+            <p class="text-guild-400 text-sm mb-4">
               Add a new member to the Ghost Guild community
             </p>
             <button
               @click="navigateTo('/admin/members-working')"
-              class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
             >
               Manage Members
             </button>
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="text-center">
             <div
-              class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
+              class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
             >
               <svg
-                class="w-8 h-8 text-green-600"
+                class="w-8 h-8 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -182,15 +182,15 @@
                 ></path>
               </svg>
             </div>
-            <h3 class="text-lg font-semibold text-highlighted mb-2">
+            <h3 class="text-display-sm font-semibold text-guild-100 mb-2">
               Create Event
             </h3>
-            <p class="text-muted text-sm mb-4">
+            <p class="text-guild-400 text-sm mb-4">
               Schedule a new community event or workshop
             </p>
             <button
               @click="navigateTo('/admin/events-working')"
-              class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+              class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
             >
               Manage Events
             </button>
@@ -200,15 +200,15 @@
 
       <!-- Recent Activity -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div class="bg-elevated rounded-lg shadow">
-          <div class="px-6 py-4 border-b border-default">
+        <div class="bg-guild-900 rounded-lg shadow">
+          <div class="px-6 py-4 border-b border-guild-700">
             <div class="flex justify-between items-center">
-              <h3 class="text-lg font-semibold text-highlighted">
+              <h3 class="text-display-sm font-semibold text-guild-100">
                 Recent Members
               </h3>
               <button
                 @click="navigateTo('/admin/members-working')"
-                class="text-sm text-primary hover:text-primary"
+                class="text-sm text-candlelight-400 hover:text-candlelight-300"
               >
                 View All
               </button>
@@ -218,20 +218,20 @@
           <div class="p-6">
             <div v-if="pending" class="text-center py-4">
               <div
-                class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
+                class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
               ></div>
             </div>
             <div v-else-if="recentMembers.length" class="space-y-3">
               <div
                 v-for="member in recentMembers"
                 :key="member._id"
-                class="flex items-center justify-between p-3 rounded-lg border border-default"
+                class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
               >
                 <div>
-                  <p class="font-medium text-highlighted">
+                  <p class="font-medium text-guild-100">
                     {{ member.name }}
                   </p>
-                  <p class="text-sm text-muted">
+                  <p class="text-sm text-guild-400">
                     {{ member.email }}
                   </p>
                 </div>
@@ -242,27 +242,27 @@
                   >
                     {{ member.circle }}
                   </span>
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500 text-ui-mono">
                     {{ formatDate(member.createdAt) }}
                   </p>
                 </div>
               </div>
             </div>
-            <div v-else class="text-center py-6 text-dimmed">
+            <div v-else class="text-center py-6 text-guild-500">
               No recent members
             </div>
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow">
-          <div class="px-6 py-4 border-b border-default">
+        <div class="bg-guild-900 rounded-lg shadow">
+          <div class="px-6 py-4 border-b border-guild-700">
             <div class="flex justify-between items-center">
-              <h3 class="text-lg font-semibold text-highlighted">
+              <h3 class="text-display-sm font-semibold text-guild-100">
                 Upcoming Events
               </h3>
               <button
                 @click="navigateTo('/admin/events-working')"
-                class="text-sm text-primary hover:text-primary"
+                class="text-sm text-candlelight-400 hover:text-candlelight-300"
               >
                 View All
               </button>
@@ -272,20 +272,20 @@
           <div class="p-6">
             <div v-if="pending" class="text-center py-4">
               <div
-                class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
+                class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
               ></div>
             </div>
             <div v-else-if="upcomingEvents.length" class="space-y-3">
               <div
                 v-for="event in upcomingEvents"
                 :key="event._id"
-                class="flex items-center justify-between p-3 rounded-lg border border-default"
+                class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
               >
                 <div>
-                  <p class="font-medium text-highlighted">
+                  <p class="font-medium text-guild-100">
                     {{ event.title }}
                   </p>
-                  <p class="text-sm text-muted">
+                  <p class="text-sm text-guild-400">
                     {{ formatDateTime(event.startDate) }}
                   </p>
                 </div>
@@ -296,13 +296,13 @@
                   >
                     {{ event.eventType }}
                   </span>
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     {{ event.location || "Online" }}
                   </p>
                 </div>
               </div>
             </div>
-            <div v-else class="text-center py-6 text-dimmed">
+            <div v-else class="text-center py-6 text-guild-500">
               No upcoming events
             </div>
           </div>
@@ -327,21 +327,21 @@ const upcomingEvents = computed(
 
 const getCircleBadgeClasses = (circle) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    founder: "bg-purple-100 text-purple-800",
-    practitioner: "bg-green-100 text-green-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    founder: "bg-earth-900/20 text-earth-400",
+    practitioner: "bg-candlelight-900/20 text-candlelight-400",
   };
-  return classes[circle] || "bg-gray-100 text-gray-800";
+  return classes[circle] || "bg-guild-800 text-guild-300";
 };
 
 const getEventTypeBadgeClasses = (type) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    workshop: "bg-green-100 text-green-800",
-    social: "bg-purple-100 text-purple-800",
-    showcase: "bg-orange-100 text-orange-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    workshop: "bg-candlelight-900/20 text-candlelight-400",
+    social: "bg-earth-900/20 text-earth-400",
+    showcase: "bg-ember-900/20 text-ember-400",
   };
-  return classes[type] || "bg-gray-100 text-gray-800";
+  return classes[type] || "bg-guild-800 text-guild-300";
 };
 
 const formatDate = (dateString) => {
diff --git a/app/pages/admin/events-working.vue b/app/pages/admin/events-working.vue
index f18b170..8ffaefa 100644
--- a/app/pages/admin/events-working.vue
+++ b/app/pages/admin/events-working.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-elevated border-b">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-highlighted">Event Management</h1>
-          <p class="text-muted">
+          <h1 class="text-display font-bold text-guild-100">Event Management</h1>
+          <p class="text-guild-400">
             Create, manage, and monitor Ghost Guild events and workshops
           </p>
         </div>
@@ -44,73 +44,73 @@
         </div>
         <button
           @click="showCreateModal = true"
-          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
         >
           Create Event
         </button>
       </div>
 
       <!-- Events Table -->
-      <div class="bg-elevated rounded-lg shadow overflow-hidden">
+      <div class="bg-guild-900 rounded-lg shadow overflow-hidden">
         <div v-if="pending" class="p-8 text-center">
           <div class="inline-flex items-center">
             <div
-              class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
+              class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
             ></div>
             Loading events...
           </div>
         </div>
 
-        <div v-else-if="error" class="p-8 text-center text-red-600">
+        <div v-else-if="error" class="p-8 text-center text-ember-400">
           Error loading events: {{ error }}
         </div>
 
         <table v-else class="w-full">
-          <thead class="bg-muted">
+          <thead class="bg-guild-950">
             <tr>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Title
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Type
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Start Date
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Status
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Registration
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody class="bg-elevated divide-y divide-default">
+          <tbody class="bg-guild-900 divide-y divide-guild-700">
             <tr
               v-for="event in filteredEvents"
               :key="event._id"
-              class="hover:bg-muted"
+              class="hover:bg-guild-800"
             >
               <td class="px-6 py-4">
-                <div class="text-sm font-medium text-highlighted">
+                <div class="text-sm font-medium text-guild-100">
                   {{ event.title }}
                 </div>
-                <div class="text-sm text-dimmed">
+                <div class="text-sm text-guild-500">
                   {{ event.description.substring(0, 100) }}...
                 </div>
               </td>
@@ -122,7 +122,7 @@
                   {{ event.eventType }}
                 </span>
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
                 {{ formatDateTime(event.startDate) }}
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
@@ -137,31 +137,31 @@
                 <span
                   :class="
                     event.registrationRequired
-                      ? 'bg-blue-100 text-blue-800'
-                      : 'bg-accented text-default'
+                      ? 'bg-candlelight-900/20 text-candlelight-400'
+                      : 'bg-guild-800 text-guild-300'
                   "
                   class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                 >
                   {{ event.registrationRequired ? "Required" : "Open" }}
                 </span>
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-default">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-guild-100">
                 <div class="flex gap-2">
                   <button
                     @click="editEvent(event)"
-                    class="text-primary hover:text-primary"
+                    class="text-candlelight-400 hover:text-candlelight-300"
                   >
                     Edit
                   </button>
                   <button
                     @click="duplicateEvent(event)"
-                    class="text-primary hover:text-primary"
+                    class="text-candlelight-400 hover:text-candlelight-300"
                   >
                     Duplicate
                   </button>
                   <button
                     @click="deleteEvent(event)"
-                    class="text-red-600 hover:text-red-900"
+                    class="text-ember-400 hover:text-ember-300"
                   >
                     Delete
                   </button>
@@ -173,7 +173,7 @@
 
         <div
           v-if="!pending && !error && filteredEvents.length === 0"
-          class="p-8 text-center text-dimmed"
+          class="p-8 text-center text-guild-500"
         >
           No events found matching your criteria
         </div>
@@ -185,9 +185,9 @@
       v-if="showCreateModal"
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto"
     >
-      <div class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
-        <div class="px-6 py-4 border-b">
-          <h3 class="text-lg font-semibold">
+      <div class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
+        <div class="px-6 py-4 border-b border-guild-700">
+          <h3 class="text-display-sm font-semibold text-guild-100">
             {{ editingEvent ? "Edit Event" : "Create New Event" }}
           </h3>
         </div>
@@ -195,7 +195,7 @@
         <form @submit.prevent="saveEvent" class="p-6 space-y-4">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div class="md:col-span-2">
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >Event Title</label
               >
               <UInput
@@ -207,7 +207,7 @@
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >Event Type</label
               >
               <USelect
@@ -223,7 +223,7 @@
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >Location</label
               >
               <UInput
@@ -234,7 +234,7 @@
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >Start Date & Time</label
               >
               <UInput
@@ -246,7 +246,7 @@
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >End Date & Time</label
               >
               <UInput
@@ -258,7 +258,7 @@
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >Max Attendees</label
               >
               <UInput
@@ -270,7 +270,7 @@
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-1"
+              <label class="block text-sm font-medium text-guild-100 mb-1"
                 >Registration Deadline</label
               >
               <UInput
@@ -283,7 +283,7 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Description</label
             >
             <UTextarea
@@ -296,7 +296,7 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Additional Content</label
             >
             <UTextarea
@@ -312,17 +312,17 @@
               <input
                 v-model="eventForm.isOnline"
                 type="checkbox"
-                class="rounded border-default text-blue-600 focus:ring-blue-500"
+                class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
               />
-              <span class="ml-2 text-sm text-default">Online Event</span>
+              <span class="ml-2 text-sm text-guild-100">Online Event</span>
             </label>
             <label class="flex items-center">
               <input
                 v-model="eventForm.registrationRequired"
                 type="checkbox"
-                class="rounded border-default text-blue-600 focus:ring-blue-500"
+                class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
               />
-              <span class="ml-2 text-sm text-default"
+              <span class="ml-2 text-sm text-guild-100"
                 >Registration Required</span
               >
             </label>
@@ -332,14 +332,14 @@
             <button
               type="button"
               @click="cancelEdit"
-              class="px-4 py-2 text-muted hover:text-highlighted"
+              class="px-4 py-2 text-guild-400 hover:text-guild-100 font-medium"
             >
               Cancel
             </button>
             <button
               type="submit"
               :disabled="creating"
-              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {{
                 creating
@@ -411,12 +411,12 @@ const filteredEvents = computed(() => {
 
 const getEventTypeClasses = (type) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    workshop: "bg-green-100 text-green-800",
-    social: "bg-purple-100 text-purple-800",
-    showcase: "bg-orange-100 text-orange-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    workshop: "bg-candlelight-900/20 text-candlelight-400",
+    social: "bg-earth-900/20 text-earth-400",
+    showcase: "bg-ember-900/20 text-ember-400",
   };
-  return classes[type] || "bg-gray-100 text-gray-800";
+  return classes[type] || "bg-guild-800 text-guild-300";
 };
 
 const getEventStatus = (event) => {
@@ -432,11 +432,11 @@ const getEventStatus = (event) => {
 const getStatusClasses = (event) => {
   const status = getEventStatus(event);
   const classes = {
-    Upcoming: "bg-blue-100 text-blue-800",
-    Ongoing: "bg-green-100 text-green-800",
-    Past: "bg-gray-100 text-gray-800",
+    Upcoming: "bg-candlelight-900/20 text-candlelight-400",
+    Ongoing: "bg-candlelight-900/20 text-candlelight-400",
+    Past: "bg-guild-800 text-guild-300",
   };
-  return classes[status] || "bg-gray-100 text-gray-800";
+  return classes[status] || "bg-guild-800 text-guild-300";
 };
 
 const formatDateTime = (dateString) => {
diff --git a/app/pages/admin/events/create.vue b/app/pages/admin/events/create.vue
index 7fd4c35..4af0d75 100644
--- a/app/pages/admin/events/create.vue
+++ b/app/pages/admin/events/create.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div class="bg-elevated border-b">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
           <div class="flex items-center gap-4 mb-2">
-            <NuxtLink to="/admin/events" class="text-dimmed hover:text-default">
+            <NuxtLink to="/admin/events" class="text-guild-500 hover:text-guild-100">
               <Icon name="heroicons:arrow-left" class="w-5 h-5" />
             </NuxtLink>
-            <h1 class="text-2xl font-bold text-highlighted">
+            <h1 class="text-display font-bold text-guild-100">
               {{ editingEvent ? "Edit Event" : "Create New Event" }}
             </h1>
           </div>
-          <p class="text-muted">
+          <p class="text-guild-400">
             Fill out the form below to create or update an event
           </p>
         </div>
@@ -22,18 +22,18 @@
       <!-- Error Summary -->
       <div
         v-if="formErrors.length > 0"
-        class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg"
+        class="mb-6 p-4 bg-ember-900/20 border border-ember-800 rounded-lg"
       >
         <div class="flex">
           <Icon
             name="heroicons:exclamation-circle"
-            class="w-5 h-5 text-red-500 mr-3 mt-0.5"
+            class="w-5 h-5 text-ember-400 mr-3 mt-0.5"
           />
           <div>
-            <h3 class="text-sm font-medium text-red-800 mb-2">
+            <h3 class="text-sm font-medium text-ember-400 mb-2">
               Please fix the following errors:
             </h3>
-            <ul class="text-sm text-red-700 space-y-1">
+            <ul class="text-sm text-ember-400 space-y-1">
               <li v-for="error in formErrors" :key="error">• {{ error }}</li>
             </ul>
           </div>
@@ -43,15 +43,15 @@
       <!-- Success Message -->
       <div
         v-if="showSuccessMessage"
-        class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg"
+        class="mb-6 p-4 bg-candlelight-900/20 border border-candlelight-800 rounded-lg"
       >
         <div class="flex">
           <Icon
             name="heroicons:check-circle"
-            class="w-5 h-5 text-green-500 mr-3 mt-0.5"
+            class="w-5 h-5 text-candlelight-400 mr-3 mt-0.5"
           />
           <div>
-            <h3 class="text-sm font-medium text-green-800">
+            <h3 class="text-sm font-medium text-candlelight-400">
               {{
                 editingEvent
                   ? "Event updated successfully!"
@@ -65,14 +65,14 @@
       <form @submit.prevent="saveEvent">
         <!-- Basic Information -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">
             Basic Information
           </h2>
 
           <div class="grid grid-cols-1 gap-6">
             <div>
-              <label class="block text-sm font-medium text-default mb-2">
-                Event Title <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Event Title <span class="text-ember-400">*</span>
               </label>
               <UInput
                 v-model="eventForm.title"
@@ -81,25 +81,25 @@
                 :color="fieldErrors.title ? 'error' : undefined"
                 class="w-full"
               />
-              <p v-if="fieldErrors.title" class="mt-1 text-sm text-red-600">
+              <p v-if="fieldErrors.title" class="mt-1 text-sm text-ember-400">
                 {{ fieldErrors.title }}
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2"
+              <label class="block text-sm font-medium text-guild-100 mb-2"
                 >Feature Image</label
               >
               <ImageUpload v-model="eventForm.featureImage" />
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 Upload a high-quality image (1200x630px recommended) to
                 represent your event
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2">
-                Event Description <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Event Description <span class="text-ember-400">*</span>
               </label>
               <UTextarea
                 v-model="eventForm.description"
@@ -111,17 +111,17 @@
               />
               <p
                 v-if="fieldErrors.description"
-                class="mt-1 text-sm text-red-600"
+                class="mt-1 text-sm text-ember-400"
               >
                 {{ fieldErrors.description }}
               </p>
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 This will be displayed on the event listing and detail pages
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2"
+              <label class="block text-sm font-medium text-guild-100 mb-2"
                 >Additional Content</label
               >
               <UTextarea
@@ -130,7 +130,7 @@
                 :rows="6"
                 class="w-full"
               />
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 Optional: Provide additional context, agenda items, or detailed
                 requirements
               </p>
@@ -140,14 +140,14 @@
 
         <!-- Event Details -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">
             Event Details
           </h2>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
-              <label class="block text-sm font-medium text-default mb-2">
-                Event Type <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Event Type <span class="text-ember-400">*</span>
               </label>
               <USelect
                 v-model="eventForm.eventType"
@@ -159,14 +159,14 @@
                 ]"
                 class="w-full"
               />
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 Choose the category that best describes your event
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2">
-                Location <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Location <span class="text-ember-400">*</span>
               </label>
               <UInput
                 v-model="eventForm.location"
@@ -175,50 +175,50 @@
                 :color="fieldErrors.location ? 'error' : undefined"
                 class="w-full"
               />
-              <p v-if="fieldErrors.location" class="mt-1 text-sm text-red-600">
+              <p v-if="fieldErrors.location" class="mt-1 text-sm text-ember-400">
                 {{ fieldErrors.location }}
               </p>
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 Enter a video conference link or Slack channel (starting with #)
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2">
-                Start Date & Time <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Start Date & Time <span class="text-ember-400">*</span>
               </label>
               <NaturalDateInput
                 v-model="eventForm.startDate"
                 placeholder="e.g., 'tomorrow at 3pm', 'next Friday at 9am'"
                 :required="true"
                 :input-class="{
-                  'border-red-300 focus:ring-red-500': fieldErrors.startDate,
+                  'border-ember-700 focus:ring-ember-500': fieldErrors.startDate,
                 }"
               />
-              <p v-if="fieldErrors.startDate" class="mt-1 text-sm text-red-600">
+              <p v-if="fieldErrors.startDate" class="mt-1 text-sm text-ember-400">
                 {{ fieldErrors.startDate }}
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2">
-                End Date & Time <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                End Date & Time <span class="text-ember-400">*</span>
               </label>
               <NaturalDateInput
                 v-model="eventForm.endDate"
                 placeholder="e.g., 'tomorrow at 5pm', 'next Friday at 11am'"
                 :required="true"
                 :input-class="{
-                  'border-red-300 focus:ring-red-500': fieldErrors.endDate,
+                  'border-ember-700 focus:ring-ember-500': fieldErrors.endDate,
                 }"
               />
-              <p v-if="fieldErrors.endDate" class="mt-1 text-sm text-red-600">
+              <p v-if="fieldErrors.endDate" class="mt-1 text-sm text-ember-400">
                 {{ fieldErrors.endDate }}
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2"
+              <label class="block text-sm font-medium text-guild-100 mb-2"
                 >Max Attendees</label
               >
               <UInput
@@ -228,20 +228,20 @@
                 placeholder="Leave blank for unlimited"
                 class="w-full"
               />
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 Set a maximum number of attendees (optional)
               </p>
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-default mb-2"
+              <label class="block text-sm font-medium text-guild-100 mb-2"
                 >Registration Deadline</label
               >
               <NaturalDateInput
                 v-model="eventForm.registrationDeadline"
                 placeholder="e.g., 'tomorrow at noon', '1 hour before event'"
               />
-              <p class="mt-1 text-sm text-dimmed">
+              <p class="mt-1 text-sm text-guild-500">
                 When should registration close? (optional)
               </p>
             </div>
@@ -250,12 +250,12 @@
 
         <!-- Target Audience -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">
             Target Audience
           </h2>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-3"
+            <label class="block text-sm font-medium text-guild-100 mb-3"
               >Target Circles</label
             >
             <div class="space-y-3">
@@ -264,13 +264,13 @@
                   v-model="eventForm.targetCircles"
                   value="community"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Community Circle</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     New members and those exploring the community
                   </p>
                 </div>
@@ -280,13 +280,13 @@
                   v-model="eventForm.targetCircles"
                   value="founder"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Founder Circle</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Entrepreneurs and business leaders
                   </p>
                 </div>
@@ -296,19 +296,19 @@
                   v-model="eventForm.targetCircles"
                   value="practitioner"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Practitioner Circle</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Experts and professionals sharing knowledge
                   </p>
                 </div>
               </label>
             </div>
-            <p class="mt-2 text-sm text-dimmed">
+            <p class="mt-2 text-sm text-guild-500">
               Select which circles this event is most relevant for (leave blank
               for all circles)
             </p>
@@ -317,20 +317,20 @@
 
         <!-- Ticketing -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">Ticketing</h2>
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">Ticketing</h2>
 
           <div class="space-y-6">
             <label class="flex items-start">
               <input
                 v-model="eventForm.tickets.enabled"
                 type="checkbox"
-                class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
               />
               <div class="ml-3">
-                <span class="text-sm font-medium text-default"
+                <span class="text-sm font-medium text-guild-100"
                   >Enable Ticketing</span
                 >
-                <p class="text-xs text-dimmed">
+                <p class="text-xs text-guild-500">
                   Allow ticket sales for this event
                 </p>
               </div>
@@ -338,19 +338,19 @@
 
             <div
               v-if="eventForm.tickets.enabled"
-              class="ml-6 space-y-4 p-4 bg-muted rounded-lg"
+              class="ml-6 space-y-4 p-4 bg-guild-950 rounded-lg"
             >
               <label class="flex items-start">
                 <input
                   v-model="eventForm.tickets.public.available"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Public Tickets Available</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Allow non-members to purchase tickets
                   </p>
                 </div>
@@ -359,7 +359,7 @@
               <div v-if="eventForm.tickets.public.available" class="space-y-4">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Ticket Name</label
                     >
                     <UInput
@@ -370,7 +370,7 @@
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Price (CAD)</label
                     >
                     <UInput
@@ -381,14 +381,14 @@
                       placeholder="0.00"
                       class="w-full"
                     />
-                    <p class="mt-1 text-xs text-dimmed">
+                    <p class="mt-1 text-xs text-guild-500">
                       Set to 0 for free public events
                     </p>
                   </div>
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Ticket Description</label
                   >
                   <UTextarea
@@ -401,7 +401,7 @@
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Quantity Available</label
                     >
                     <UInput
@@ -414,7 +414,7 @@
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Early Bird Price (Optional)</label
                     >
                     <UInput
@@ -429,7 +429,7 @@
                 </div>
 
                 <div v-if="eventForm.tickets.public.earlyBirdPrice > 0">
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Early Bird Deadline</label
                   >
                   <div class="md:w-1/2">
@@ -438,15 +438,15 @@
                       placeholder="e.g., '1 week before event', 'next Monday'"
                     />
                   </div>
-                  <p class="mt-1 text-xs text-dimmed">
+                  <p class="mt-1 text-xs text-guild-500">
                     Price increases to regular price after this date
                   </p>
                 </div>
               </div>
             </div>
 
-            <div class="p-3 bg-blue-50 rounded-lg">
-              <p class="text-sm text-blue-700">
+            <div class="p-3 bg-candlelight-900/20 rounded-lg">
+              <p class="text-sm text-candlelight-400">
                 <strong>Note:</strong> Members always get free access to all
                 events regardless of ticket settings.
               </p>
@@ -456,7 +456,7 @@
 
         <!-- Series Management -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">
             Series Management
           </h2>
 
@@ -465,13 +465,13 @@
               <input
                 v-model="eventForm.series.isSeriesEvent"
                 type="checkbox"
-                class="rounded border-default text-purple-600 focus:ring-purple-500 mt-1"
+                class="rounded border-guild-700 text-earth-500 focus:ring-earth-500 mt-1"
               />
               <div class="ml-3">
-                <span class="text-sm font-medium text-default"
+                <span class="text-sm font-medium text-guild-100"
                   >Part of Event Series</span
                 >
-                <p class="text-xs text-dimmed">
+                <p class="text-xs text-guild-500">
                   This event is part of a multi-event series
                 </p>
               </div>
@@ -479,11 +479,11 @@
 
             <div
               v-if="eventForm.series.isSeriesEvent"
-              class="ml-6 space-y-4 p-4 bg-purple-500/10 rounded-lg border border-purple-500/20"
+              class="ml-6 space-y-4 p-4 bg-earth-900/20 rounded-lg border border-earth-800"
             >
               <div>
-                <label class="block text-sm font-medium text-default mb-2">
-                  Select Series <span class="text-red-500">*</span>
+                <label class="block text-sm font-medium text-guild-100 mb-2">
+                  Select Series <span class="text-ember-400">*</span>
                 </label>
                 <div class="flex gap-2">
                   <USelect
@@ -501,12 +501,12 @@
                   />
                   <NuxtLink
                     to="/admin/series/create"
-                    class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium whitespace-nowrap"
+                    class="px-4 py-2 bg-earth-600 text-white rounded-lg hover:bg-earth-700 text-sm font-medium whitespace-nowrap"
                   >
                     New Series
                   </NuxtLink>
                 </div>
-                <p class="text-xs text-dimmed mt-1">
+                <p class="text-xs text-guild-500 mt-1">
                   Select an existing series or create a new one
                 </p>
               </div>
@@ -516,18 +516,18 @@
                 class="space-y-4"
               >
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2">
-                    Series Title <span class="text-red-500">*</span>
+                  <label class="block text-sm font-medium text-guild-100 mb-2">
+                    Series Title <span class="text-ember-400">*</span>
                   </label>
                   <UInput
                     v-model="eventForm.series.title"
                     placeholder="e.g., Cooperative Game Development Fundamentals"
                     required
                     :readonly="selectedSeriesId"
-                    :class="{ 'bg-accented': selectedSeriesId }"
+                    :class="{ 'bg-guild-800': selectedSeriesId }"
                     class="w-full"
                   />
-                  <p class="text-xs text-dimmed mt-1">
+                  <p class="text-xs text-guild-500 mt-1">
                     {{
                       selectedSeriesId
                         ? "From selected series"
@@ -537,8 +537,8 @@
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2">
-                    Series Description <span class="text-red-500">*</span>
+                  <label class="block text-sm font-medium text-guild-100 mb-2">
+                    Series Description <span class="text-ember-400">*</span>
                   </label>
                   <UTextarea
                     v-model="eventForm.series.description"
@@ -546,10 +546,10 @@
                     required
                     :rows="3"
                     :readonly="selectedSeriesId"
-                    :class="{ 'bg-accented': selectedSeriesId }"
+                    :class="{ 'bg-guild-800': selectedSeriesId }"
                     class="w-full"
                   />
-                  <p class="text-xs text-dimmed mt-1">
+                  <p class="text-xs text-guild-500 mt-1">
                     {{
                       selectedSeriesId
                         ? "From selected series"
@@ -560,9 +560,9 @@
 
                 <div
                   v-if="selectedSeriesId"
-                  class="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20"
+                  class="p-3 bg-candlelight-900/20 rounded-lg border border-candlelight-800"
                 >
-                  <p class="text-sm text-blue-600 dark:text-blue-400">
+                  <p class="text-sm text-candlelight-400">
                     <strong>Note:</strong> This event will be added to the
                     existing "{{ eventForm.series.title }}" series.
                   </p>
@@ -574,7 +574,7 @@
 
         <!-- Event Agenda -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">
             Event Agenda
           </h2>
 
@@ -592,7 +592,7 @@
               <button
                 type="button"
                 @click="removeAgendaItem(index)"
-                class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                class="px-3 py-2 text-ember-400 hover:bg-ember-900/20 rounded-lg transition-colors"
               >
                 <Icon name="heroicons:trash" class="w-5 h-5" />
               </button>
@@ -601,14 +601,14 @@
             <button
               type="button"
               @click="addAgendaItem"
-              class="flex items-center gap-2 px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors font-medium"
+              class="flex items-center gap-2 px-4 py-2 text-candlelight-400 hover:bg-candlelight-900/20 rounded-lg transition-colors font-medium"
             >
               <Icon name="heroicons:plus" class="w-5 h-5" />
               Add Agenda Item
             </button>
           </div>
 
-          <p class="mt-2 text-sm text-dimmed">
+          <p class="mt-2 text-sm text-guild-500">
             Add agenda items to help attendees know what to expect during the
             event
           </p>
@@ -616,7 +616,7 @@
 
         <!-- Event Settings -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-highlighted mb-4">
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">
             Event Settings
           </h2>
 
@@ -626,13 +626,13 @@
                 <input
                   v-model="eventForm.isOnline"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Online Event</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Event will be conducted virtually
                   </p>
                 </div>
@@ -642,13 +642,13 @@
                 <input
                   v-model="eventForm.registrationRequired"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Registration Required</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Attendees must register before attending
                   </p>
                 </div>
@@ -660,13 +660,13 @@
                 <input
                   v-model="eventForm.isVisible"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Visible on Public Calendar</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Event will appear on the public events page
                   </p>
                 </div>
@@ -676,13 +676,13 @@
                 <input
                   v-model="eventForm.isCancelled"
                   type="checkbox"
-                  class="rounded border-default text-red-600 focus:ring-red-500 mt-1"
+                  class="rounded border-guild-700 text-ember-500 focus:ring-ember-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Event Cancelled</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Mark this event as cancelled
                   </p>
                 </div>
@@ -693,7 +693,7 @@
 
         <!-- Cancellation Message (conditional) -->
         <div v-if="eventForm.isCancelled" class="mb-8">
-          <label class="block text-sm font-medium text-default mb-2"
+          <label class="block text-sm font-medium text-guild-100 mb-2"
             >Cancellation Message</label
           >
           <UTextarea
@@ -703,18 +703,18 @@
             color="error"
             class="w-full"
           />
-          <p class="text-xs text-dimmed mt-1">
+          <p class="text-xs text-guild-500 mt-1">
             This message will be displayed to users viewing the event page
           </p>
         </div>
 
         <!-- Form Actions -->
         <div
-          class="flex justify-between items-center pt-6 border-t border-default"
+          class="flex justify-between items-center pt-6 border-t border-guild-700"
         >
           <NuxtLink
             to="/admin/events"
-            class="px-4 py-2 text-muted hover:text-highlighted font-medium"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100 font-medium"
           >
             Cancel
           </NuxtLink>
@@ -725,7 +725,7 @@
               type="button"
               @click="saveAndCreateAnother"
               :disabled="creating"
-              class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              class="px-4 py-2 bg-guild-600 text-white rounded-lg hover:bg-guild-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
             >
               {{ creating ? "Saving..." : "Save & Create Another" }}
             </button>
@@ -733,7 +733,7 @@
             <button
               type="submit"
               :disabled="creating"
-              class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              class="px-6 py-2 bg-candlelight-600 text-white rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
             >
               {{
                 creating
diff --git a/app/pages/admin/events/index.vue b/app/pages/admin/events/index.vue
index c167531..2c23bde 100644
--- a/app/pages/admin/events/index.vue
+++ b/app/pages/admin/events/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-elevated border-b">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-highlighted">Event Management</h1>
-          <p class="text-muted">
+          <h1 class="text-display font-bold text-guild-100">Event Management</h1>
+          <p class="text-guild-400">
             Create, manage, and monitor Ghost Guild events and workshops
           </p>
         </div>
@@ -53,7 +53,7 @@
         </div>
         <NuxtLink
           to="/admin/events/create"
-          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 inline-flex items-center"
+          class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2 inline-flex items-center"
         >
           <Icon name="heroicons:plus" class="w-4 h-4 mr-2" />
           Create Event
@@ -61,65 +61,65 @@
       </div>
 
       <!-- Events Table -->
-      <div class="bg-elevated rounded-lg shadow overflow-hidden">
-        <div v-if="pending" class="p-8 text-center">
+      <div class="bg-guild-900 rounded-lg shadow overflow-hidden">
+        <div v-if="pending" class="p-8 text-center text-guild-100">
           <div class="inline-flex items-center">
             <div
-              class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
+              class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
             ></div>
             Loading events...
           </div>
         </div>
 
-        <div v-else-if="error" class="p-8 text-center text-red-600">
+        <div v-else-if="error" class="p-8 text-center text-ember-400">
           Error loading events: {{ error }}
         </div>
 
         <table v-else class="w-full">
-          <thead class="bg-muted">
+          <thead class="bg-guild-950">
             <tr>
               <th
-                class="px-6 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Title
               </th>
               <th
-                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Type
               </th>
               <th
-                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Date
               </th>
               <th
-                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Status
               </th>
               <th
-                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Registration
               </th>
               <th
-                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Tickets
               </th>
               <th
-                class="px-6 py-4 text-right text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-4 text-right text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody class="bg-elevated divide-y divide-default">
+          <tbody class="bg-guild-900 divide-y divide-guild-700">
             <tr
               v-for="event in filteredEvents"
               :key="event._id"
-              class="hover:bg-muted"
+              class="hover:bg-guild-800"
             >
               <!-- Title Column -->
               <td class="px-6 py-6">
@@ -128,7 +128,7 @@
                     v-if="
                       event.featureImage?.url && !event.featureImage?.publicId
                     "
-                    class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg overflow-hidden"
+                    class="flex-shrink-0 w-12 h-12 bg-guild-800 rounded-lg overflow-hidden"
                   >
                     <img
                       :src="event.featureImage.url"
@@ -139,26 +139,26 @@
                   </div>
                   <div
                     v-else
-                    class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg flex items-center justify-center"
+                    class="flex-shrink-0 w-12 h-12 bg-guild-800 rounded-lg flex items-center justify-center"
                   >
                     <Icon
                       name="heroicons:calendar-days"
-                      class="w-6 h-6 text-muted"
+                      class="w-6 h-6 text-guild-400"
                     />
                   </div>
                   <div class="flex-1 min-w-0">
-                    <div class="text-sm font-semibold text-highlighted mb-1">
+                    <div class="text-sm font-semibold text-guild-100 mb-1">
                       {{ event.title }}
                     </div>
-                    <div class="text-sm text-dimmed line-clamp-2">
+                    <div class="text-sm text-guild-500 line-clamp-2">
                       {{ event.description.substring(0, 100) }}...
                     </div>
                     <div v-if="event.series?.isSeriesEvent" class="mt-2 mb-2">
                       <div
-                        class="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full"
+                        class="inline-flex items-center gap-1 px-2 py-1 bg-earth-900/20 text-earth-400 text-xs font-medium rounded-full"
                       >
                         <div
-                          class="w-4 h-4 bg-purple-200 text-purple-700 rounded-full flex items-center justify-center text-xs font-bold"
+                          class="w-4 h-4 bg-earth-800 text-earth-400 rounded-full flex items-center justify-center text-xs font-bold"
                         >
                           {{ event.series.position }}
                         </div>
@@ -168,7 +168,7 @@
                     <div class="flex items-center space-x-4 mt-2">
                       <div
                         v-if="event.membersOnly"
-                        class="flex items-center text-xs text-purple-600"
+                        class="flex items-center text-xs text-earth-400"
                       >
                         <Icon
                           name="heroicons:lock-closed"
@@ -184,15 +184,15 @@
                       >
                         <Icon
                           name="heroicons:user-group"
-                          class="w-3 h-3 text-muted"
+                          class="w-3 h-3 text-guild-400"
                         />
-                        <span class="text-xs text-dimmed">{{
+                        <span class="text-xs text-guild-500">{{
                           event.targetCircles.join(", ")
                         }}</span>
                       </div>
                       <div
                         v-if="!event.isVisible"
-                        class="flex items-center text-xs text-dimmed"
+                        class="flex items-center text-xs text-guild-500"
                       >
                         <Icon name="heroicons:eye-slash" class="w-3 h-3 mr-1" />
                         Hidden
@@ -213,12 +213,12 @@
               </td>
 
               <!-- Date Column -->
-              <td class="px-4 py-6 whitespace-nowrap text-sm text-muted">
+              <td class="px-4 py-6 whitespace-nowrap text-sm text-guild-400">
                 <div class="space-y-1">
                   <div class="font-medium">
                     {{ formatDate(event.startDate) }}
                   </div>
-                  <div class="text-xs text-dimmed">
+                  <div class="text-xs text-guild-500">
                     {{ formatTime(event.startDate) }}
                   </div>
                 </div>
@@ -235,7 +235,7 @@
                   </span>
                   <div
                     v-if="event.isCancelled"
-                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800"
+                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-ember-900/20 text-ember-400"
                   >
                     Cancelled
                   </div>
@@ -247,17 +247,17 @@
                 <div class="space-y-2">
                   <div
                     v-if="event.registrationRequired"
-                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800"
+                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
                   >
                     Required
                   </div>
                   <div
                     v-else
-                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-accented text-default"
+                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-guild-800 text-guild-300"
                   >
                     Optional
                   </div>
-                  <div v-if="event.maxAttendees" class="text-xs text-dimmed">
+                  <div v-if="event.maxAttendees" class="text-xs text-guild-500">
                     {{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
                   </div>
                 </div>
@@ -270,20 +270,20 @@
                     <div class="flex items-center gap-1 text-xs">
                       <Icon
                         name="heroicons:ticket"
-                        class="w-3.5 h-3.5 text-blue-600"
+                        class="w-3.5 h-3.5 text-candlelight-400"
                       />
-                      <span class="font-medium text-default">Ticketing On</span>
+                      <span class="font-medium text-guild-100">Ticketing On</span>
                     </div>
                     <div
                       v-if="event.tickets?.requiresSeriesTicket"
-                      class="text-xs text-purple-600"
+                      class="text-xs text-earth-400"
                     >
                       Series Pass Required
                     </div>
                     <div v-else class="space-y-0.5">
                       <div
                         v-if="event.tickets.member?.available"
-                        class="text-xs text-dimmed"
+                        class="text-xs text-guild-500"
                       >
                         Member:
                         {{
@@ -294,7 +294,7 @@
                       </div>
                       <div
                         v-if="event.tickets.public?.available"
-                        class="text-xs text-dimmed"
+                        class="text-xs text-guild-500"
                       >
                         Public: ${{ event.tickets.public.price || 0 }}
                         <span v-if="event.tickets.public.quantity" class="ml-1">
@@ -305,7 +305,7 @@
                       </div>
                     </div>
                   </div>
-                  <div v-else class="text-xs text-dimmed">No tickets</div>
+                  <div v-else class="text-xs text-guild-500">No tickets</div>
                 </div>
               </td>
 
@@ -314,28 +314,28 @@
                 <div class="flex items-center justify-end space-x-2">
                   <NuxtLink
                     :to="`/events/${event.slug || String(event._id)}`"
-                    class="p-2 text-dimmed hover:text-default hover:bg-accented rounded-full transition-colors"
+                    class="p-2 text-guild-500 hover:text-guild-100 hover:bg-guild-800 rounded-full transition-colors"
                     title="View Event"
                   >
                     <Icon name="heroicons:eye" class="w-4 h-4" />
                   </NuxtLink>
                   <button
                     @click="editEvent(event)"
-                    class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
+                    class="p-2 text-candlelight-400 hover:text-candlelight-300 hover:bg-candlelight-900/20 rounded-full transition-colors"
                     title="Edit Event"
                   >
                     <Icon name="heroicons:pencil-square" class="w-4 h-4" />
                   </button>
                   <button
                     @click="duplicateEvent(event)"
-                    class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
+                    class="p-2 text-candlelight-400 hover:text-candlelight-300 hover:bg-candlelight-900/20 rounded-full transition-colors"
                     title="Duplicate Event"
                   >
                     <Icon name="heroicons:document-duplicate" class="w-4 h-4" />
                   </button>
                   <button
                     @click="deleteEvent(event)"
-                    class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-full transition-colors"
+                    class="p-2 text-ember-400 hover:text-ember-300 hover:bg-ember-900/20 rounded-full transition-colors"
                     title="Delete Event"
                   >
                     <Icon name="heroicons:trash" class="w-4 h-4" />
@@ -348,7 +348,7 @@
 
         <div
           v-if="!pending && !error && filteredEvents.length === 0"
-          class="p-8 text-center text-dimmed"
+          class="p-8 text-center text-guild-500"
         >
           No events found matching your criteria
         </div>
@@ -402,12 +402,12 @@ const filteredEvents = computed(() => {
 
 const getEventTypeClasses = (type) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    workshop: "bg-green-100 text-green-800",
-    social: "bg-purple-100 text-purple-800",
-    showcase: "bg-orange-100 text-orange-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    workshop: "bg-candlelight-900/20 text-candlelight-400",
+    social: "bg-earth-900/20 text-earth-400",
+    showcase: "bg-ember-900/20 text-ember-400",
   };
-  return classes[type] || "bg-gray-100 text-gray-800";
+  return classes[type] || "bg-guild-800 text-guild-300";
 };
 
 const getEventStatus = (event) => {
@@ -423,11 +423,11 @@ const getEventStatus = (event) => {
 const getStatusClasses = (event) => {
   const status = getEventStatus(event);
   const classes = {
-    Upcoming: "bg-blue-100 text-blue-800",
-    Ongoing: "bg-green-100 text-green-800",
-    Past: "bg-gray-100 text-gray-800",
+    Upcoming: "bg-candlelight-900/20 text-candlelight-400",
+    Ongoing: "bg-candlelight-900/20 text-candlelight-400",
+    Past: "bg-guild-800 text-guild-300",
   };
-  return classes[status] || "bg-gray-100 text-gray-800";
+  return classes[status] || "bg-guild-800 text-guild-300";
 };
 
 const formatDateTime = (dateString) => {
diff --git a/app/pages/admin/index-working.vue b/app/pages/admin/index-working.vue
index 2115db5..cf47a69 100644
--- a/app/pages/admin/index-working.vue
+++ b/app/pages/admin/index-working.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-white border-b">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-gray-900">Admin Interface - Working Version</h1>
-          <p class="text-gray-600">Fully functional admin interface without Nuxt UI component issues</p>
+          <h1 class="text-display font-bold text-guild-100">Admin Interface - Working Version</h1>
+          <p class="text-guild-400">Fully functional admin interface without Nuxt UI component issues</p>
         </div>
       </div>
     </div>
@@ -12,56 +12,56 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Navigation Cards -->
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <NuxtLink to="/admin/dashboard" class="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-blue-200">
-          <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <NuxtLink to="/admin/dashboard" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-candlelight-800">
+          <div class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-candlelight-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold mb-2">Dashboard</h3>
-          <p class="text-gray-600 text-sm">Overview & statistics</p>
+          <h3 class="text-lg font-semibold text-guild-100 mb-2">Dashboard</h3>
+          <p class="text-guild-400 text-sm">Overview & statistics</p>
         </NuxtLink>
 
-        <NuxtLink to="/admin/members-working" class="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-green-200">
-          <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <NuxtLink to="/admin/members-working" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-candlelight-800">
+          <div class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-candlelight-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-.5a4 4 0 110 5.292M4 19.5a4 4 0 010-5.292"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold mb-2">Members</h3>
-          <p class="text-gray-600 text-sm">Manage members</p>
+          <h3 class="text-lg font-semibold text-guild-100 mb-2">Members</h3>
+          <p class="text-guild-400 text-sm">Manage members</p>
         </NuxtLink>
 
-        <NuxtLink to="/admin/events-working" class="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-purple-200">
-          <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <NuxtLink to="/admin/events-working" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-earth-800">
+          <div class="w-16 h-16 bg-earth-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-earth-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold mb-2">Events</h3>
-          <p class="text-gray-600 text-sm">Manage events</p>
+          <h3 class="text-lg font-semibold text-guild-100 mb-2">Events</h3>
+          <p class="text-guild-400 text-sm">Manage events</p>
         </NuxtLink>
 
-        <div class="bg-gray-100 rounded-lg p-6 text-center border-2 border-dashed border-gray-300">
-          <div class="w-16 h-16 bg-gray-200 rounded-2xl flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="bg-guild-950 rounded-lg p-6 text-center border-2 border-dashed border-guild-700">
+          <div class="w-16 h-16 bg-guild-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-guild-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold mb-2 text-gray-600">More</h3>
-          <p class="text-gray-500 text-sm">Coming soon</p>
+          <h3 class="text-lg font-semibold mb-2 text-guild-400">More</h3>
+          <p class="text-guild-500 text-sm">Coming soon</p>
         </div>
       </div>
 
       <!-- Status Information -->
-      <div class="bg-green-50 border border-green-200 rounded-lg p-6">
+      <div class="bg-candlelight-900/20 border border-candlelight-800 rounded-lg p-6">
         <div class="flex items-start">
-          <svg class="w-6 h-6 text-green-600 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-6 h-6 text-candlelight-400 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
           <div>
-            <h3 class="text-lg font-semibold text-green-800 mb-2">Admin Interface Status: Fully Working</h3>
-            <div class="space-y-2 text-green-700">
+            <h3 class="text-lg font-semibold text-candlelight-400 mb-2">Admin Interface Status: Fully Working</h3>
+            <div class="space-y-2 text-candlelight-400">
               <p>✅ <strong>Dashboard:</strong> Shows statistics, recent members, and upcoming events</p>
               <p>✅ <strong>Member Management:</strong> Full CRUD operations, search, filter, create members</p>
               <p>✅ <strong>Event Management:</strong> Create, edit, delete, duplicate events with full forms</p>
@@ -75,21 +75,21 @@
 
       <!-- Quick Stats Preview -->
       <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div class="bg-white rounded-lg shadow p-4 text-center">
-          <p class="text-2xl font-bold text-blue-600">{{ memberCount }}</p>
-          <p class="text-sm text-gray-600">Members</p>
+        <div class="bg-guild-900 rounded-lg shadow p-4 text-center">
+          <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">{{ memberCount }}</p>
+          <p class="text-sm text-guild-400">Members</p>
         </div>
-        <div class="bg-white rounded-lg shadow p-4 text-center">
-          <p class="text-2xl font-bold text-green-600">{{ eventCount }}</p>
-          <p class="text-sm text-gray-600">Events</p>
+        <div class="bg-guild-900 rounded-lg shadow p-4 text-center">
+          <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">{{ eventCount }}</p>
+          <p class="text-sm text-guild-400">Events</p>
         </div>
-        <div class="bg-white rounded-lg shadow p-4 text-center">
-          <p class="text-2xl font-bold text-purple-600">${{ monthlyRevenue }}</p>
-          <p class="text-sm text-gray-600">Monthly Revenue</p>
+        <div class="bg-guild-900 rounded-lg shadow p-4 text-center">
+          <p class="text-2xl font-bold text-earth-400 text-ui-mono">${{ monthlyRevenue }}</p>
+          <p class="text-sm text-guild-400">Monthly Revenue</p>
         </div>
-        <div class="bg-white rounded-lg shadow p-4 text-center">
-          <p class="text-2xl font-bold text-orange-600">{{ pendingInvites }}</p>
-          <p class="text-sm text-gray-600">Pending Invites</p>
+        <div class="bg-guild-900 rounded-lg shadow p-4 text-center">
+          <p class="text-2xl font-bold text-ember-400 text-ui-mono">{{ pendingInvites }}</p>
+          <p class="text-sm text-guild-400">Pending Invites</p>
         </div>
       </div>
     </div>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index a56dd03..df066fa 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-elevated border-b border-default">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-highlighted">Admin Dashboard</h1>
-          <p class="text-muted">
+          <h1 class="text-display font-bold text-guild-100">Admin Dashboard</h1>
+          <p class="text-guild-400">
             Manage Ghost Guild members, events, and community operations
           </p>
         </div>
@@ -14,19 +14,19 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Quick Stats -->
       <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Total Members</p>
-              <p class="text-2xl font-bold text-blue-600">
+              <p class="text-sm text-guild-400">Total Members</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 {{ stats.totalMembers || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-blue-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -42,19 +42,19 @@
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Active Events</p>
-              <p class="text-2xl font-bold text-green-600">
+              <p class="text-sm text-guild-400">Active Events</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 {{ stats.activeEvents || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-green-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -70,19 +70,19 @@
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Monthly Revenue</p>
-              <p class="text-2xl font-bold text-purple-600">
+              <p class="text-sm text-guild-400">Monthly Revenue</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 ${{ stats.monthlyRevenue || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-purple-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -98,19 +98,19 @@
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-sm text-muted">Pending Slack Invites</p>
-              <p class="text-2xl font-bold text-orange-600">
+              <p class="text-sm text-guild-400">Pending Slack Invites</p>
+              <p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
                 {{ stats.pendingSlackInvites || 0 }}
               </p>
             </div>
             <div
-              class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center"
+              class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
             >
               <svg
-                class="w-6 h-6 text-orange-600"
+                class="w-6 h-6 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -129,13 +129,13 @@
 
       <!-- Quick Actions -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="text-center">
             <div
-              class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
+              class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
             >
               <svg
-                class="w-8 h-8 text-blue-600"
+                class="w-8 h-8 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -148,28 +148,28 @@
                 ></path>
               </svg>
             </div>
-            <h3 class="text-lg font-semibold mb-2 text-highlighted">
+            <h3 class="text-display-sm font-semibold mb-2 text-guild-100">
               Add New Member
             </h3>
-            <p class="text-muted text-sm mb-4">
+            <p class="text-guild-400 text-sm mb-4">
               Add a new member to the Ghost Guild community
             </p>
             <button
               @click="navigateTo('/admin/members')"
-              class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
             >
               Manage Members
             </button>
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow p-6">
+        <div class="bg-guild-900 rounded-lg shadow p-6">
           <div class="text-center">
             <div
-              class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
+              class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
             >
               <svg
-                class="w-8 h-8 text-green-600"
+                class="w-8 h-8 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -182,15 +182,15 @@
                 ></path>
               </svg>
             </div>
-            <h3 class="text-lg font-semibold mb-2 text-highlighted">
+            <h3 class="text-display-sm font-semibold mb-2 text-guild-100">
               Create Event
             </h3>
-            <p class="text-muted text-sm mb-4">
+            <p class="text-guild-400 text-sm mb-4">
               Schedule a new community event or workshop
             </p>
             <button
               @click="navigateTo('/admin/events')"
-              class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+              class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
             >
               Manage Events
             </button>
@@ -200,15 +200,15 @@
 
       <!-- Recent Activity -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div class="bg-elevated rounded-lg shadow">
-          <div class="px-6 py-4 border-b border-default">
+        <div class="bg-guild-900 rounded-lg shadow">
+          <div class="px-6 py-4 border-b border-guild-700">
             <div class="flex justify-between items-center">
-              <h3 class="text-lg font-semibold text-highlighted">
+              <h3 class="text-display-sm font-semibold text-guild-100">
                 Recent Members
               </h3>
               <button
                 @click="navigateTo('/admin/members')"
-                class="text-sm text-primary hover:text-primary"
+                class="text-sm text-candlelight-400 hover:text-candlelight-300"
               >
                 View All
               </button>
@@ -218,20 +218,20 @@
           <div class="p-6">
             <div v-if="pending" class="text-center py-4">
               <div
-                class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
+                class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
               ></div>
             </div>
             <div v-else-if="recentMembers.length" class="space-y-3">
               <div
                 v-for="member in recentMembers"
                 :key="member._id"
-                class="flex items-center justify-between p-3 rounded-lg border border-default"
+                class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
               >
                 <div>
-                  <p class="font-medium text-highlighted">
+                  <p class="font-medium text-guild-100">
                     {{ member.name }}
                   </p>
-                  <p class="text-sm text-muted">
+                  <p class="text-sm text-guild-400">
                     {{ member.email }}
                   </p>
                 </div>
@@ -242,27 +242,27 @@
                   >
                     {{ member.circle }}
                   </span>
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500 text-ui-mono">
                     {{ formatDate(member.createdAt) }}
                   </p>
                 </div>
               </div>
             </div>
-            <div v-else class="text-center py-6 text-dimmed">
+            <div v-else class="text-center py-6 text-guild-500">
               No recent members
             </div>
           </div>
         </div>
 
-        <div class="bg-elevated rounded-lg shadow">
-          <div class="px-6 py-4 border-b border-default">
+        <div class="bg-guild-900 rounded-lg shadow">
+          <div class="px-6 py-4 border-b border-guild-700">
             <div class="flex justify-between items-center">
-              <h3 class="text-lg font-semibold text-highlighted">
+              <h3 class="text-display-sm font-semibold text-guild-100">
                 Upcoming Events
               </h3>
               <button
                 @click="navigateTo('/admin/events')"
-                class="text-sm text-primary hover:text-primary"
+                class="text-sm text-candlelight-400 hover:text-candlelight-300"
               >
                 View All
               </button>
@@ -272,20 +272,20 @@
           <div class="p-6">
             <div v-if="pending" class="text-center py-4">
               <div
-                class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
+                class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
               ></div>
             </div>
             <div v-else-if="upcomingEvents.length" class="space-y-3">
               <div
                 v-for="event in upcomingEvents"
                 :key="event._id"
-                class="flex items-center justify-between p-3 rounded-lg border border-default"
+                class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
               >
                 <div>
-                  <p class="font-medium text-highlighted">
+                  <p class="font-medium text-guild-100">
                     {{ event.title }}
                   </p>
-                  <p class="text-sm text-muted">
+                  <p class="text-sm text-guild-400">
                     {{ formatDateTime(event.startDate) }}
                   </p>
                 </div>
@@ -296,13 +296,13 @@
                   >
                     {{ event.eventType }}
                   </span>
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     {{ event.location || "Online" }}
                   </p>
                 </div>
               </div>
             </div>
-            <div v-else class="text-center py-6 text-dimmed">
+            <div v-else class="text-center py-6 text-guild-500">
               No upcoming events
             </div>
           </div>
@@ -327,21 +327,21 @@ const upcomingEvents = computed(
 
 const getCircleBadgeClasses = (circle) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    founder: "bg-purple-100 text-purple-800",
-    practitioner: "bg-green-100 text-green-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    founder: "bg-earth-900/20 text-earth-400",
+    practitioner: "bg-candlelight-900/20 text-candlelight-400",
   };
-  return classes[circle] || "bg-accented text-default";
+  return classes[circle] || "bg-guild-800 text-guild-300";
 };
 
 const getEventTypeBadgeClasses = (type) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    workshop: "bg-green-100 text-green-800",
-    social: "bg-purple-100 text-purple-800",
-    showcase: "bg-orange-100 text-orange-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    workshop: "bg-candlelight-900/20 text-candlelight-400",
+    social: "bg-earth-900/20 text-earth-400",
+    showcase: "bg-ember-900/20 text-ember-400",
   };
-  return classes[type] || "bg-accented text-default";
+  return classes[type] || "bg-guild-800 text-guild-300";
 };
 
 const formatDate = (dateString) => {
diff --git a/app/pages/admin/members-simple.vue b/app/pages/admin/members-simple.vue
index 9309844..bbd0f38 100644
--- a/app/pages/admin/members-simple.vue
+++ b/app/pages/admin/members-simple.vue
@@ -1,45 +1,45 @@
 <template>
   <div>
-    <h1 class="text-2xl font-bold mb-6">Members</h1>
-    
-    <div v-if="pending" class="text-center">Loading...</div>
-    
-    <div v-else-if="error" class="text-red-600">
+    <h1 class="text-display font-bold mb-6 text-guild-100">Members</h1>
+
+    <div v-if="pending" class="text-center text-guild-400">Loading...</div>
+
+    <div v-else-if="error" class="text-ember-400">
       Error loading members: {{ error }}
     </div>
-    
+
     <div v-else class="space-y-4">
-      <div class="bg-white rounded-lg border p-4">
-        <h3 class="font-semibold mb-2">Total Members: {{ members?.length || 0 }}</h3>
-        
-        <div v-for="member in members" :key="member._id" class="border-b pb-2 mb-2 last:border-b-0">
+      <div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
+        <h3 class="font-semibold mb-2 text-guild-100">Total Members: {{ members?.length || 0 }}</h3>
+
+        <div v-for="member in members" :key="member._id" class="border-b border-guild-700 pb-2 mb-2 last:border-b-0">
           <div class="flex justify-between items-center">
             <div>
-              <p class="font-medium">{{ member.name }}</p>
-              <p class="text-gray-600 text-sm">{{ member.email }}</p>
+              <p class="font-medium text-guild-100">{{ member.name }}</p>
+              <p class="text-guild-400 text-sm">{{ member.email }}</p>
             </div>
             <div class="text-right">
-              <span class="inline-block px-2 py-1 text-xs rounded bg-blue-100 text-blue-800">
+              <span class="inline-block px-2 py-1 text-xs rounded bg-candlelight-900/20 text-candlelight-400">
                 {{ member.circle }}
               </span>
-              <p class="text-sm text-gray-500">${{ member.contributionTier }}/month</p>
+              <p class="text-sm text-guild-500 text-ui-mono">${{ member.contributionTier }}/month</p>
             </div>
           </div>
         </div>
       </div>
-      
+
       <!-- Simple Add Member Form -->
-      <div class="bg-white rounded-lg border p-4">
-        <h3 class="font-semibold mb-4">Add Member</h3>
+      <div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
+        <h3 class="text-display-sm font-semibold mb-4 text-guild-100">Add Member</h3>
         <div class="grid grid-cols-2 gap-4">
-          <input v-model="newMember.name" placeholder="Name" class="border rounded p-2" />
-          <input v-model="newMember.email" placeholder="Email" class="border rounded p-2" />
-          <select v-model="newMember.circle" class="border rounded p-2">
+          <input v-model="newMember.name" placeholder="Name" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
+          <input v-model="newMember.email" placeholder="Email" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
+          <select v-model="newMember.circle" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
             <option value="community">Community</option>
             <option value="founder">Founder</option>
             <option value="practitioner">Practitioner</option>
           </select>
-          <select v-model="newMember.contributionTier" class="border rounded p-2">
+          <select v-model="newMember.contributionTier" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
             <option value="0">$0/month</option>
             <option value="5">$5/month</option>
             <option value="15">$15/month</option>
@@ -47,7 +47,7 @@
             <option value="50">$50/month</option>
           </select>
         </div>
-        <button @click="createMember" :disabled="creating" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
+        <button @click="createMember" :disabled="creating" class="mt-4 bg-candlelight-600 text-white px-4 py-2 rounded hover:bg-candlelight-700 disabled:opacity-50">
           {{ creating ? 'Adding...' : 'Add Member' }}
         </button>
       </div>
@@ -75,21 +75,21 @@ const createMember = async () => {
     alert('Please fill in name and email')
     return
   }
-  
+
   creating.value = true
   try {
     await $fetch('/api/admin/members', {
       method: 'POST',
       body: newMember
     })
-    
+
     Object.assign(newMember, {
       name: '',
       email: '',
       circle: 'community',
       contributionTier: '0'
     })
-    
+
     await refresh()
     alert('Member added successfully!')
   } catch (error) {
@@ -98,4 +98,4 @@ const createMember = async () => {
     creating.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/app/pages/admin/members-working.vue b/app/pages/admin/members-working.vue
index 1ed509c..51fff5e 100644
--- a/app/pages/admin/members-working.vue
+++ b/app/pages/admin/members-working.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-white border-b">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-gray-900">Member Management</h1>
-          <p class="text-gray-600">
+          <h1 class="text-display font-bold text-guild-100">Member Management</h1>
+          <p class="text-guild-400">
             Manage Ghost Guild members, their contributions, and access levels
           </p>
         </div>
@@ -18,11 +18,11 @@
           <input
             v-model="searchQuery"
             placeholder="Search members..."
-            class="border border-gray-300 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            class="border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
           />
           <select
             v-model="circleFilter"
-            class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            class="border border-guild-700 bg-guild-900 text-guild-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
           >
             <option value="">All Circles</option>
             <option value="community">Community</option>
@@ -32,80 +32,80 @@
         </div>
         <button
           @click="showCreateModal = true"
-          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
         >
           Add Member
         </button>
       </div>
 
       <!-- Members Table -->
-      <div class="bg-white rounded-lg shadow overflow-hidden">
-        <div v-if="pending" class="p-8 text-center">
+      <div class="bg-guild-900 rounded-lg shadow overflow-hidden">
+        <div v-if="pending" class="p-8 text-center text-guild-100">
           <div class="inline-flex items-center">
             <div
-              class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
+              class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
             ></div>
             Loading members...
           </div>
         </div>
 
-        <div v-else-if="error" class="p-8 text-center text-red-600">
+        <div v-else-if="error" class="p-8 text-center text-ember-400">
           Error loading members: {{ error }}
         </div>
 
         <table v-else class="w-full">
-          <thead class="bg-gray-50">
+          <thead class="bg-guild-950">
             <tr>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Name
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Email
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Circle
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Contribution
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Slack Status
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Joined
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody class="bg-white divide-y divide-gray-200">
+          <tbody class="bg-guild-900 divide-y divide-guild-700">
             <tr
               v-for="member in filteredMembers"
               :key="member._id"
-              class="hover:bg-gray-50"
+              class="hover:bg-guild-800"
             >
               <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm font-medium text-gray-900">
+                <div class="text-sm font-medium text-guild-100">
                   {{ member.name }}
                 </div>
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-gray-600">{{ member.email }}</div>
+                <div class="text-sm text-guild-400">{{ member.email }}</div>
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
@@ -117,7 +117,7 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800"
+                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
                 >
                   ${{ member.contributionTier }}/month
                 </span>
@@ -126,28 +126,28 @@
                 <span
                   :class="
                     member.slackInvited
-                      ? 'bg-green-100 text-green-800'
-                      : 'bg-gray-100 text-gray-800'
+                      ? 'bg-candlelight-900/20 text-candlelight-400'
+                      : 'bg-guild-800 text-guild-300'
                   "
                   class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                 >
                   {{ member.slackInvited ? "Invited" : "Pending" }}
                 </span>
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400 text-ui-mono">
                 {{ formatDate(member.createdAt) }}
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
                 <div class="flex gap-2">
                   <button
                     @click="sendSlackInvite(member)"
-                    class="text-primary-600 hover:text-primary-900"
+                    class="text-candlelight-400 hover:text-candlelight-300"
                   >
                     Slack Invite
                   </button>
                   <button
                     @click="editMember(member)"
-                    class="text-primary-600 hover:text-primary-900"
+                    class="text-candlelight-400 hover:text-candlelight-300"
                   >
                     Edit
                   </button>
@@ -159,7 +159,7 @@
 
         <div
           v-if="!pending && !error && filteredMembers.length === 0"
-          class="p-8 text-center text-gray-500"
+          class="p-8 text-center text-guild-500"
         >
           No members found matching your criteria
         </div>
@@ -171,26 +171,26 @@
       v-if="showCreateModal"
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
     >
-      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
-        <div class="px-6 py-4 border-b">
-          <h3 class="text-lg font-semibold">Add New Member</h3>
+      <div class="bg-guild-900 rounded-lg shadow-xl max-w-md w-full mx-4 border border-guild-700">
+        <div class="px-6 py-4 border-b border-guild-700">
+          <h3 class="text-display-sm font-semibold text-guild-100">Add New Member</h3>
         </div>
 
         <form @submit.prevent="createMember" class="p-6 space-y-4">
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Name</label
             >
             <input
               v-model="newMember.name"
               placeholder="Full name"
               required
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Email</label
             >
             <input
@@ -198,17 +198,17 @@
               type="email"
               placeholder="email@example.com"
               required
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Circle</label
             >
             <select
               v-model="newMember.circle"
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
             >
               <option value="community">Community</option>
               <option value="founder">Founder</option>
@@ -217,12 +217,12 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Contribution Tier</label
             >
             <select
               v-model="newMember.contributionTier"
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
             >
               <option value="0">$0/month</option>
               <option value="5">$5/month</option>
@@ -236,14 +236,14 @@
             <button
               type="button"
               @click="showCreateModal = false"
-              class="px-4 py-2 text-gray-600 hover:text-gray-900"
+              class="px-4 py-2 text-guild-400 hover:text-guild-100"
             >
               Cancel
             </button>
             <button
               type="submit"
               :disabled="creating"
-              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {{ creating ? "Creating..." : "Create Member" }}
             </button>
@@ -296,11 +296,11 @@ const filteredMembers = computed(() => {
 
 const getCircleClasses = (circle) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    founder: "bg-purple-100 text-purple-800",
-    practitioner: "bg-green-100 text-green-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    founder: "bg-earth-900/20 text-earth-400",
+    practitioner: "bg-candlelight-900/20 text-candlelight-400",
   };
-  return classes[circle] || "bg-gray-100 text-gray-800";
+  return classes[circle] || "bg-guild-800 text-guild-300";
 };
 
 const formatDate = (dateString) => {
diff --git a/app/pages/admin/members.vue b/app/pages/admin/members.vue
index d32fe1b..0ad34b8 100644
--- a/app/pages/admin/members.vue
+++ b/app/pages/admin/members.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-elevated border-b border-default">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-highlighted">Member Management</h1>
-          <p class="text-muted">
+          <h1 class="text-display font-bold text-guild-100">Member Management</h1>
+          <p class="text-guild-400">
             Manage Ghost Guild members, their contributions, and access levels
           </p>
         </div>
@@ -18,11 +18,11 @@
           <input
             v-model="searchQuery"
             placeholder="Search members..."
-            class="border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            class="border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
           />
           <select
             v-model="circleFilter"
-            class="border border-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            class="border border-guild-700 bg-guild-900 text-guild-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
           >
             <option value="">All Circles</option>
             <option value="community">Community</option>
@@ -32,80 +32,80 @@
         </div>
         <button
           @click="showCreateModal = true"
-          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
         >
           Add Member
         </button>
       </div>
 
       <!-- Members Table -->
-      <div class="bg-elevated rounded-lg shadow overflow-hidden">
-        <div v-if="pending" class="p-8 text-center text-default">
+      <div class="bg-guild-900 rounded-lg shadow overflow-hidden">
+        <div v-if="pending" class="p-8 text-center text-guild-100">
           <div class="inline-flex items-center">
             <div
-              class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
+              class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
             ></div>
             Loading members...
           </div>
         </div>
 
-        <div v-else-if="error" class="p-8 text-center text-red-600">
+        <div v-else-if="error" class="p-8 text-center text-ember-400">
           Error loading members: {{ error }}
         </div>
 
         <table v-else class="w-full">
-          <thead class="bg-muted">
+          <thead class="bg-guild-950">
             <tr>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Name
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Email
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Circle
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Contribution
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Slack Status
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Joined
               </th>
               <th
-                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody class="bg-elevated divide-y divide-default">
+          <tbody class="bg-guild-900 divide-y divide-guild-700">
             <tr
               v-for="member in filteredMembers"
               :key="member._id"
-              class="hover:bg-muted"
+              class="hover:bg-guild-800"
             >
               <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm font-medium text-highlighted">
+                <div class="text-sm font-medium text-guild-100">
                   {{ member.name }}
                 </div>
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-muted">
+                <div class="text-sm text-guild-400">
                   {{ member.email }}
                 </div>
               </td>
@@ -119,7 +119,7 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800"
+                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
                 >
                   ${{ member.contributionTier }}/month
                 </span>
@@ -128,28 +128,28 @@
                 <span
                   :class="
                     member.slackInvited
-                      ? 'bg-green-100 text-green-800'
-                      : 'bg-accented text-default'
+                      ? 'bg-candlelight-900/20 text-candlelight-400'
+                      : 'bg-guild-800 text-guild-300'
                   "
                   class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                 >
                   {{ member.slackInvited ? "Invited" : "Pending" }}
                 </span>
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400 text-ui-mono">
                 {{ formatDate(member.createdAt) }}
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
                 <div class="flex gap-2">
                   <button
                     @click="sendSlackInvite(member)"
-                    class="text-primary hover:text-primary"
+                    class="text-candlelight-400 hover:text-candlelight-300"
                   >
                     Slack Invite
                   </button>
                   <button
                     @click="editMember(member)"
-                    class="text-primary hover:text-primary"
+                    class="text-candlelight-400 hover:text-candlelight-300"
                   >
                     Edit
                   </button>
@@ -161,7 +161,7 @@
 
         <div
           v-if="!pending && !error && filteredMembers.length === 0"
-          class="p-8 text-center text-dimmed"
+          class="p-8 text-center text-guild-500"
         >
           No members found matching your criteria
         </div>
@@ -173,26 +173,26 @@
       v-if="showCreateModal"
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
     >
-      <div class="bg-elevated rounded-lg shadow-xl max-w-md w-full mx-4">
-        <div class="px-6 py-4 border-b border-default">
-          <h3 class="text-lg font-semibold text-highlighted">Add New Member</h3>
+      <div class="bg-guild-900 rounded-lg shadow-xl max-w-md w-full mx-4 border border-guild-700">
+        <div class="px-6 py-4 border-b border-guild-700">
+          <h3 class="text-display-sm font-semibold text-guild-100">Add New Member</h3>
         </div>
 
         <form @submit.prevent="createMember" class="p-6 space-y-4">
           <div>
-            <label class="block text-sm font-medium text-default mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Name</label
             >
             <input
               v-model="newMember.name"
               placeholder="Full name"
               required
-              class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Email</label
             >
             <input
@@ -200,12 +200,12 @@
               type="email"
               placeholder="email@example.com"
               required
-              class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Circle</label
             >
             <USelect
@@ -220,7 +220,7 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-1"
+            <label class="block text-sm font-medium text-guild-100 mb-1"
               >Contribution Tier</label
             >
             <USelect
@@ -240,14 +240,14 @@
             <button
               type="button"
               @click="showCreateModal = false"
-              class="px-4 py-2 text-muted hover:text-default"
+              class="px-4 py-2 text-guild-400 hover:text-guild-100"
             >
               Cancel
             </button>
             <button
               type="submit"
               :disabled="creating"
-              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {{ creating ? "Creating..." : "Create Member" }}
             </button>
@@ -300,11 +300,11 @@ const filteredMembers = computed(() => {
 
 const getCircleClasses = (circle) => {
   const classes = {
-    community: "bg-blue-100 text-blue-800",
-    founder: "bg-purple-100 text-purple-800",
-    practitioner: "bg-green-100 text-green-800",
+    community: "bg-candlelight-900/20 text-candlelight-400",
+    founder: "bg-earth-900/20 text-earth-400",
+    practitioner: "bg-candlelight-900/20 text-candlelight-400",
   };
-  return classes[circle] || "bg-gray-100 text-gray-800";
+  return classes[circle] || "bg-guild-800 text-guild-300";
 };
 
 const formatDate = (dateString) => {
diff --git a/app/pages/admin/series-management.vue b/app/pages/admin/series-management.vue
index 6f60eb7..1996b6c 100644
--- a/app/pages/admin/series-management.vue
+++ b/app/pages/admin/series-management.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="bg-elevated border-b border-default">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
-          <h1 class="text-2xl font-bold text-highlighted">Series Management</h1>
-          <p class="text-muted">Manage event series and their relationships</p>
+          <h1 class="text-display font-bold text-guild-100">Series Management</h1>
+          <p class="text-guild-400">Manage event series and their relationships</p>
         </div>
       </div>
     </div>
@@ -13,49 +13,49 @@
       <!-- Series Overview -->
       <div class="mb-8">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="bg-elevated rounded-lg shadow p-6">
+          <div class="bg-guild-900 rounded-lg shadow p-6">
             <div class="flex items-center">
-              <div class="p-3 bg-purple-100 rounded-full">
+              <div class="p-3 bg-earth-900/20 rounded-full">
                 <Icon
                   name="heroicons:squares-2x2"
-                  class="w-6 h-6 text-purple-600"
+                  class="w-6 h-6 text-earth-400"
                 />
               </div>
               <div class="ml-4">
-                <p class="text-sm text-dimmed">Active Series</p>
-                <p class="text-2xl font-semibold text-highlighted">
+                <p class="text-sm text-guild-500">Active Series</p>
+                <p class="text-2xl font-semibold text-guild-100 text-ui-mono">
                   {{ activeSeries.length }}
                 </p>
               </div>
             </div>
           </div>
-          <div class="bg-elevated rounded-lg shadow p-6">
+          <div class="bg-guild-900 rounded-lg shadow p-6">
             <div class="flex items-center">
-              <div class="p-3 bg-blue-100 rounded-full">
+              <div class="p-3 bg-candlelight-900/20 rounded-full">
                 <Icon
                   name="heroicons:calendar-days"
-                  class="w-6 h-6 text-blue-600"
+                  class="w-6 h-6 text-candlelight-400"
                 />
               </div>
               <div class="ml-4">
-                <p class="text-sm text-dimmed">Total Series Events</p>
-                <p class="text-2xl font-semibold text-highlighted">
+                <p class="text-sm text-guild-500">Total Series Events</p>
+                <p class="text-2xl font-semibold text-guild-100 text-ui-mono">
                   {{ totalSeriesEvents }}
                 </p>
               </div>
             </div>
           </div>
-          <div class="bg-elevated rounded-lg shadow p-6">
+          <div class="bg-guild-900 rounded-lg shadow p-6">
             <div class="flex items-center">
-              <div class="p-3 bg-green-100 rounded-full">
+              <div class="p-3 bg-candlelight-900/20 rounded-full">
                 <Icon
                   name="heroicons:chart-bar"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-candlelight-400"
                 />
               </div>
               <div class="ml-4">
-                <p class="text-sm text-dimmed">Avg Events/Series</p>
-                <p class="text-2xl font-semibold text-highlighted">
+                <p class="text-sm text-guild-500">Avg Events/Series</p>
+                <p class="text-2xl font-semibold text-guild-100 text-ui-mono">
                   {{
                     activeSeries.length > 0
                       ? Math.round(totalSeriesEvents / activeSeries.length)
@@ -74,11 +74,11 @@
           <input
             v-model="searchQuery"
             placeholder="Search series..."
-            class="border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            class="border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
           />
           <select
             v-model="statusFilter"
-            class="border border-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            class="border border-guild-700 bg-guild-900 text-guild-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
           >
             <option value="">All Status</option>
             <option value="active">Active</option>
@@ -89,14 +89,14 @@
         <div class="flex gap-3">
           <button
             @click="showBulkModal = true"
-            class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 inline-flex items-center"
+            class="bg-guild-600 text-white px-4 py-2 rounded-lg hover:bg-guild-700 inline-flex items-center"
           >
             <Icon name="heroicons:cog-6-tooth" class="w-4 h-4 mr-2" />
             Bulk Operations
           </button>
           <NuxtLink
             to="/admin/series/create"
-            class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 inline-flex items-center"
+            class="bg-earth-600 text-white px-4 py-2 rounded-lg hover:bg-earth-700 inline-flex items-center"
           >
             <Icon name="heroicons:plus" class="w-4 h-4 mr-2" />
             Create Series
@@ -107,19 +107,19 @@
       <!-- Series List -->
       <div v-if="pending" class="text-center py-12">
         <div
-          class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-4"
+          class="animate-spin rounded-full h-8 w-8 border-b-2 border-earth-500 mx-auto mb-4"
         ></div>
-        <p class="text-muted">Loading series...</p>
+        <p class="text-guild-400">Loading series...</p>
       </div>
 
       <div v-else-if="filteredSeries.length > 0" class="space-y-6">
         <div
           v-for="series in filteredSeries"
           :key="series.id"
-          class="bg-elevated rounded-lg shadow overflow-hidden"
+          class="bg-guild-900 rounded-lg shadow overflow-hidden"
         >
           <!-- Series Header -->
-          <div class="px-6 py-4 bg-muted border-b border-default">
+          <div class="px-6 py-4 bg-guild-950 border-b border-guild-700">
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-4">
                 <div
@@ -131,10 +131,10 @@
                   {{ formatSeriesType(series.type) }}
                 </div>
                 <div>
-                  <h3 class="text-lg font-semibold text-highlighted">
+                  <h3 class="text-display-sm font-semibold text-guild-100">
                     {{ series.title }}
                   </h3>
-                  <p class="text-sm text-muted">{{ series.description }}</p>
+                  <p class="text-sm text-guild-400">{{ series.description }}</p>
                 </div>
               </div>
               <div class="flex items-center gap-3">
@@ -142,15 +142,15 @@
                   :class="[
                     'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
                     series.status === 'active'
-                      ? 'bg-green-100 text-green-700'
+                      ? 'bg-candlelight-900/20 text-candlelight-400'
                       : series.status === 'upcoming'
-                        ? 'bg-blue-100 text-blue-700'
-                        : 'bg-accented text-default',
+                        ? 'bg-earth-900/20 text-earth-400'
+                        : 'bg-guild-800 text-guild-300',
                   ]"
                 >
                   {{ series.status }}
                 </span>
-                <span class="text-sm text-dimmed">
+                <span class="text-sm text-guild-500">
                   {{ series.eventCount }} events
                 </span>
               </div>
@@ -158,24 +158,24 @@
           </div>
 
           <!-- Series Events -->
-          <div class="divide-y divide-default">
+          <div class="divide-y divide-guild-700">
             <div
               v-for="event in series.events"
               :key="event.id"
-              class="px-6 py-4 hover:bg-muted"
+              class="px-6 py-4 hover:bg-guild-800"
             >
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-4">
                   <div
-                    class="w-8 h-8 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-sm font-semibold"
+                    class="w-8 h-8 bg-earth-800 text-earth-400 rounded-full flex items-center justify-center text-sm font-semibold"
                   >
                     {{ event.series?.position || "?" }}
                   </div>
                   <div>
-                    <h4 class="text-sm font-medium text-highlighted">
+                    <h4 class="text-sm font-medium text-guild-100">
                       {{ event.title }}
                     </h4>
-                    <p class="text-xs text-dimmed">
+                    <p class="text-xs text-guild-500">
                       {{ formatEventDate(event.startDate) }}
                     </p>
                   </div>
@@ -192,21 +192,21 @@
                   <div class="flex gap-1">
                     <NuxtLink
                       :to="`/events/${event.slug || event.id}`"
-                      class="p-1 text-muted hover:text-default rounded"
+                      class="p-1 text-guild-500 hover:text-guild-100 rounded"
                       title="View Event"
                     >
                       <Icon name="heroicons:eye" class="w-4 h-4" />
                     </NuxtLink>
                     <button
                       @click="editEvent(event)"
-                      class="p-1 text-muted hover:text-primary rounded"
+                      class="p-1 text-candlelight-400 hover:text-candlelight-300 rounded"
                       title="Edit Event"
                     >
                       <Icon name="heroicons:pencil-square" class="w-4 h-4" />
                     </button>
                     <button
                       @click="removeFromSeries(event)"
-                      class="p-1 text-muted hover:text-red-600 rounded"
+                      class="p-1 text-ember-400 hover:text-ember-300 rounded"
                       title="Remove from Series"
                     >
                       <Icon name="heroicons:x-mark" class="w-4 h-4" />
@@ -220,16 +220,16 @@
           <!-- Series Ticketing Info -->
           <div
             v-if="series.tickets?.enabled"
-            class="px-6 py-3 bg-blue-50 dark:bg-blue-950/20 border-t border-default"
+            class="px-6 py-3 bg-candlelight-900/20 border-t border-guild-700"
           >
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-4">
-                <Icon name="heroicons:ticket" class="w-5 h-5 text-blue-600" />
+                <Icon name="heroicons:ticket" class="w-5 h-5 text-candlelight-400" />
                 <div>
-                  <span class="text-sm font-medium text-default">
+                  <span class="text-sm font-medium text-guild-100">
                     Series Pass Ticketing Enabled
                   </span>
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     <span v-if="series.tickets.public?.available">
                       Public: ${{ series.tickets.public.price || 0 }}
                     </span>
@@ -246,7 +246,7 @@
               </div>
               <button
                 @click="manageSeriesTickets(series)"
-                class="text-sm text-blue-600 hover:text-blue-700 font-medium"
+                class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
               >
                 Manage Tickets
               </button>
@@ -254,39 +254,39 @@
           </div>
 
           <!-- Series Actions -->
-          <div class="px-6 py-3 bg-muted border-t border-default">
+          <div class="px-6 py-3 bg-guild-950 border-t border-guild-700">
             <div class="flex justify-between items-center">
-              <div class="text-sm text-dimmed">
+              <div class="text-sm text-guild-500">
                 {{ formatDateRange(series.startDate, series.endDate) }}
               </div>
               <div class="flex gap-2">
                 <button
                   @click="manageSeriesTickets(series)"
-                  class="text-sm text-primary hover:text-primary font-medium"
+                  class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
                 >
                   Ticketing
                 </button>
                 <button
                   @click="editSeries(series)"
-                  class="text-sm text-primary hover:text-primary font-medium"
+                  class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
                 >
                   Edit Series
                 </button>
                 <button
                   @click="addEventToSeries(series)"
-                  class="text-sm text-primary hover:text-primary font-medium"
+                  class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
                 >
                   Add Event
                 </button>
                 <button
                   @click="duplicateSeries(series)"
-                  class="text-sm text-primary hover:text-primary font-medium"
+                  class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
                 >
                   Duplicate Series
                 </button>
                 <button
                   @click="deleteSeries(series)"
-                  class="text-sm text-red-600 hover:text-red-700 font-medium"
+                  class="text-sm text-ember-400 hover:text-ember-300 font-medium"
                 >
                   Delete Series
                 </button>
@@ -296,13 +296,13 @@
         </div>
       </div>
 
-      <div v-else class="text-center py-12 bg-elevated rounded-lg shadow">
+      <div v-else class="text-center py-12 bg-guild-900 rounded-lg shadow">
         <Icon
           name="heroicons:squares-2x2"
-          class="w-12 h-12 text-muted mx-auto mb-3"
+          class="w-12 h-12 text-guild-400 mx-auto mb-3"
         />
-        <p class="text-muted">No event series found</p>
-        <p class="text-sm text-dimmed mt-2">
+        <p class="text-guild-400">No event series found</p>
+        <p class="text-sm text-guild-500 mt-2">
           Create events and group them into series to get started
         </p>
       </div>
@@ -311,17 +311,17 @@
     <!-- Edit Series Modal -->
     <div
       v-if="editingSeriesId"
-      class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
     >
       <div
-        class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
       >
-        <div class="px-6 py-4 border-b border-default">
+        <div class="px-6 py-4 border-b border-guild-700">
           <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-highlighted">Edit Series</h3>
+            <h3 class="text-display-sm font-semibold text-guild-100">Edit Series</h3>
             <button
               @click="cancelEditSeries"
-              class="text-muted hover:text-default"
+              class="text-guild-400 hover:text-guild-100"
             >
               <Icon name="heroicons:x-mark" class="w-5 h-5" />
             </button>
@@ -330,31 +330,31 @@
 
         <div class="p-6 space-y-6">
           <div>
-            <label class="block text-sm font-medium text-default mb-2"
+            <label class="block text-sm font-medium text-guild-100 mb-2"
               >Series Title</label
             >
             <input
               v-model="editingSeriesData.title"
               type="text"
-              class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
               placeholder="e.g., Co-op Game Dev Workshop Series"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-2"
+            <label class="block text-sm font-medium text-guild-100 mb-2"
               >Description</label
             >
             <textarea
               v-model="editingSeriesData.description"
               rows="3"
-              class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              class="w-full border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
               placeholder="Brief description of this series"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-2"
+            <label class="block text-sm font-medium text-guild-100 mb-2"
               >Series Type</label
             >
             <USelect
@@ -370,7 +370,7 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-default mb-2"
+            <label class="block text-sm font-medium text-guild-100 mb-2"
               >Total Events (optional)</label
             >
             <UInput
@@ -383,16 +383,16 @@
           </div>
         </div>
 
-        <div class="px-6 py-4 border-t border-default flex justify-end gap-3">
+        <div class="px-6 py-4 border-t border-guild-700 flex justify-end gap-3">
           <button
             @click="cancelEditSeries"
-            class="px-4 py-2 text-muted hover:text-default"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100"
           >
             Cancel
           </button>
           <button
             @click="saveSeriesEdit"
-            class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+            class="px-4 py-2 bg-earth-600 text-white rounded-lg hover:bg-earth-700"
           >
             Save Changes
           </button>
@@ -403,19 +403,19 @@
     <!-- Bulk Operations Modal -->
     <div
       v-if="showBulkModal"
-      class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
     >
       <div
-        class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
       >
-        <div class="px-6 py-4 border-b border-default">
+        <div class="px-6 py-4 border-b border-guild-700">
           <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-highlighted">
+            <h3 class="text-display-sm font-semibold text-guild-100">
               Bulk Series Operations
             </h3>
             <button
               @click="showBulkModal = false"
-              class="text-muted hover:text-default"
+              class="text-guild-400 hover:text-guild-100"
             >
               <Icon name="heroicons:x-mark" class="w-5 h-5" />
             </button>
@@ -424,24 +424,24 @@
 
         <div class="p-6 space-y-6">
           <div>
-            <h4 class="text-sm font-medium text-highlighted mb-3">
+            <h4 class="text-sm font-medium text-guild-100 mb-3">
               Series Management Tools
             </h4>
             <div class="space-y-3">
               <button
                 @click="reorderAllSeries"
-                class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
+                class="w-full text-left p-3 border border-guild-700 rounded-lg hover:bg-guild-800"
               >
                 <div class="flex items-center">
                   <Icon
                     name="heroicons:arrows-up-down"
-                    class="w-5 h-5 text-muted mr-3"
+                    class="w-5 h-5 text-guild-400 mr-3"
                   />
                   <div>
-                    <p class="text-sm font-medium text-highlighted">
+                    <p class="text-sm font-medium text-guild-100">
                       Auto-Reorder Series
                     </p>
-                    <p class="text-xs text-dimmed">
+                    <p class="text-xs text-guild-500">
                       Fix position numbers based on event dates
                     </p>
                   </div>
@@ -450,18 +450,18 @@
 
               <button
                 @click="validateAllSeries"
-                class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
+                class="w-full text-left p-3 border border-guild-700 rounded-lg hover:bg-guild-800"
               >
                 <div class="flex items-center">
                   <Icon
                     name="heroicons:check-circle"
-                    class="w-5 h-5 text-muted mr-3"
+                    class="w-5 h-5 text-guild-400 mr-3"
                   />
                   <div>
-                    <p class="text-sm font-medium text-highlighted">
+                    <p class="text-sm font-medium text-guild-100">
                       Validate Series Data
                     </p>
-                    <p class="text-xs text-dimmed">
+                    <p class="text-xs text-guild-500">
                       Check for consistency issues
                     </p>
                   </div>
@@ -470,18 +470,18 @@
 
               <button
                 @click="exportSeriesData"
-                class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
+                class="w-full text-left p-3 border border-guild-700 rounded-lg hover:bg-guild-800"
               >
                 <div class="flex items-center">
                   <Icon
                     name="heroicons:document-arrow-down"
-                    class="w-5 h-5 text-muted mr-3"
+                    class="w-5 h-5 text-guild-400 mr-3"
                   />
                   <div>
-                    <p class="text-sm font-medium text-highlighted">
+                    <p class="text-sm font-medium text-guild-100">
                       Export Series Data
                     </p>
-                    <p class="text-xs text-dimmed">
+                    <p class="text-xs text-guild-500">
                       Download series information as JSON
                     </p>
                   </div>
@@ -491,10 +491,10 @@
           </div>
         </div>
 
-        <div class="px-6 py-4 border-t border-default flex justify-end">
+        <div class="px-6 py-4 border-t border-guild-700 flex justify-end">
           <button
             @click="showBulkModal = false"
-            class="px-4 py-2 text-muted hover:text-default"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100"
           >
             Close
           </button>
@@ -505,22 +505,22 @@
     <!-- Series Ticketing Modal -->
     <div
       v-if="editingTicketsSeriesId"
-      class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
     >
       <div
-        class="bg-elevated rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+        class="bg-guild-900 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
       >
-        <div class="px-6 py-4 border-b border-default">
+        <div class="px-6 py-4 border-b border-guild-700">
           <div class="flex items-center justify-between">
             <div>
-              <h3 class="text-lg font-semibold text-highlighted">
+              <h3 class="text-display-sm font-semibold text-guild-100">
                 Series Pass Ticketing
               </h3>
-              <p class="text-sm text-muted">{{ editingTicketsData.title }}</p>
+              <p class="text-sm text-guild-400">{{ editingTicketsData.title }}</p>
             </div>
             <button
               @click="cancelTicketsEdit"
-              class="text-muted hover:text-default"
+              class="text-guild-400 hover:text-guild-100"
             >
               <Icon name="heroicons:x-mark" class="w-5 h-5" />
             </button>
@@ -529,18 +529,18 @@
 
         <div class="p-6 space-y-6">
           <!-- Enable Ticketing Toggle -->
-          <div class="p-4 bg-muted rounded-lg">
+          <div class="p-4 bg-guild-950 rounded-lg">
             <label class="flex items-start cursor-pointer">
               <input
                 v-model="editingTicketsData.tickets.enabled"
                 type="checkbox"
-                class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
               />
               <div class="ml-3">
-                <span class="text-sm font-medium text-default"
+                <span class="text-sm font-medium text-guild-100"
                   >Enable Series Pass Ticketing</span
                 >
-                <p class="text-xs text-dimmed">
+                <p class="text-xs text-guild-500">
                   Allow users to purchase a pass for all events in this series
                 </p>
               </div>
@@ -550,7 +550,7 @@
           <div v-if="editingTicketsData.tickets.enabled" class="space-y-6">
             <!-- Ticketing Behavior -->
             <div class="space-y-4">
-              <h4 class="text-sm font-semibold text-highlighted">
+              <h4 class="text-sm font-semibold text-guild-100">
                 Ticketing Behavior
               </h4>
 
@@ -558,13 +558,13 @@
                 <input
                   v-model="editingTicketsData.tickets.requiresSeriesTicket"
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Require Series Pass</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Users must buy the series pass; individual event tickets are
                     not available
                   </p>
@@ -577,14 +577,14 @@
                     editingTicketsData.tickets.allowIndividualEventTickets
                   "
                   type="checkbox"
-                  class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
+                  class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
                   :disabled="editingTicketsData.tickets.requiresSeriesTicket"
                 />
                 <div class="ml-3">
-                  <span class="text-sm font-medium text-default"
+                  <span class="text-sm font-medium text-guild-100"
                     >Allow Individual Event Tickets</span
                   >
-                  <p class="text-xs text-dimmed">
+                  <p class="text-xs text-guild-500">
                     Users can attend single events without buying the full
                     series pass
                   </p>
@@ -593,17 +593,17 @@
             </div>
 
             <!-- Member Tickets -->
-            <div class="border border-default rounded-lg p-4">
+            <div class="border border-guild-700 rounded-lg p-4">
               <div class="flex items-center justify-between mb-4">
-                <h4 class="text-sm font-semibold text-highlighted">
+                <h4 class="text-sm font-semibold text-guild-100">
                   Member Series Pass
                 </h4>
                 <label class="flex items-center cursor-pointer">
-                  <span class="text-xs text-muted mr-2">Available</span>
+                  <span class="text-xs text-guild-400 mr-2">Available</span>
                   <input
                     v-model="editingTicketsData.tickets.member.available"
                     type="checkbox"
-                    class="rounded border-default text-blue-600 focus:ring-blue-500"
+                    class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
                   />
                 </label>
               </div>
@@ -614,7 +614,7 @@
               >
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Pass Name</label
                     >
                     <UInput
@@ -625,7 +625,7 @@
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Price (CAD)</label
                     >
                     <div class="flex items-center gap-2">
@@ -644,16 +644,16 @@
                         <input
                           v-model="editingTicketsData.tickets.member.isFree"
                           type="checkbox"
-                          class="rounded border-default text-blue-600 focus:ring-blue-500"
+                          class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
                         />
-                        <span class="ml-1 text-xs text-muted">Free</span>
+                        <span class="ml-1 text-xs text-guild-400">Free</span>
                       </label>
                     </div>
                   </div>
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Description</label
                   >
                   <UTextarea
@@ -667,17 +667,17 @@
             </div>
 
             <!-- Public Tickets -->
-            <div class="border border-default rounded-lg p-4">
+            <div class="border border-guild-700 rounded-lg p-4">
               <div class="flex items-center justify-between mb-4">
-                <h4 class="text-sm font-semibold text-highlighted">
+                <h4 class="text-sm font-semibold text-guild-100">
                   Public Series Pass
                 </h4>
                 <label class="flex items-center cursor-pointer">
-                  <span class="text-xs text-muted mr-2">Available</span>
+                  <span class="text-xs text-guild-400 mr-2">Available</span>
                   <input
                     v-model="editingTicketsData.tickets.public.available"
                     type="checkbox"
-                    class="rounded border-default text-blue-600 focus:ring-blue-500"
+                    class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
                   />
                 </label>
               </div>
@@ -688,7 +688,7 @@
               >
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Pass Name</label
                     >
                     <UInput
@@ -699,7 +699,7 @@
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Price (CAD)</label
                     >
                     <UInput
@@ -714,7 +714,7 @@
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Description</label
                   >
                   <UTextarea
@@ -727,7 +727,7 @@
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Quantity Available</label
                     >
                     <UInput
@@ -739,7 +739,7 @@
                       placeholder="Leave blank for unlimited"
                       class="w-full"
                     />
-                    <p class="text-xs text-dimmed mt-1">
+                    <p class="text-xs text-guild-500 mt-1">
                       {{ editingTicketsData.tickets.public.sold || 0 }} sold,
                       {{ editingTicketsData.tickets.public.reserved || 0 }}
                       reserved
@@ -747,7 +747,7 @@
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-default mb-2"
+                    <label class="block text-sm font-medium text-guild-100 mb-2"
                       >Early Bird Price (Optional)</label
                     >
                     <UInput
@@ -766,7 +766,7 @@
                 <div
                   v-if="editingTicketsData.tickets.public.earlyBirdPrice > 0"
                 >
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Early Bird Deadline</label
                   >
                   <UInput
@@ -776,7 +776,7 @@
                     type="datetime-local"
                     class="w-full"
                   />
-                  <p class="text-xs text-dimmed mt-1">
+                  <p class="text-xs text-guild-500 mt-1">
                     Price increases to ${{
                       editingTicketsData.tickets.public.price
                     }}
@@ -787,14 +787,14 @@
             </div>
 
             <!-- Capacity Management -->
-            <div class="border border-default rounded-lg p-4">
-              <h4 class="text-sm font-semibold text-highlighted mb-4">
+            <div class="border border-guild-700 rounded-lg p-4">
+              <h4 class="text-sm font-semibold text-guild-100 mb-4">
                 Capacity Management
               </h4>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Total Capacity</label
                   >
                   <UInput
@@ -804,13 +804,13 @@
                     placeholder="Leave blank for unlimited"
                     class="w-full"
                   />
-                  <p class="text-xs text-dimmed mt-1">
+                  <p class="text-xs text-guild-500 mt-1">
                     Maximum series pass holders across all types
                   </p>
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-default mb-2"
+                  <label class="block text-sm font-medium text-guild-100 mb-2"
                     >Currently Reserved</label
                   >
                   <UInput
@@ -820,9 +820,9 @@
                     type="number"
                     min="0"
                     disabled
-                    class="w-full bg-accented"
+                    class="w-full bg-guild-800"
                   />
-                  <p class="text-xs text-dimmed mt-1">
+                  <p class="text-xs text-guild-500 mt-1">
                     Auto-calculated during checkout
                   </p>
                 </div>
@@ -830,21 +830,21 @@
             </div>
 
             <!-- Waitlist Configuration -->
-            <div class="border border-default rounded-lg p-4">
+            <div class="border border-guild-700 rounded-lg p-4">
               <div class="flex items-center justify-between mb-4">
-                <h4 class="text-sm font-semibold text-highlighted">Waitlist</h4>
+                <h4 class="text-sm font-semibold text-guild-100">Waitlist</h4>
                 <label class="flex items-center cursor-pointer">
-                  <span class="text-xs text-muted mr-2">Enable Waitlist</span>
+                  <span class="text-xs text-guild-400 mr-2">Enable Waitlist</span>
                   <input
                     v-model="editingTicketsData.tickets.waitlist.enabled"
                     type="checkbox"
-                    class="rounded border-default text-blue-600 focus:ring-blue-500"
+                    class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
                   />
                 </label>
               </div>
 
               <div v-if="editingTicketsData.tickets.waitlist.enabled">
-                <label class="block text-sm font-medium text-default mb-2"
+                <label class="block text-sm font-medium text-guild-100 mb-2"
                   >Max Waitlist Size</label
                 >
                 <UInput
@@ -854,7 +854,7 @@
                   placeholder="Leave blank for unlimited"
                   class="w-full"
                 />
-                <p class="text-xs text-dimmed mt-1">
+                <p class="text-xs text-guild-500 mt-1">
                   {{ editingTicketsData.tickets.waitlist.entries?.length || 0 }}
                   people currently on waitlist
                 </p>
@@ -863,16 +863,16 @@
           </div>
         </div>
 
-        <div class="px-6 py-4 border-t border-default flex justify-end gap-3">
+        <div class="px-6 py-4 border-t border-guild-700 flex justify-end gap-3">
           <button
             @click="cancelTicketsEdit"
-            class="px-4 py-2 text-muted hover:text-default"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100"
           >
             Cancel
           </button>
           <button
             @click="saveTicketsEdit"
-            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+            class="px-4 py-2 bg-candlelight-600 text-white rounded-lg hover:bg-candlelight-700"
           >
             Save Ticketing Settings
           </button>
@@ -986,12 +986,12 @@ const formatSeriesType = (type) => {
 
 const getSeriesTypeBadgeClass = (type) => {
   const classes = {
-    workshop_series: "bg-emerald-100 text-emerald-700",
-    recurring_meetup: "bg-blue-100 text-blue-700",
-    multi_day: "bg-purple-100 text-purple-700",
-    course: "bg-amber-100 text-amber-700",
+    workshop_series: "bg-candlelight-900/20 text-candlelight-400",
+    recurring_meetup: "bg-candlelight-900/20 text-candlelight-400",
+    multi_day: "bg-earth-900/20 text-earth-400",
+    course: "bg-candlelight-900/20 text-candlelight-400",
   };
-  return classes[type] || "bg-gray-100 text-gray-700";
+  return classes[type] || "bg-guild-800 text-guild-300";
 };
 
 const formatEventDate = (date) => {
@@ -1029,11 +1029,11 @@ const getEventStatus = (event) => {
 const getEventStatusClass = (event) => {
   const status = getEventStatus(event);
   const classes = {
-    Upcoming: "bg-blue-100 text-blue-700",
-    Ongoing: "bg-green-100 text-green-700",
-    Completed: "bg-gray-100 text-gray-700",
+    Upcoming: "bg-candlelight-900/20 text-candlelight-400",
+    Ongoing: "bg-candlelight-900/20 text-candlelight-400",
+    Completed: "bg-guild-800 text-guild-300",
   };
-  return classes[status] || "bg-gray-100 text-gray-700";
+  return classes[status] || "bg-guild-800 text-guild-300";
 };
 
 // Actions
diff --git a/app/pages/admin/series/create.vue b/app/pages/admin/series/create.vue
index 9799d8f..6aed3aa 100644
--- a/app/pages/admin/series/create.vue
+++ b/app/pages/admin/series/create.vue
@@ -1,27 +1,27 @@
 <template>
   <div>
-    <div class="bg-white border-b">
+    <div class="bg-guild-900 border-b border-guild-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="py-6">
           <div class="flex items-center gap-4 mb-2">
-            <NuxtLink to="/admin/series-management" class="text-gray-500 hover:text-gray-700">
+            <NuxtLink to="/admin/series-management" class="text-guild-500 hover:text-guild-100">
               <Icon name="heroicons:arrow-left" class="w-5 h-5" />
             </NuxtLink>
-            <h1 class="text-2xl font-bold text-gray-900">Create New Series</h1>
+            <h1 class="text-display font-bold text-guild-100">Create New Series</h1>
           </div>
-          <p class="text-gray-600">Create a new event series to group related events together</p>
+          <p class="text-guild-400">Create a new event series to group related events together</p>
         </div>
       </div>
     </div>
     
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Error Summary -->
-      <div v-if="formErrors.length > 0" class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+      <div v-if="formErrors.length > 0" class="mb-6 p-4 bg-ember-900/20 border border-ember-800 rounded-lg">
         <div class="flex">
-          <Icon name="heroicons:exclamation-circle" class="w-5 h-5 text-red-500 mr-3 mt-0.5" />
+          <Icon name="heroicons:exclamation-circle" class="w-5 h-5 text-ember-400 mr-3 mt-0.5" />
           <div>
-            <h3 class="text-sm font-medium text-red-800 mb-2">Please fix the following errors:</h3>
-            <ul class="text-sm text-red-700 space-y-1">
+            <h3 class="text-sm font-medium text-ember-400 mb-2">Please fix the following errors:</h3>
+            <ul class="text-sm text-ember-400 space-y-1">
               <li v-for="error in formErrors" :key="error">• {{ error }}</li>
             </ul>
           </div>
@@ -29,11 +29,11 @@
       </div>
 
       <!-- Success Message -->
-      <div v-if="showSuccessMessage" class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+      <div v-if="showSuccessMessage" class="mb-6 p-4 bg-candlelight-900/20 border border-candlelight-800 rounded-lg">
         <div class="flex">
-          <Icon name="heroicons:check-circle" class="w-5 h-5 text-green-500 mr-3 mt-0.5" />
+          <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400 mr-3 mt-0.5" />
           <div>
-            <h3 class="text-sm font-medium text-green-800">Series created successfully!</h3>
+            <h3 class="text-sm font-medium text-candlelight-400">Series created successfully!</h3>
           </div>
         </div>
       </div>
@@ -41,56 +41,56 @@
       <form @submit.prevent="createSeries">
         <!-- Series Information -->
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-gray-900 mb-4">Series Information</h2>
+          <h2 class="text-lg font-semibold text-guild-100 mb-4">Series Information</h2>
           
           <div class="grid grid-cols-1 gap-6">
             <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">
-                Series Title <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Series Title <span class="text-ember-400">*</span>
               </label>
               <input 
                 v-model="seriesForm.title" 
                 type="text"
                 placeholder="e.g., Cooperative Game Development Fundamentals" 
                 required 
-                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-                :class="{ 'border-red-300 focus:ring-red-500': fieldErrors.title }"
+                class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
+                :class="{ 'border-ember-700 focus:ring-ember-500': fieldErrors.title }"
                 @input="generateSlugFromTitle"
               />
-              <p v-if="fieldErrors.title" class="mt-1 text-sm text-red-600">{{ fieldErrors.title }}</p>
+              <p v-if="fieldErrors.title" class="mt-1 text-sm text-ember-400">{{ fieldErrors.title }}</p>
             </div>
 
             <div v-if="generatedSlug">
-              <label class="block text-sm font-medium text-gray-700 mb-2">Generated Series ID</label>
-              <div class="w-full bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-gray-700 font-mono text-sm">
+              <label class="block text-sm font-medium text-guild-100 mb-2">Generated Series ID</label>
+              <div class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 font-mono text-sm">
                 {{ generatedSlug }}
               </div>
-              <p class="mt-1 text-sm text-gray-500">
+              <p class="mt-1 text-sm text-guild-500">
                 This unique identifier will be automatically generated from your title
               </p>
             </div>
             
             <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">
-                Series Description <span class="text-red-500">*</span>
+              <label class="block text-sm font-medium text-guild-100 mb-2">
+                Series Description <span class="text-ember-400">*</span>
               </label>
               <textarea 
                 v-model="seriesForm.description" 
                 placeholder="Describe what the series covers and its goals" 
                 required 
                 rows="4" 
-                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-                :class="{ 'border-red-300 focus:ring-red-500': fieldErrors.description }"
+                class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
+                :class="{ 'border-ember-700 focus:ring-ember-500': fieldErrors.description }"
               ></textarea>
-              <p v-if="fieldErrors.description" class="mt-1 text-sm text-red-600">{{ fieldErrors.description }}</p>
+              <p v-if="fieldErrors.description" class="mt-1 text-sm text-ember-400">{{ fieldErrors.description }}</p>
             </div>
             
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Series Type</label>
+                <label class="block text-sm font-medium text-guild-100 mb-2">Series Type</label>
                 <select 
                   v-model="seriesForm.type" 
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
                 >
                   <option value="workshop_series">Workshop Series</option>
                   <option value="recurring_meetup">Recurring Meetup</option>
@@ -101,25 +101,25 @@
               </div>
               
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Total Events Planned</label>
+                <label class="block text-sm font-medium text-guild-100 mb-2">Total Events Planned</label>
                 <input 
                   v-model.number="seriesForm.totalEvents" 
                   type="number" 
                   min="1"
                   placeholder="e.g., 4" 
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
                 />
-                <p class="text-sm text-gray-500 mt-1">How many events will be in this series? (optional)</p>
+                <p class="text-sm text-guild-500 mt-1">How many events will be in this series? (optional)</p>
               </div>
             </div>
           </div>
         </div>
         
         <!-- Form Actions -->
-        <div class="flex justify-between items-center pt-6 border-t border-gray-200">
+        <div class="flex justify-between items-center pt-6 border-t border-guild-700">
           <NuxtLink 
             to="/admin/series-management" 
-            class="px-4 py-2 text-gray-600 hover:text-gray-900 font-medium"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100 font-medium"
           >
             Cancel
           </NuxtLink>
@@ -129,7 +129,7 @@
               type="button"
               @click="createAndAddEvent"
               :disabled="creating" 
-              class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              class="px-4 py-2 bg-candlelight-600 text-white rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
             >
               {{ creating ? 'Creating...' : 'Create & Add Event' }}
             </button>
@@ -137,7 +137,7 @@
             <button 
               type="submit" 
               :disabled="creating" 
-              class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              class="px-6 py-2 bg-earth-600 text-white rounded-lg hover:bg-earth-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
             >
               {{ creating ? 'Creating...' : 'Create Series' }}
             </button>
diff --git a/app/pages/coming-soon.vue b/app/pages/coming-soon.vue
index 26a5954..3cfca6a 100644
--- a/app/pages/coming-soon.vue
+++ b/app/pages/coming-soon.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="min-h-screen w-full flex flex-col items-center justify-center">
     <a href="https://babyghosts.fund/ghost-guild" class="text-center">
-      <h1 class="text-5xl md:text-6xl font-bold mb-4">Ghost Guild</h1>
-      <p class="text-xl md:text-2xl">Coming Soon</p>
+      <h1 class="text-display-xl font-bold mb-4">Ghost Guild</h1>
+      <p class="text-display-sm text-guild-400">Coming Soon</p>
     </a>
     <button
       class="mt-12 text-sm text-guild-500 hover:text-guild-300 transition-colors"
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index a1e4788..b298c5a 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -5,7 +5,7 @@
   >
     <div class="text-center">
       <div
-        class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"
+        class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"
       ></div>
       <p class="text-guild-200">Loading event details...</p>
     </div>
@@ -20,7 +20,7 @@
       <p class="text-guild-300 mb-6">
         The event you're looking for doesn't exist.
       </p>
-      <NuxtLink to="/events" class="text-blue-400 hover:underline">
+      <NuxtLink to="/events" class="text-candlelight-500 hover:underline">
         ← Back to Events
       </NuxtLink>
     </div>
@@ -38,7 +38,7 @@
       <!-- Members Only Banner -->
       <div
         v-if="event.membersOnly"
-        class="absolute top-0 left-0 right-0 z-10 bg-purple-600/95 backdrop-blur-sm py-2"
+        class="absolute top-0 left-0 right-0 z-10 bg-candlelight-500/95 backdrop-blur-sm py-2"
       >
         <UContainer>
           <div class="flex items-center justify-center">
@@ -62,7 +62,7 @@
       <div class="absolute inset-0 flex items-center">
         <UContainer>
           <div class="max-w-4xl">
-            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
+            <h1 class="text-display-xl font-bold text-white mb-4">
               {{ event.title }}
             </h1>
           </div>
@@ -71,7 +71,7 @@
     </div>
 
     <!-- Page Header (fallback when no image) -->
-    <PageHeader v-else :title="event.title" theme="blue" size="medium" />
+    <PageHeader v-else :title="event.title" size="medium" />
 
     <!-- Event Details Section -->
     <section class="py-16 bg-guild-900">
@@ -81,21 +81,21 @@
           <div class="mb-8">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
               <div>
-                <p class="text-sm text-guild-400">Date</p>
-                <p class="font-semibold text-guild-100">
+                <p class="text-ui-label text-guild-400">Date</p>
+                <p class="text-ui-mono font-semibold text-guild-100">
                   {{ formatDate(event.startDate) }}
                 </p>
               </div>
 
               <div>
-                <p class="text-sm text-guild-400">Time</p>
-                <p class="font-semibold text-guild-100">
+                <p class="text-ui-label text-guild-400">Time</p>
+                <p class="text-ui-mono font-semibold text-guild-100">
                   {{ formatTime(event.startDate, event.endDate) }}
                 </p>
               </div>
 
               <div>
-                <p class="text-sm text-guild-400">Location</p>
+                <p class="text-ui-label text-guild-400">Location</p>
                 <p class="font-semibold text-guild-100">
                   {{ event.location }}
                 </p>
@@ -119,14 +119,14 @@
 
           <!-- Event Cancelled Notice -->
           <div v-if="event.isCancelled" class="mb-8">
-            <div class="p-6 bg-red-900/20 rounded-xl border border-red-800">
-              <h3 class="text-lg font-semibold text-red-300 mb-2">
+            <div class="p-6 bg-ember-900/20 rounded-xl border border-ember-800">
+              <h3 class="text-lg font-semibold text-ember-300 mb-2">
                 Event Cancelled
               </h3>
-              <p class="text-red-400" v-if="event.cancellationMessage">
+              <p class="text-ember-400" v-if="event.cancellationMessage">
                 {{ event.cancellationMessage }}
               </p>
-              <p class="text-red-400" v-else>
+              <p class="text-ember-400" v-else>
                 This event has been cancelled. We apologize for any
                 inconvenience.
               </p>
@@ -150,14 +150,14 @@
           >
             <div class="flex items-center space-x-2">
               <span
-                class="text-sm font-medium text-gray-800 dark:text-guild-200"
+                class="text-sm font-medium text-guild-200"
                 >Recommended for:</span
               >
               <div class="flex flex-wrap gap-2">
                 <span
                   v-for="circle in event.targetCircles"
                   :key="circle"
-                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border border-blue-300 dark:border-blue-800/50"
+                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-candlelight-900/20 dark:bg-candlelight-900/30 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700 dark:border-candlelight-800/50"
                 >
                   {{ formatCircleName(circle) }}
                 </span>
@@ -167,7 +167,7 @@
 
           <!-- Event Description -->
           <div class="prose prose-lg dark:prose-invert max-w-none mb-12">
-            <h2 class="text-2xl font-bold text-guild-100 mb-4">
+            <h2 class="text-display-sm font-bold text-guild-100 mb-4">
               About This Event
             </h2>
 
@@ -191,7 +191,7 @@
             </p>
 
             <div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
-              <h3 class="text-xl font-semibold text-guild-100 mb-4">
+              <h3 class="text-display-sm font-semibold text-guild-100 mb-4">
                 Event Agenda
               </h3>
               <ul class="space-y-3">
@@ -201,7 +201,7 @@
                   class="flex items-start"
                 >
                   <span
-                    class="inline-block w-6 h-6 bg-blue-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5"
+                    class="inline-block w-6 h-6 bg-candlelight-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5"
                   >
                     {{ index + 1 }}
                   </span>
@@ -214,7 +214,7 @@
               v-if="event.speakers && event.speakers.length > 0"
               class="mt-8"
             >
-              <h3 class="text-xl font-semibold text-guild-100 mb-4">
+              <h3 class="text-display-sm font-semibold text-guild-100 mb-4">
                 Speakers
               </h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -257,18 +257,18 @@
               <!-- Already Registered Status -->
               <div v-if="registrationStatus === 'registered'">
                 <div
-                  class="p-4 bg-green-100 dark:bg-green-900/20 rounded-lg border border-green-400 dark:border-green-800 mb-6"
+                  class="p-4 bg-candlelight-900/20 dark:bg-candlelight-900/20 rounded-lg border border-candlelight-700 dark:border-candlelight-800 mb-6"
                 >
                   <div
                     class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
                   >
                     <div>
                       <p
-                        class="font-semibold text-green-800 dark:text-green-300"
+                        class="font-semibold text-candlelight-500 dark:text-candlelight-400"
                       >
                         You're registered!
                       </p>
-                      <p class="text-sm text-green-700 dark:text-green-400">
+                      <p class="text-sm text-candlelight-600 dark:text-candlelight-500">
                         We've sent a confirmation to your email
                       </p>
                     </div>
@@ -324,7 +324,7 @@
                     v-else-if="isCancelled"
                     to="/member/profile#account"
                   >
-                    <UButton color="blue" size="lg" class="px-8">
+                    <UButton color="primary" size="lg" class="px-8">
                       Reactivate Membership
                     </UButton>
                   </NuxtLink>
@@ -383,7 +383,7 @@
 
               <!-- Not Logged In - Show Registration Form -->
               <div v-else>
-                <h3 class="text-xl font-bold text-guild-100 mb-6">
+                <h3 class="text-display-sm font-bold text-guild-100 mb-6">
                   Register for This Event
                 </h3>
                 <form @submit.prevent="handleRegistration" class="space-y-4">
@@ -465,7 +465,7 @@
                       class="w-24 h-2 bg-guild-700 rounded-full overflow-hidden"
                     >
                       <div
-                        class="h-full bg-blue-500 rounded-full"
+                        class="h-full bg-candlelight-500 rounded-full"
                         :style="`width: ${((event.registeredCount || 0) / event.maxAttendees) * 100}%`"
                       />
                     </div>
@@ -541,7 +541,7 @@
             </p>
             <a
               href="mailto:events@ghostguild.org"
-              class="text-blue-400 hover:underline"
+              class="text-candlelight-500 hover:underline"
             >
               events@ghostguild.org
             </a>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index 07fb26b..e0962d4 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -129,10 +129,10 @@
                 class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
               >
                 <div class="flex-shrink-0 text-center">
-                  <div class="text-2xl font-bold text-guild-100">
+                  <div class="text-2xl font-display font-bold text-guild-100">
                     {{ event.start.getDate() }}
                   </div>
-                  <div class="text-xs text-guild-400 uppercase">
+                  <div class="text-ui-label text-guild-400">
                     {{
                       event.start.toLocaleDateString("en-US", {
                         month: "short",
@@ -151,7 +151,7 @@
                     <Icon
                       v-if="event.membersOnly"
                       name="heroicons:lock-closed"
-                      class="w-4 h-4 text-purple-500 flex-shrink-0 mt-1"
+                      class="w-4 h-4 text-candlelight-500 flex-shrink-0 mt-1"
                     />
                   </div>
 
@@ -229,7 +229,7 @@
 
     <!-- Event Series -->
     <div v-if="activeSeries.length > 0" class="text-center my-12">
-      <h2 class="text-3xl font-bold text-guild-100 mb-8">
+      <h2 class="text-display font-bold text-guild-100 mb-8">
         Current Event Series
       </h2>
     </div>
@@ -261,10 +261,10 @@
             :class="[
               'series-list-item__status inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
               series.status === 'active'
-                ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                ? 'bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400'
                 : series.status === 'upcoming'
-                  ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
-                  : 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',
+                  ? 'bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300'
+                  : 'bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400',
             ]"
           >
             {{ series.status }}
@@ -326,7 +326,7 @@
     <section class="py-20 bg-guild-800 dark:bg-guild-900">
       <UContainer>
         <div class="text-center mb-16">
-          <h2 class="text-3xl font-bold text-guild-100 mb-8">
+          <h2 class="text-display font-bold text-guild-100 mb-8">
             Attend Our Events
           </h2>
         </div>
@@ -613,18 +613,18 @@ const formatSeriesType = (type) => {
 const getSeriesTypeBadgeClass = (type) => {
   const classes = {
     workshop_series:
-      "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+      "bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
     recurring_meetup:
-      "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+      "bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300",
     multi_day:
-      "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+      "bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
     course:
-      "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
-    tournament: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+      "bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
+    tournament: "bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
   };
   return (
     classes[type] ||
-    "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+    "bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400"
   );
 };
 </script>
@@ -661,27 +661,27 @@ const getSeriesTypeBadgeClass = (type) => {
 }
 
 .guild-calendar :deep(.vuecal__event.event-community) {
-  background-color: #2563eb;
+  background-color: var(--color-guild-400);
   color: #f5f5f4;
-  border-color: #1d4ed8;
+  border-color: var(--color-guild-500);
 }
 
 .guild-calendar :deep(.vuecal__event.event-workshop) {
-  background-color: #059669;
+  background-color: var(--color-candlelight-500);
   color: #f5f5f4;
-  border-color: #047857;
+  border-color: var(--color-candlelight-600);
 }
 
 .guild-calendar :deep(.vuecal__event.event-social) {
-  background-color: #7c3aed;
+  background-color: var(--color-guild-400);
   color: #f5f5f4;
-  border-color: #6d28d9;
+  border-color: var(--color-guild-500);
 }
 
 .guild-calendar :deep(.vuecal__event.event-showcase) {
-  background-color: #d97706;
+  background-color: var(--color-ember-400);
   color: #f5f5f4;
-  border-color: #b45309;
+  border-color: var(--color-ember-500);
 }
 
 #event-calendar {
@@ -698,9 +698,9 @@ const getSeriesTypeBadgeClass = (type) => {
 
   .month-view .vuecal__cell--today,
   .vuecal__cell--today {
-    background-color: rgba(59, 130, 246, 0.15);
+    background-color: rgba(184, 135, 58, 0.15);
     color: #f5f5f4;
-    border: 2px solid #3b82f6 !important;
+    border: 2px solid var(--color-candlelight-500) !important;
 
     .day-of-month {
       display: flex;
@@ -714,7 +714,7 @@ const getSeriesTypeBadgeClass = (type) => {
       font-size: 0.75rem;
       margin-right: 0.5rem;
       display: none;
-      color: #3b82f6;
+      color: var(--color-candlelight-500);
       font-weight: 600;
     }
 
@@ -775,27 +775,27 @@ const getSeriesTypeBadgeClass = (type) => {
     }
 
     &.event-community {
-      background-color: #2563eb;
+      background-color: var(--color-guild-400);
       color: #f5f5f4;
-      border-color: #1d4ed8;
+      border-color: var(--color-guild-500);
     }
 
     &.event-workshop {
-      background-color: #059669;
+      background-color: var(--color-candlelight-500);
       color: #f5f5f4;
-      border-color: #047857;
+      border-color: var(--color-candlelight-600);
     }
 
     &.event-social {
-      background-color: #7c3aed;
+      background-color: var(--color-guild-400);
       color: #f5f5f4;
-      border-color: #6d28d9;
+      border-color: var(--color-guild-500);
     }
 
     &.event-showcase {
-      background-color: #d97706;
+      background-color: var(--color-ember-400);
       color: #f5f5f4;
-      border-color: #b45309;
+      border-color: var(--color-ember-500);
     }
   }
 
@@ -882,8 +882,8 @@ const getSeriesTypeBadgeClass = (type) => {
 }
 
 .guild-calendar :deep(.vuecal__cell--today) {
-  background-color: rgba(59, 130, 246, 0.1);
-  border: 2px solid #3b82f6;
+  background-color: rgba(184, 135, 58, 0.1);
+  border: 2px solid var(--color-candlelight-500);
 }
 
 .guild-calendar :deep(.vuecal__cell--out-of-scope) {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 97aecdc..19c43c6 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="max-w-6xl mx-auto px-6 md:px-8">
     <!-- Hero Section -->
-    <section class="py-16 md:py-24">
+    <section class="py-16 md:py-24 ink-grain">
       <div class="max-w-2xl">
         <h1
-          class="text-4xl md:text-5xl font-light text-guild-100 leading-tight mb-2"
+          class="text-display-xl font-light text-guild-100 leading-tight mb-2"
         >
           Build your co-op studio
         </h1>
         <p
-          class="text-4xl md:text-5xl font-light text-guild-500 leading-tight mb-8"
+          class="text-display-xl font-light text-guild-500 leading-tight mb-8"
         >
           with people who get it.
         </p>
@@ -54,25 +54,27 @@
         </div>
         <div
           v-if="submitError"
-          class="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"
+          class="mt-4 p-3 bg-ember-900/20 border border-ember-500/30 rounded-lg"
         >
-          <p class="text-red-400 text-sm">{{ submitError }}</p>
+          <p class="text-ember-400 text-sm">{{ submitError }}</p>
         </div>
       </div>
     </section>
 
+    <GuildDivider variant="woodcut" />
+
     <!-- Value Props Section -->
-    <section class="py-16 border-t border-guild-800">
+    <section class="py-16">
       <div class="grid md:grid-cols-3 gap-8 md:gap-12">
         <div>
-          <p class="text-sm font-medium text-primary-400 mb-3">Peer Support</p>
+          <p class="text-ui-label text-candlelight-400 mb-3">Peer Support</p>
           <p class="text-guild-400 leading-relaxed">
             Connect with founders at your stage and practitioners who've been
             there. Real conversations, real help.
           </p>
         </div>
         <div>
-          <p class="text-sm font-medium text-primary-400 mb-3">
+          <p class="text-ui-label text-candlelight-400 mb-3">
             Shared Knowledge
           </p>
           <p class="text-guild-400 leading-relaxed">
@@ -81,7 +83,7 @@
           </p>
         </div>
         <div>
-          <p class="text-sm font-medium text-primary-400 mb-3">
+          <p class="text-ui-label text-candlelight-400 mb-3">
             Solidarity Economics
           </p>
           <p class="text-guild-400 leading-relaxed">
@@ -92,9 +94,11 @@
       </div>
     </section>
 
+    <GuildDivider variant="woodcut" />
+
     <!-- Circles Section -->
-    <section class="py-16 border-t border-guild-800">
-      <p class="text-sm text-guild-600 mb-8">Find your people</p>
+    <section class="py-16">
+      <p class="text-ui-label text-guild-600 mb-8">Find your people</p>
 
       <div class="space-y-4 mb-8">
         <NuxtLink
@@ -120,10 +124,12 @@
       </p>
     </section>
 
+    <GuildDivider variant="woodcut" />
+
     <!-- Bottom CTA Section -->
-    <section class="py-24 border-t border-guild-800 text-center">
-      <p class="text-sm text-guild-600 mb-4">Part of the Baby Ghosts family</p>
-      <h2 class="text-3xl md:text-4xl font-light text-guild-200 mb-8">
+    <section class="py-24 text-center">
+      <p class="text-ui-label text-guild-600 mb-4">Part of the Baby Ghosts family</p>
+      <h2 class="text-display font-light text-guild-200 mb-8">
         Ready to find your people?
       </h2>
       <UButton
diff --git a/app/pages/join.vue b/app/pages/join.vue
index a914bec..447d339 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -5,14 +5,12 @@
       v-if="!isAuthenticated"
       title="Join Ghost Guild"
       subtitle=""
-      theme="gray"
       size="large"
     />
     <PageHeader
       v-else
       title="You're Already a Member!"
       :subtitle="`Welcome back, ${memberData?.name || 'member'}. You're already part of Ghost Guild in the ${memberData?.circle || 'community'} circle.`"
-      theme="gray"
       size="large"
     />
 
@@ -20,7 +18,7 @@
     <section class="py-20 bg-[--ui-bg-elevated]">
       <UContainer>
         <div class="max-w-2xl">
-          <h2 class="text-3xl font-bold text-[--ui-text] mb-6">
+          <h2 class="text-display font-bold text-[--ui-text] mb-6">
             How Membership Works
           </h2>
           <p class="text-lg text-[--ui-text] mb-4">
@@ -41,7 +39,7 @@
     <section v-if="!isAuthenticated" class="py-20 bg-[--ui-bg]">
       <UContainer class="max-w-4xl">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-[--ui-text] mb-4">
+          <h2 class="text-display font-bold text-[--ui-text] mb-4">
             Membership Sign Up
           </h2>
         </div>
@@ -52,10 +50,10 @@
             <div class="flex items-center">
               <div
                 :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
+                  'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
                   currentStep >= 1
-                    ? 'bg-neutral-900 text-neutral-50'
-                    : 'bg-neutral-200 text-neutral-500',
+                    ? 'bg-guild-800 text-candlelight-400'
+                    : 'bg-guild-700 text-guild-500',
                 ]"
               >
                 1
@@ -63,16 +61,16 @@
               <span
                 class="ml-2 font-medium"
                 :class="
-                  currentStep === 1 ? 'text-[--ui-text]' : 'text-neutral-500'
+                  currentStep === 1 ? 'text-[--ui-text]' : 'text-guild-500'
                 "
               >
                 Information
               </span>
             </div>
 
-            <div v-if="needsPayment" class="w-16 h-1 bg-neutral-200">
+            <div v-if="needsPayment" class="w-16 h-1 bg-guild-700">
               <div
-                class="h-full bg-neutral-900 transition-all"
+                class="h-full bg-candlelight-500 transition-all"
                 :style="{ width: currentStep >= 2 ? '100%' : '0%' }"
               />
             </div>
@@ -80,10 +78,10 @@
             <div v-if="needsPayment" class="flex items-center">
               <div
                 :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
+                  'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
                   currentStep >= 2
-                    ? 'bg-neutral-900 text-neutral-50'
-                    : 'bg-neutral-200 text-neutral-500',
+                    ? 'bg-guild-800 text-candlelight-400'
+                    : 'bg-guild-700 text-guild-500',
                 ]"
               >
                 2
@@ -91,16 +89,16 @@
               <span
                 class="ml-2 font-medium"
                 :class="
-                  currentStep === 2 ? 'text-[--ui-text]' : 'text-neutral-500'
+                  currentStep === 2 ? 'text-[--ui-text]' : 'text-guild-500'
                 "
               >
                 Payment
               </span>
             </div>
 
-            <div class="w-16 h-1 bg-neutral-200">
+            <div class="w-16 h-1 bg-guild-700">
               <div
-                class="h-full bg-neutral-900 transition-all"
+                class="h-full bg-candlelight-500 transition-all"
                 :style="{ width: currentStep >= 3 ? '100%' : '0%' }"
               />
             </div>
@@ -108,10 +106,10 @@
             <div class="flex items-center">
               <div
                 :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
+                  'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
                   currentStep >= 3
-                    ? 'bg-neutral-900 text-neutral-50'
-                    : 'bg-neutral-200 text-neutral-500',
+                    ? 'bg-guild-800 text-candlelight-400'
+                    : 'bg-guild-700 text-guild-500',
                 ]"
               >
                 <span v-if="needsPayment">3</span>
@@ -120,7 +118,7 @@
               <span
                 class="ml-2 font-medium"
                 :class="
-                  currentStep === 3 ? 'text-[--ui-text]' : 'text-neutral-500'
+                  currentStep === 3 ? 'text-[--ui-text]' : 'text-guild-500'
                 "
               >
                 Confirmation
@@ -231,7 +229,7 @@
           class="bg-[--ui-bg-elevated] rounded-xl p-8"
         >
           <div class="mb-6">
-            <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
+            <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
               Payment Information
             </h3>
             <p class="text-[--ui-text-muted]">
@@ -273,10 +271,10 @@
         >
           <div class="text-center">
             <div
-              class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"
+              class="w-20 h-20 bg-candlelight-900/20 rounded-full flex items-center justify-center mx-auto mb-6"
             >
               <svg
-                class="w-10 h-10 text-green-500"
+                class="w-10 h-10 text-candlelight-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -290,7 +288,7 @@
               </svg>
             </div>
 
-            <h3 class="text-2xl font-bold text-[--ui-text] mb-4">
+            <h3 class="text-display-sm font-bold text-[--ui-text] mb-4">
               Welcome to Ghost Guild!
             </h3>
 
@@ -353,7 +351,7 @@
     <section v-if="isAuthenticated" class="py-20 bg-[--ui-bg]">
       <UContainer class="max-w-4xl">
         <div class="bg-[--ui-bg-elevated] rounded-xl p-8 mb-8">
-          <h2 class="text-2xl font-bold text-[--ui-text] mb-6">
+          <h2 class="text-display-sm font-bold text-[--ui-text] mb-6">
             Your Membership
           </h2>
 
@@ -387,7 +385,7 @@
           </div>
         </div>
 
-        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
+        <div class="bg-guild-800 rounded-lg p-6">
           <h3 class="text-lg font-semibold text-[--ui-text] mb-3">
             Want to change your circle or contribution?
           </h3>
diff --git a/app/pages/member/dashboard.vue b/app/pages/member/dashboard.vue
index 01da5df..f92c61b 100644
--- a/app/pages/member/dashboard.vue
+++ b/app/pages/member/dashboard.vue
@@ -4,7 +4,6 @@
     <PageHeader
       title="Member Dashboard"
       :subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
-      theme="blue"
       size="medium"
     />
 
@@ -55,7 +54,7 @@
           <template #header>
             <div class="flex items-start justify-between gap-4">
               <div class="flex-1">
-                <h1 class="text-2xl font-bold text-guild-100 warm-text">
+                <h1 class="text-display-lg text-guild-100 warm-text">
                   Welcome to Ghost Guild, {{ memberData?.name }}!
                 </h1>
                 <p
@@ -88,13 +87,13 @@
 
           <div class="flex flex-wrap gap-4 text-sm">
             <div class="bg-guild-800 border border-guild-600 px-4 py-2">
-              <span class="text-guild-200">Circle:</span>
+              <span class="text-ui-label text-guild-200">Circle:</span>
               <span class="font-medium text-stone-50 ml-1 capitalize">{{
                 memberData?.circle
               }}</span>
             </div>
             <div class="bg-guild-800 border border-guild-600 px-4 py-2">
-              <span class="text-guild-200">Contribution:</span>
+              <span class="text-ui-label text-guild-200">Contribution:</span>
               <span class="font-medium text-stone-50 ml-1"
                 >${{ memberData?.contributionTier }} CAD/month</span
               >
@@ -111,7 +110,7 @@
           }"
         >
           <template #header>
-            <h2 class="text-xl font-bold text-guild-100 warm-text">
+            <h2 class="text-display-sm text-guild-100 warm-text">
               Quick Links
             </h2>
           </template>
@@ -195,7 +194,7 @@
         >
           <template #header>
             <div class="flex items-center justify-between">
-              <h2 class="text-xl font-bold text-guild-100 warm-text">
+              <h2 class="text-display-sm text-guild-100 warm-text">
                 Your Upcoming Events
               </h2>
               <div class="flex items-center gap-2">
@@ -263,7 +262,7 @@
                   <h3 class="font-semibold text-guild-100 mb-1">
                     {{ evt.title }}
                   </h3>
-                  <div class="flex items-center gap-4 text-sm text-guild-400">
+                  <div class="flex items-center gap-4 text-ui-mono text-guild-400">
                     <span class="flex items-center gap-1">
                       <Icon name="heroicons:calendar" class="w-4 h-4" />
                       {{ formatEventDate(evt.startDate) }}
diff --git a/app/pages/member/my-updates.vue b/app/pages/member/my-updates.vue
index 1b7ec2b..fea70b0 100644
--- a/app/pages/member/my-updates.vue
+++ b/app/pages/member/my-updates.vue
@@ -3,7 +3,6 @@
     <PageHeader
       title="My Updates"
       subtitle="View and manage your updates"
-      theme="stone"
       size="medium"
     />
 
diff --git a/app/pages/member/profile.vue b/app/pages/member/profile.vue
index 7eaec7f..2a4675f 100644
--- a/app/pages/member/profile.vue
+++ b/app/pages/member/profile.vue
@@ -3,7 +3,6 @@
     <PageHeader
       title="Your Profile"
       subtitle="Manage your profile information and privacy settings"
-      theme="blue"
       size="medium"
     />
 
@@ -16,9 +15,9 @@
         >
           <div class="text-center">
             <div
-              class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+              class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
             ></div>
-            <p class="text-gray-600 dark:text-guild-400">
+            <p class="text-guild-400">
               Loading your profile...
             </p>
           </div>
@@ -52,7 +51,7 @@
                 <!-- Basic Information -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-8 text-guild-100 warm-text"
                   >
                     Basic Information
                   </h2>
@@ -123,7 +122,7 @@
                             class="relative aspect-square rounded-lg border-2 transition-all hover:scale-105"
                             :class="
                               formData.avatar === ghost.value
-                                ? 'border-blue-400 bg-blue-500/20'
+                                ? 'border-candlelight-400 bg-candlelight-900/20'
                                 : 'border-guild-700 bg-guild-800/50 hover:border-guild-600'
                             "
                             @click="formData.avatar = ghost.value"
@@ -135,7 +134,7 @@
                             />
                             <span
                               v-if="formData.avatar === ghost.value"
-                              class="absolute -top-2 -right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs"
+                              class="absolute -top-2 -right-2 w-6 h-6 bg-candlelight-500 rounded-full flex items-center justify-center text-white text-xs"
                             >
                               ✓
                             </span>
@@ -153,7 +152,7 @@
                 <!-- Professional Info -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-8 text-guild-100 warm-text"
                   >
                     Professional Information
                   </h2>
@@ -222,7 +221,7 @@
                 <!-- Community Connections -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-8 text-guild-100 warm-text"
                   >
                     Community Connections
                   </h2>
@@ -238,7 +237,7 @@
                           <!-- Tags input -->
                           <div>
                             <label
-                              class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
+                              class="block text-sm font-medium text-guild-200 mb-2"
                             >
                               Skills & Topics
                             </label>
@@ -256,7 +255,7 @@
                               <span
                                 v-for="(tag, index) in formData.offering.tags"
                                 :key="tag"
-                                class="px-3 py-1 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 rounded-full text-sm border border-blue-300 dark:border-blue-500/30 flex items-center gap-2 group hover:bg-blue-200 dark:hover:bg-blue-500/30 transition-colors cursor-pointer"
+                                class="px-3 py-1 bg-guild-800 text-guild-200 rounded-full text-sm border border-guild-600 flex items-center gap-2 group hover:bg-guild-700 transition-colors cursor-pointer"
                                 @click="removeOfferingTag(index)"
                               >
                                 {{ tag }}
@@ -270,7 +269,7 @@
                           <!-- Description textarea -->
                           <div>
                             <label
-                              class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
+                              class="block text-sm font-medium text-guild-200 mb-2"
                             >
                               Details
                             </label>
@@ -300,7 +299,7 @@
                           <!-- Tags input -->
                           <div>
                             <label
-                              class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
+                              class="block text-sm font-medium text-guild-200 mb-2"
                             >
                               Skills & Topics
                             </label>
@@ -318,7 +317,7 @@
                               <span
                                 v-for="(tag, index) in formData.lookingFor.tags"
                                 :key="tag"
-                                class="px-3 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full text-sm border border-purple-300 dark:border-purple-500/30 flex items-center gap-2 group hover:bg-purple-200 dark:hover:bg-purple-500/30 transition-colors cursor-pointer"
+                                class="px-3 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full text-sm border border-candlelight-500/30 flex items-center gap-2 group hover:bg-candlelight-900/30 transition-colors cursor-pointer"
                                 @click="removeLookingForTag(index)"
                               >
                                 {{ tag }}
@@ -332,7 +331,7 @@
                           <!-- Description textarea -->
                           <div>
                             <label
-                              class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
+                              class="block text-sm font-medium text-guild-200 mb-2"
                             >
                               Details
                             </label>
@@ -357,7 +356,7 @@
                 <!-- Peer Support -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-8 text-guild-100 warm-text"
                   >
                     Peer Support
                   </h2>
@@ -368,12 +367,12 @@
                       <USwitch v-model="formData.peerSupportEnabled" />
                       <div>
                         <p
-                          class="font-medium text-gray-800 dark:text-guild-200"
+                          class="font-medium text-guild-200"
                         >
                           Offer Peer Support
                         </p>
                         <p
-                          class="text-sm text-gray-600 dark:text-guild-400 mt-1"
+                          class="text-sm text-guild-400 mt-1"
                         >
                           Make yourself available to support other members
                         </p>
@@ -383,7 +382,7 @@
                     <!-- Conditional Fields -->
                     <div
                       v-if="formData.peerSupportEnabled"
-                      class="space-y-6 pl-4 border-l-2 border-purple-500/30"
+                      class="space-y-6 pl-4 border-l-2 border-candlelight-500/30"
                     >
                       <!-- Skill-Based Topics -->
                       <UFormField
@@ -408,7 +407,7 @@
                                 topic, index
                               ) in formData.peerSupportSkillTopics"
                               :key="topic"
-                              class="px-3 py-1 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 rounded-full text-sm border border-blue-300 dark:border-blue-500/30 flex items-center gap-2 group hover:bg-blue-200 dark:hover:bg-blue-500/30 transition-colors cursor-pointer"
+                              class="px-3 py-1 bg-guild-800 text-guild-200 rounded-full text-sm border border-guild-600 flex items-center gap-2 group hover:bg-guild-700 transition-colors cursor-pointer"
                               @click="removePeerSkillTopic(index)"
                             >
                               {{ topic }}
@@ -417,7 +416,7 @@
                               >
                             </span>
                           </div>
-                          <p class="text-xs text-stone-500 mt-2">
+                          <p class="text-xs text-guild-500 mt-2">
                             Suggested from your offerings:
                             <span
                               v-for="tag in formData.offering.tags?.filter(
@@ -478,7 +477,7 @@
                         />
                         <template #hint>
                           <span
-                            class="text-xs text-gray-500 dark:text-guild-500"
+                            class="text-xs text-guild-500"
                           >
                             {{ formData.peerSupportMessage?.length || 0 }}/200
                             characters
@@ -506,7 +505,7 @@
                 <!-- Directory Settings -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-8 text-guild-100 warm-text"
                   >
                     Directory Visibility
                   </h2>
@@ -514,10 +513,10 @@
                   <div class="flex items-start gap-4">
                     <USwitch v-model="formData.showInDirectory" />
                     <div>
-                      <p class="font-medium text-gray-800 dark:text-guild-200">
+                      <p class="font-medium text-guild-200">
                         Show in Member Directory
                       </p>
-                      <p class="text-sm text-gray-600 dark:text-guild-400 mt-1">
+                      <p class="text-sm text-guild-400 mt-1">
                         Allow other members to discover and connect with you
                         through the directory
                       </p>
@@ -528,16 +527,16 @@
                 <!-- Success/Error Messages -->
                 <div
                   v-if="saveSuccess"
-                  class="backdrop-blur-sm bg-green-500/10 border border-green-500/30 rounded-lg p-4"
+                  class="backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-4"
                 >
-                  <p class="text-green-300">✓ Profile updated successfully!</p>
+                  <p class="text-candlelight-500">✓ Profile updated successfully!</p>
                 </div>
 
                 <div
                   v-if="saveError"
-                  class="backdrop-blur-sm bg-red-500/10 border border-red-500/30 rounded-lg p-4"
+                  class="backdrop-blur-sm bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
                 >
-                  <p class="text-red-300">
+                  <p class="text-ember-400">
                     {{ saveError }}
                   </p>
                 </div>
@@ -574,20 +573,20 @@
                 <!-- Current Membership -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-6 text-guild-100 warm-text"
                   >
                     Current Membership
                   </h2>
 
                   <div
-                    class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6 space-y-4"
+                    class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6 space-y-4"
                   >
                     <!-- Status Badge -->
                     <div
-                      class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-guild-700"
+                      class="flex items-center justify-between pb-4 border-b border-guild-700"
                     >
                       <div>
-                        <p class="text-sm text-gray-600 dark:text-guild-400">
+                        <p class="text-sm text-guild-400">
                           Membership Status
                         </p>
                         <div class="flex items-center gap-2 mt-1">
@@ -620,21 +619,21 @@
 
                     <div class="flex items-start justify-between">
                       <div>
-                        <p class="text-sm text-gray-600 dark:text-guild-400">
+                        <p class="text-sm text-guild-400">
                           Circle
                         </p>
                         <p
-                          class="text-lg font-medium text-gray-900 dark:text-guild-100 capitalize"
+                          class="text-lg font-medium text-guild-100 capitalize"
                         >
                           {{ memberData.circle }}
                         </p>
                       </div>
                       <div>
-                        <p class="text-sm text-gray-600 dark:text-guild-400">
+                        <p class="text-sm text-guild-400">
                           Contribution Level
                         </p>
                         <p
-                          class="text-lg font-medium text-gray-900 dark:text-guild-100"
+                          class="text-lg font-medium text-guild-100"
                         >
                           ${{ contributionTierDetails?.amount }}/month
                         </p>
@@ -642,10 +641,10 @@
                     </div>
 
                     <div v-if="memberData.subscriptionStartDate">
-                      <p class="text-sm text-gray-600 dark:text-guild-400">
+                      <p class="text-sm text-guild-400">
                         Member Since
                       </p>
-                      <p class="text-gray-900 dark:text-guild-100">
+                      <p class="text-guild-100">
                         {{ formatDate(memberData.subscriptionStartDate) }}
                       </p>
                     </div>
@@ -656,10 +655,10 @@
                         memberData.contributionTier !== '0'
                       "
                     >
-                      <p class="text-sm text-gray-600 dark:text-guild-400">
+                      <p class="text-sm text-guild-400">
                         Next Billing Date
                       </p>
-                      <p class="text-gray-900 dark:text-guild-100">
+                      <p class="text-guild-100">
                         {{ formatDate(memberData.nextBillingDate) }}
                       </p>
                     </div>
@@ -669,15 +668,15 @@
                 <!-- Change Contribution Level -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-6 text-guild-100 warm-text"
                   >
                     Change Contribution Level
                   </h2>
 
                   <div
-                    class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
+                    class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6"
                   >
-                    <p class="text-gray-700 dark:text-guild-300 mb-6">
+                    <p class="text-guild-300 mb-6">
                       Choose a new contribution level that works for you.
                       Changes will take effect on your next billing cycle.
                     </p>
@@ -690,22 +689,22 @@
                         :class="[
                           'w-full text-left p-4 rounded-lg border-2 transition-all',
                           selectedContributionTier === tier.value
-                            ? 'border-blue-400 bg-blue-500/20'
-                            : 'border-gray-300 dark:border-guild-600 bg-gray-50 dark:bg-guild-900/30 hover:border-blue-300 dark:hover:border-guild-500',
+                            ? 'border-candlelight-400 bg-candlelight-900/20'
+                            : 'border-guild-600 bg-guild-900/30 hover:border-guild-500',
                         ]"
                         @click="selectedContributionTier = tier.value"
                       >
                         <div class="flex items-center justify-between">
                           <div>
                             <p
-                              class="font-medium text-gray-900 dark:text-guild-100"
+                              class="font-medium text-guild-100"
                             >
                               {{ tier.label }}
                             </p>
                           </div>
                           <div
                             v-if="selectedContributionTier === tier.value"
-                            class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs"
+                            class="w-6 h-6 bg-candlelight-500 rounded-full flex items-center justify-center text-white text-xs"
                           >
                             ✓
                           </div>
@@ -715,16 +714,16 @@
 
                     <div
                       v-if="contributionChangeError"
-                      class="mb-4 backdrop-blur-sm bg-red-500/10 border border-red-500/30 rounded-lg p-4"
+                      class="mb-4 backdrop-blur-sm bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
                     >
-                      <p class="text-red-300">{{ contributionChangeError }}</p>
+                      <p class="text-ember-400">{{ contributionChangeError }}</p>
                     </div>
 
                     <div
                       v-if="contributionChangeSuccess"
-                      class="mb-4 backdrop-blur-sm bg-green-500/10 border border-green-500/30 rounded-lg p-4"
+                      class="mb-4 backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-4"
                     >
-                      <p class="text-green-300">
+                      <p class="text-candlelight-500">
                         ✓ Contribution level updated successfully!
                       </p>
                     </div>
@@ -745,20 +744,20 @@
                 <!-- Cancel Membership -->
                 <div>
                   <h2
-                    class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
+                    class="text-display-sm mb-6 text-guild-100 warm-text"
                   >
                     Cancel Membership
                   </h2>
 
                   <div
-                    class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
+                    class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6"
                   >
-                    <p class="text-gray-700 dark:text-guild-300 mb-4">
+                    <p class="text-guild-300 mb-4">
                       We're sorry to see you go. If you cancel, you'll lose
                       access to member benefits at the end of your current
                       billing period.
                     </p>
-                    <p class="text-sm text-gray-600 dark:text-guild-400 mb-6">
+                    <p class="text-sm text-guild-400 mb-6">
                       Need a break? Consider switching to the free tier instead.
                     </p>
 
diff --git a/app/pages/members.vue b/app/pages/members.vue
index 5288863..5c23fff 100644
--- a/app/pages/members.vue
+++ b/app/pages/members.vue
@@ -3,7 +3,6 @@
     <PageHeader
       title="Member Directory"
       subtitle="Connect with members of the Ghost Guild community"
-      theme="purple"
       size="medium"
     />
 
@@ -56,8 +55,8 @@
                 class="px-3 py-1 rounded-full text-sm transition-all border"
                 :class="
                   selectedSkills.includes(skill)
-                    ? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
-                    : 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
+                    ? 'bg-candlelight-900/20 text-candlelight-500 border-candlelight-500/50'
+                    : 'bg-guild-800/50 text-guild-400 border-guild-700 hover:border-guild-600'
                 "
                 @click="toggleSkill(skill)"
               >
@@ -94,8 +93,8 @@
                 class="px-3 py-1 rounded-full text-sm transition-all border"
                 :class="
                   selectedTopics.includes(topic)
-                    ? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
-                    : 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
+                    ? 'bg-candlelight-900/20 text-candlelight-500 border-candlelight-500/50'
+                    : 'bg-guild-800/50 text-guild-400 border-guild-700 hover:border-guild-600'
                 "
                 @click="toggleTopic(topic)"
               >
@@ -129,7 +128,7 @@
             <span class="text-guild-400">Active filters:</span>
             <span
               v-if="selectedCircle && selectedCircle !== 'all'"
-              class="px-2 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full border border-purple-300 dark:border-purple-500/30 flex items-center gap-1"
+              class="px-2 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full border border-candlelight-500/30 flex items-center gap-1"
             >
               {{ circleLabels[selectedCircle] }}
               <button
@@ -142,7 +141,7 @@
             </span>
             <span
               v-if="peerSupportFilter && peerSupportFilter !== 'all'"
-              class="px-2 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full border border-purple-300 dark:border-purple-500/30 flex items-center gap-1"
+              class="px-2 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full border border-candlelight-500/30 flex items-center gap-1"
             >
               Offering Peer Support
               <button
@@ -171,7 +170,7 @@
         >
           <div class="text-center">
             <div
-              class="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+              class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
             ></div>
             <p class="text-guild-400">Loading members...</p>
           </div>
@@ -187,7 +186,7 @@
             <div
               v-for="member in members"
               :key="member._id"
-              class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-purple-500/50 transition-all group"
+              class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-candlelight-500/50 transition-all group"
             >
               <!-- Peer Support Sticker Badge -->
               <PeerSupportBadge
@@ -199,7 +198,7 @@
               <div class="flex items-start gap-4 mb-4">
                 <!-- Avatar -->
                 <div
-                  class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
+                  class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-candlelight-500/50 transition-colors"
                 >
                   <img
                     v-if="member.avatar"
@@ -223,7 +222,7 @@
 
                   <div class="flex items-center gap-2 flex-wrap">
                     <span
-                      class="px-2 py-0.5 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded text-xs border border-purple-300 dark:border-purple-500/30"
+                      :class="['px-2 py-0.5 rounded text-xs', circleBadgeClass(member.circle)]"
                     >
                       {{ circleLabels[member.circle] }}
                     </span>
@@ -250,10 +249,10 @@
               <!-- Peer Support Section -->
               <div
                 v-if="member.peerSupport?.enabled"
-                class="mb-4 p-4 bg-purple-500/10 border border-purple-500/30 rounded-lg"
+                class="mb-4 p-4 bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg"
               >
                 <div class="mb-3">
-                  <p class="text-purple-300 font-medium text-sm mb-2">
+                  <p class="text-candlelight-500 font-medium text-sm mb-2">
                     {{ member.name }} offers 1:1 chats on:
                   </p>
                 </div>
@@ -270,7 +269,7 @@
                     <span
                       v-for="topic in member.peerSupport.topics"
                       :key="topic"
-                      class="px-2 py-0.5 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-200 rounded text-xs border border-purple-300 dark:border-purple-500/40"
+                      class="px-2 py-0.5 bg-candlelight-900/20 text-candlelight-400 rounded text-xs border border-candlelight-500/40"
                     >
                       {{ topic }}
                     </span>
@@ -295,13 +294,13 @@
 
                 <!-- Contact Section -->
                 <div v-if="member.peerSupport.slackUsername" class="space-y-2">
-                  <p class="text-sm text-purple-300 font-medium">
+                  <p class="text-sm text-candlelight-500 font-medium">
                     Book a Peer Support call now:
                   </p>
                   <a
                     :href="`slack://user?team=T03A96LV4&id=${member.slackUserId}`"
                     @click.prevent="openSlackDM(member)"
-                    class="inline-block px-3 py-1.5 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded border border-purple-300 dark:border-purple-500/30 hover:bg-purple-200 dark:hover:bg-purple-500/30 transition-colors text-sm font-medium cursor-pointer"
+                    class="inline-block px-3 py-1.5 bg-candlelight-900/20 text-candlelight-500 rounded border border-candlelight-500/30 hover:bg-candlelight-900/30 transition-colors text-sm font-medium cursor-pointer"
                   >
                     Message {{ member.peerSupport.slackUsername }} on Slack
                   </a>
@@ -314,14 +313,14 @@
                 class="space-y-4"
               >
                 <h4
-                  class="text-sm font-semibold text-purple-300 uppercase tracking-wide"
+                  class="text-ui-label text-candlelight-500"
                 >
                   Skills Exchange
                 </h4>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <!-- Offering -->
                   <div v-if="member.offering" class="space-y-2">
-                    <h5 class="text-xs font-semibold text-purple-400 uppercase">
+                    <h5 class="text-ui-label text-candlelight-400 text-xs">
                       Can share
                     </h5>
                     <p
@@ -339,7 +338,7 @@
                       <span
                         v-for="tag in member.offering.tags"
                         :key="tag"
-                        class="px-2 py-0.5 bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300 rounded text-xs border border-green-300 dark:border-green-500/30"
+                        class="px-2 py-0.5 bg-candlelight-900/20 text-candlelight-500 rounded text-xs border border-candlelight-500/30"
                       >
                         {{ tag }}
                       </span>
@@ -348,7 +347,7 @@
 
                   <!-- Looking For -->
                   <div v-if="member.lookingFor" class="space-y-2">
-                    <h5 class="text-xs font-semibold text-purple-400 uppercase">
+                    <h5 class="text-ui-label text-candlelight-400 text-xs">
                       Looking to learn
                     </h5>
                     <p
@@ -367,7 +366,7 @@
                       <span
                         v-for="tag in member.lookingFor.tags"
                         :key="tag"
-                        class="px-2 py-0.5 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 rounded text-xs border border-blue-300 dark:border-blue-500/30"
+                        class="px-2 py-0.5 bg-guild-800 text-guild-200 rounded text-xs border border-guild-600"
                       >
                         {{ tag }}
                       </span>
@@ -410,9 +409,9 @@
         <!-- Not Authenticated Notice -->
         <div
           v-if="!isAuthenticated && members.length > 0"
-          class="mt-8 backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-6 text-center"
+          class="mt-8 backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-6 text-center"
         >
-          <p class="text-purple-200 mb-4">
+          <p class="text-guild-200 mb-4">
             🔒 Some member information is visible to members only
           </p>
           <div class="flex gap-3 justify-center">
@@ -458,6 +457,16 @@ const circleLabels = {
   practitioner: "Practitioner",
 };
 
+// Map circle names to badge classes
+const circleBadgeClass = (circle) => {
+  const classes = {
+    community: 'circle-badge-community',
+    founder: 'circle-badge-founder',
+    practitioner: 'circle-badge-practitioner',
+  };
+  return classes[circle] || 'circle-badge-community';
+};
+
 // Peer support filter options
 const peerSupportOptions = [
   { label: "All Members", value: "all" },
diff --git a/app/pages/series/[id].vue b/app/pages/series/[id].vue
index d0d4924..4a5d8ca 100644
--- a/app/pages/series/[id].vue
+++ b/app/pages/series/[id].vue
@@ -28,7 +28,7 @@
 
     <div v-else>
       <!-- Page Header -->
-      <PageHeader :title="series.title" theme="purple" size="large" />
+      <PageHeader :title="series.title" size="large" />
 
       <!-- Series Meta -->
       <section class="py-20 bg-[--ui-bg]">
@@ -106,9 +106,9 @@
             <!-- Status Message -->
             <div
               v-if="series?.statistics?.isOngoing"
-              class="p-4 bg-green-500/10 border border-green-500/30 rounded mb-8"
+              class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded mb-8"
             >
-              <p class="text-green-600 dark:text-green-400 font-semibold mb-1">
+              <p class="text-candlelight-500 dark:text-candlelight-400 font-semibold mb-1">
                 This series is currently ongoing!
               </p>
               <p class="text-sm text-[--ui-text-muted]">
@@ -118,9 +118,9 @@
 
             <div
               v-else-if="series?.statistics?.isUpcoming"
-              class="p-4 bg-blue-500/10 border border-blue-500/30 rounded mb-8"
+              class="p-4 bg-guild-500/10 border border-guild-500/30 rounded mb-8"
             >
-              <p class="text-blue-600 dark:text-blue-400 font-semibold mb-1">
+              <p class="text-guild-300 dark:text-guild-300 font-semibold mb-1">
                 This series is starting soon!
               </p>
               <p class="text-sm text-[--ui-text-muted]">
@@ -130,7 +130,7 @@
 
             <div
               v-else-if="series?.statistics?.isCompleted"
-              class="p-4 bg-gray-500/10 border border-gray-500/30 rounded mb-8"
+              class="p-4 bg-guild-500/10 border border-guild-500/30 rounded mb-8"
             >
               <p class="text-[--ui-text] font-semibold mb-1">
                 This series has concluded.
@@ -148,7 +148,7 @@
       <section v-if="series?.tickets?.enabled" class="py-20 bg-[--ui-bg]">
         <UContainer>
           <div class="max-w-4xl mx-auto">
-            <h2 class="text-2xl font-bold text-[--ui-text] mb-8">
+            <h2 class="text-display-sm font-bold text-[--ui-text] mb-8">
               Get Your Series Pass
             </h2>
             <SeriesPassPurchase
@@ -172,7 +172,7 @@
       <section class="py-20 bg-[--ui-bg-elevated]">
         <UContainer>
           <div class="max-w-4xl mx-auto">
-            <h2 class="text-2xl font-bold text-[--ui-text] mb-8">
+            <h2 class="text-display-sm font-bold text-[--ui-text] mb-8">
               Event Schedule
             </h2>
 
@@ -357,19 +357,19 @@ const formatSeriesType = (type) => {
 const getSeriesTypeBadgeClass = (type) => {
   const classes = {
     workshop_series:
-      "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
     recurring_meetup:
-      "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/30",
+      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
     multi_day:
-      "bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/30",
+      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
     course:
-      "bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
     tournament:
-      "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30",
+      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
   };
   return (
     classes[type] ||
-    "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30"
+    "bg-earth-900/20 text-earth-400 dark:text-earth-400 border border-earth-700/30"
   );
 };
 
@@ -383,14 +383,14 @@ const getSeriesStatusText = () => {
 
 const getSeriesStatusClass = () => {
   if (!series.value?.statistics)
-    return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/30";
+    return "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30";
   if (series.value.statistics.isOngoing)
-    return "bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/30";
+    return "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30";
   if (series.value.statistics.isUpcoming)
-    return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/30";
+    return "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30";
   if (series.value.statistics.isCompleted)
-    return "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30";
-  return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/30";
+    return "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30";
+  return "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30";
 };
 
 const formatEventDate = (date) => {
@@ -436,15 +436,15 @@ const getEventStatusClass = (event) => {
   const status = getEventStatus(event);
   const classes = {
     Upcoming:
-      "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/30",
+      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
     Ongoing:
-      "bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
     Completed:
-      "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30",
+      "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30",
   };
   return (
     classes[status] ||
-    "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30"
+    "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30"
   );
 };
 
@@ -452,15 +452,15 @@ const getEventTimelineColor = (event) => {
   const status = getEventStatus(event);
   const classes = {
     Upcoming:
-      "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30",
+      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border-guild-500/30",
     Ongoing:
-      "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border-candlelight-700/30",
     Completed:
-      "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30",
+      "bg-earth-900/20 text-earth-400 dark:text-earth-400 border-earth-700/30",
   };
   return (
     classes[status] ||
-    "bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/30"
+    "bg-guild-500/10 text-guild-400 dark:text-guild-400 border-guild-500/30"
   );
 };
 
diff --git a/app/pages/series/index.vue b/app/pages/series/index.vue
index 9cf14f4..8e2d00b 100644
--- a/app/pages/series/index.vue
+++ b/app/pages/series/index.vue
@@ -4,7 +4,6 @@
     <PageHeader
       title="Event Series"
       subtitle="Discover our multi-event series designed to take you on a journey of learning and growth"
-      theme="purple"
       size="large"
     />
 
@@ -46,16 +45,16 @@
                       :class="[
                         'inline-flex items-center px-2 py-1 rounded text-xs font-medium',
                         series.status === 'active'
-                          ? 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/30'
+                          ? 'bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30'
                           : series.status === 'upcoming'
-                            ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/30'
-                            : 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30',
+                            ? 'bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30'
+                            : 'bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30',
                       ]"
                     >
                       {{ series.status }}
                     </span>
                   </div>
-                  <h2 class="text-2xl font-bold text-[--ui-text] mb-2">
+                  <h2 class="text-display-sm font-bold text-[--ui-text] mb-2">
                     {{ series.title }}
                   </h2>
                   <p class="text-[--ui-text-muted] leading-relaxed">
@@ -87,7 +86,7 @@
                 <div class="flex items-center justify-between gap-4">
                   <div class="flex items-center gap-4 flex-1 min-w-0">
                     <div
-                      class="w-8 h-8 bg-purple-500/10 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 border border-purple-500/30"
+                      class="w-8 h-8 bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 border border-candlelight-700/30"
                     >
                       {{ event.series?.position || "?" }}
                     </div>
@@ -179,7 +178,7 @@
             name="heroicons:squares-2x2"
             class="w-16 h-16 text-[--ui-text-muted] mx-auto mb-4 opacity-50"
           />
-          <h3 class="text-xl font-semibold text-[--ui-text] mb-2">
+          <h3 class="text-display-sm font-semibold text-[--ui-text] mb-2">
             No Event Series Available
           </h3>
           <p class="text-[--ui-text-muted] max-w-md mx-auto">
@@ -233,19 +232,19 @@ const formatSeriesType = (type) => {
 const getSeriesTypeBadgeClass = (type) => {
   const classes = {
     workshop_series:
-      "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
     recurring_meetup:
-      "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/30",
+      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
     multi_day:
-      "bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/30",
+      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
     course:
-      "bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
     tournament:
-      "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30",
+      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
   };
   return (
     classes[type] ||
-    "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30"
+    "bg-earth-900/20 text-earth-400 dark:text-earth-400 border border-earth-700/30"
   );
 };
 
@@ -292,15 +291,15 @@ const getEventStatusClass = (event) => {
   const status = getEventStatus(event);
   const classes = {
     Upcoming:
-      "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/30",
+      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
     Ongoing:
-      "bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/30",
+      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
     Completed:
-      "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30",
+      "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30",
   };
   return (
     classes[status] ||
-    "bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/30"
+    "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30"
   );
 };
 </script>
diff --git a/app/pages/welcome.vue b/app/pages/welcome.vue
index d95af7e..c7ad4fe 100644
--- a/app/pages/welcome.vue
+++ b/app/pages/welcome.vue
@@ -3,7 +3,6 @@
     <PageHeader
       title="Welcome to Ghost Guild"
       subtitle="You're officially part of the community!"
-      theme="purple"
       size="large"
     />
 
@@ -26,7 +25,7 @@
                 class="w-full h-full object-contain"
               />
             </div>
-            <h2 class="text-2xl font-bold text-guild-100 mb-4">
+            <h2 class="text-display font-bold text-guild-100 mb-4">
               Hey {{ memberData?.name || "there" }}!
             </h2>
             <p class="text-lg text-guild-300 max-w-2xl mx-auto">
@@ -38,15 +37,15 @@
           <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
             <div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
               <div
-                class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4"
+                class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
               >
                 <Icon
                   name="heroicons:user-circle"
-                  class="w-6 h-6 text-purple-400"
+                  class="w-6 h-6 text-candlelight-400"
                 />
               </div>
               <h3 class="font-semibold text-guild-100 mb-2">
-                1. Complete Your Profile
+                <span class="text-ui-label text-candlelight-400 mr-2">1.</span>Complete Your Profile
               </h3>
               <p class="text-sm text-guild-400 mb-4">
                 Tell the community about yourself, your skills, and what you're
@@ -59,15 +58,15 @@
 
             <div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
               <div
-                class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4"
+                class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
               >
                 <Icon
                   name="heroicons:calendar-days"
-                  class="w-6 h-6 text-blue-400"
+                  class="w-6 h-6 text-candlelight-400"
                 />
               </div>
               <h3 class="font-semibold text-guild-100 mb-2">
-                2. Join an Event
+                <span class="text-ui-label text-candlelight-400 mr-2">2.</span>Join an Event
               </h3>
               <p class="text-sm text-guild-400 mb-4">
                 From workshops to game nights, events are the heart of our
@@ -80,12 +79,12 @@
 
             <div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
               <div
-                class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4"
+                class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
               >
-                <Icon name="heroicons:users" class="w-6 h-6 text-green-400" />
+                <Icon name="heroicons:users" class="w-6 h-6 text-candlelight-400" />
               </div>
               <h3 class="font-semibold text-guild-100 mb-2">
-                3. Meet the Community
+                <span class="text-ui-label text-candlelight-400 mr-2">3.</span>Meet the Community
               </h3>
               <p class="text-sm text-guild-400 mb-4">
                 Connect with other members and find peers for support and
@@ -101,7 +100,7 @@
           <div
             class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
           >
-            <h3 class="text-xl font-bold text-guild-100 mb-4">
+            <h3 class="text-display-sm font-bold text-guild-100 mb-4">
               Understanding Circles
             </h3>
             <p class="text-guild-300 mb-6">
@@ -115,7 +114,7 @@
                 class="p-4 rounded-lg"
                 :class="
                   memberData?.circle === 'community'
-                    ? 'bg-purple-500/20 border border-purple-500/50'
+                    ? 'circle-surface-community border border-[var(--color-circle-community)]/50'
                     : 'bg-guild-800/50'
                 "
               >
@@ -123,7 +122,7 @@
                   Community Circle
                   <span
                     v-if="memberData?.circle === 'community'"
-                    class="text-purple-400 text-sm ml-2"
+                    class="text-candlelight-400 text-sm ml-2"
                     >← You're here</span
                   >
                 </h4>
@@ -137,7 +136,7 @@
                 class="p-4 rounded-lg"
                 :class="
                   memberData?.circle === 'founder'
-                    ? 'bg-purple-500/20 border border-purple-500/50'
+                    ? 'circle-surface-founder border border-[var(--color-circle-founder)]/50'
                     : 'bg-guild-800/50'
                 "
               >
@@ -145,7 +144,7 @@
                   Founder Circle
                   <span
                     v-if="memberData?.circle === 'founder'"
-                    class="text-purple-400 text-sm ml-2"
+                    class="text-candlelight-400 text-sm ml-2"
                     >← You're here</span
                   >
                 </h4>
@@ -159,7 +158,7 @@
                 class="p-4 rounded-lg"
                 :class="
                   memberData?.circle === 'practitioner'
-                    ? 'bg-purple-500/20 border border-purple-500/50'
+                    ? 'circle-surface-practitioner border border-[var(--color-circle-practitioner)]/50'
                     : 'bg-guild-800/50'
                 "
               >
@@ -167,7 +166,7 @@
                   Practitioner Circle
                   <span
                     v-if="memberData?.circle === 'practitioner'"
-                    class="text-purple-400 text-sm ml-2"
+                    class="text-candlelight-400 text-sm ml-2"
                     >← You're here</span
                   >
                 </h4>
@@ -183,17 +182,17 @@
           <div
             class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
           >
-            <h3 class="text-xl font-bold text-guild-100 mb-4">
+            <h3 class="text-display-sm font-bold text-guild-100 mb-4">
               Resources & Support
             </h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div class="flex items-start gap-4">
                 <div
-                  class="w-10 h-10 bg-amber-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
+                  class="w-10 h-10 bg-candlelight-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
                 >
                   <Icon
                     name="heroicons:book-open"
-                    class="w-5 h-5 text-amber-400"
+                    class="w-5 h-5 text-candlelight-400"
                   />
                 </div>
                 <div>
@@ -218,11 +217,11 @@
 
               <div class="flex items-start gap-4">
                 <div
-                  class="w-10 h-10 bg-pink-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
+                  class="w-10 h-10 bg-ember-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
                 >
                   <Icon
                     name="heroicons:chat-bubble-left-right"
-                    class="w-5 h-5 text-pink-400"
+                    class="w-5 h-5 text-ember-400"
                   />
                 </div>
                 <div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index eadc666..6366961 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,6 +10,13 @@ export default defineNuxtConfig({
     domain: "ghostguild.org",
   },
   css: ["~/assets/css/main.css"],
+  vite: {
+    server: {
+      hmr: {
+        port: 24678,
+      },
+    },
+  },
   runtimeConfig: {
     // Private keys (server-side only)
     mongodbUri:
diff --git a/public/background-dither.webp b/public/background-dither.webp
new file mode 100644
index 0000000..882bd9a
Binary files /dev/null and b/public/background-dither.webp differ
diff --git a/server/routes/oidc/interaction/login.post.ts b/server/routes/oidc/interaction/login.post.ts
index 42fb052..539337d 100644
--- a/server/routes/oidc/interaction/login.post.ts
+++ b/server/routes/oidc/interaction/login.post.ts
@@ -59,7 +59,7 @@ export default defineEventHandler(async (event) => {
           <p style="color: #bfb3a2;">Click the button below to sign in:</p>
           <div style="text-align: center; margin: 30px 0;">
             <a href="${baseUrl}/oidc/interaction/verify?token=${token}"
-               style="background-color: #9a6f2c; color: #f0ebe4; padding: 12px 24px; text-decoration: none; border-radius: 6px; display: inline-block; font-weight: 600;">
+               style="background-color: #d09e4e; color: #1a1510; padding: 12px 24px; text-decoration: none; border-radius: 6px; display: inline-block; font-weight: 700;">
               Sign In
             </a>
           </div>