diff --git a/.github/pages/package-lock.json b/.github/pages/package-lock.json
index c19606c..bb34cfa 100644
--- a/.github/pages/package-lock.json
+++ b/.github/pages/package-lock.json
@@ -813,6 +813,7 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.1.tgz",
       "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
         "debug": "^4.4.1",
@@ -863,6 +864,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1084,6 +1086,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1177,6 +1180,7 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.53.0.tgz",
       "integrity": "sha512-7dhHkSamGS2vtoBmIW2hRab+gl5Z60alEHZB4910ePqqJNxAWnDAxsofVmlZ2tREmWyHNE+A1nCKwICAquoD2A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1220,6 +1224,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
diff --git a/.github/pages/src/components/TokenField.svelte b/.github/pages/src/components/TokenField.svelte
index 02f0624..0e05c89 100644
--- a/.github/pages/src/components/TokenField.svelte
+++ b/.github/pages/src/components/TokenField.svelte
@@ -26,6 +26,7 @@
       <TokenTag
         {token}
         {tokenProperties}
+        {category}
         onremove={() => removeToken(category, index)}
         onupdate={(key, value) => updateToken(category, index, key, value)}
       />
diff --git a/.github/pages/src/components/TokenPopover.svelte b/.github/pages/src/components/TokenPopover.svelte
index 2f0657d..e4e7e07 100644
--- a/.github/pages/src/components/TokenPopover.svelte
+++ b/.github/pages/src/components/TokenPopover.svelte
@@ -1,8 +1,9 @@
 <script>
   import { untrack } from 'svelte';
   import { SWIFTUI_BUILTIN_STYLES } from '../lib/validation.js';
+  import { camelToWords } from '../lib/utils.js';
 
-  let { token, tokenProperties = [], onupdate, onclose } = $props();
+  let { token, tokenProperties = [], duplicateCategory = null, onupdate, onclose } = $props();
 
   // Local input values — initialized from token, never overwritten by re-renders
   let values = $state(
@@ -25,6 +26,8 @@
     SWIFTUI_BUILTIN_STYLES.has(values.style || token.name) && !values.style
   );
 
+  let showDuplicateWarning = $derived(duplicateCategory !== null);
+
   function handleKeydown(e) {
     if (e.key === 'Escape') onclose();
   }
@@ -40,6 +43,10 @@
     <div class="popover-warning">
       Shadows SwiftUI's built-in <code>.{token.name}</code> — set a custom style name below.
     </div>
+  {:else if showDuplicateWarning}
+    <div class="popover-warning">
+      Style name <code>.{values.style || token.name}</code> is already used by another token in {camelToWords(duplicateCategory)}. This will cause a compiler error.
+    </div>
   {/if}
   {#each tokenProperties as prop}
     <div class="popover-field">
diff --git a/.github/pages/src/components/TokenTag.svelte b/.github/pages/src/components/TokenTag.svelte
index 93d9ede..0251cbc 100644
--- a/.github/pages/src/components/TokenTag.svelte
+++ b/.github/pages/src/components/TokenTag.svelte
@@ -1,8 +1,9 @@
 <script>
   import TokenPopover from './TokenPopover.svelte';
-  import { hasBuiltinConflict } from '../lib/validation.js';
+  import { hasBuiltinConflict, findDuplicateStyleName } from '../lib/validation.js';
+  import { getAllStyles, getEnabledCategories } from '../lib/state.svelte.js';
 
-  let { token, tokenProperties = [], onremove, onupdate } = $props();
+  let { token, tokenProperties = [], category, onremove, onupdate } = $props();
 
   let showPopover = $state(false);
 
@@ -16,9 +17,11 @@
 
   let hasOverride = $derived(token.name !== token.style);
   let hasConflict = $derived(hasBuiltinConflict(token));
+  let duplicateCategory = $derived(findDuplicateStyleName(category, token, getAllStyles(), getEnabledCategories()));
+  let hasDuplicate = $derived(duplicateCategory !== null);
 </script>
 
-<span class="token-tag" class:has-override={hasOverride} class:has-conflict={hasConflict}>
+<span class="token-tag" class:has-override={hasOverride} class:has-conflict={hasConflict || hasDuplicate}>
   <span class="tag-name">{token.name}</span>
   {#if hasConflict}
     <span class="tag-warning" title="Shadows SwiftUI's built-in .{token.name} — open to set a custom style name">
@@ -26,6 +29,12 @@
         <path d="M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995A.905.905 0 018 5zm.002 6a1 1 0 110 2 1 1 0 010-2z"/>
       </svg>
     </span>
+  {:else if hasDuplicate}
+    <span class="tag-warning" title="Style name &quot;{token.style ?? token.name}&quot; conflicts with a token in {duplicateCategory} — open to set a different style name">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995A.905.905 0 018 5zm.002 6a1 1 0 110 2 1 1 0 010-2z"/>
+      </svg>
+    </span>
   {/if}
   <button class="tag-btn info-btn" onclick={togglePopover} aria-label="Edit token properties">
     <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
@@ -41,6 +50,7 @@
     <TokenPopover
       {token}
       {tokenProperties}
+      {duplicateCategory}
       onupdate={handleUpdate}
       onclose={() => showPopover = false}
     />
diff --git a/.github/pages/src/lib/state.svelte.js b/.github/pages/src/lib/state.svelte.js
index 51276d3..137e88d 100644
--- a/.github/pages/src/lib/state.svelte.js
+++ b/.github/pages/src/lib/state.svelte.js
@@ -68,6 +68,13 @@ export function getTokens(category) {
   return styles[category] ?? [];
 }
 
+/**
+ * Get all styles (for validation purposes).
+ */
+export function getAllStyles() {
+  return styles;
+}
+
 /**
  * Get a config property value.
  */
diff --git a/.github/pages/src/lib/validation.js b/.github/pages/src/lib/validation.js
index fab3438..5d68207 100644
--- a/.github/pages/src/lib/validation.js
+++ b/.github/pages/src/lib/validation.js
@@ -25,3 +25,36 @@ export const SWIFTUI_BUILTIN_STYLES = new Set([
 export function hasBuiltinConflict(token) {
   return token.name === token.style && SWIFTUI_BUILTIN_STYLES.has(token.style);
 }
+
+/**
+ * Check if a token has a duplicate style name across all enabled categories.
+ * Returns the conflicting category name if found, null otherwise.
+ * @param {string} currentCategory - The category of the current token
+ * @param {object} token - The token to check (must have name and style properties)
+ * @param {object} allStyles - Object with category keys and token array values
+ * @param {Set} enabledCategories - Set of enabled category names
+ * @returns {string|null} - The conflicting category name or null
+ */
+export function findDuplicateStyleName(currentCategory, token, allStyles, enabledCategories) {
+  const effectiveStyle = token.style ?? token.name;
+
+  for (const cat of enabledCategories) {
+    const tokens = allStyles[cat] ?? [];
+
+    for (const otherToken of tokens) {
+      const otherEffectiveStyle = otherToken.style ?? otherToken.name;
+
+      // Skip if it's the same token (same category and same name)
+      if (cat === currentCategory && otherToken.name === token.name) {
+        continue;
+      }
+
+      // Found a duplicate
+      if (effectiveStyle === otherEffectiveStyle) {
+        return cat;
+      }
+    }
+  }
+
+  return null;
+}