diff --git a/src/uix/eidos/lib/themes/base.ts b/src/uix/eidos/lib/themes/base.ts
index 69ff05286..d7e2bf312 100644
--- a/src/uix/eidos/lib/themes/base.ts
+++ b/src/uix/eidos/lib/themes/base.ts
@@ -32,7 +32,9 @@ export const THEME_BASE_COLOR_ROLES: ColorRoleMap = {
 	fulfill: 'green',
 	risk: 'orange',
 	threat: 'red',
-	loss: 'purple'
+	// `plum` (canonical loss) — distinct from primary=purple. (Was `purple`, which
+	// collided with primary. plum is a graver, more magenta violet.)
+	loss: 'plum'
 }
 
 export const THEME_BASE_LIGHT_COLOR_SCALES: ColorScales = {
diff --git a/web/routes/temas/grafito/+page.svelte b/web/routes/temas/grafito/+page.svelte
index 3bddb9c9b..3eb850210 100644
--- a/web/routes/temas/grafito/+page.svelte
+++ b/web/routes/temas/grafito/+page.svelte
@@ -90,7 +90,10 @@
 	const CHIP_VARIANTS = ['soft', 'solid', 'outline', 'ghost'] as const
 	const BADGE_COLORS = ['primary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as const
 	// Override por componente: cualquier escala de la paleta.
-	const OVERRIDE_COLORS = ['indigo', 'jade', 'crimson', 'amber', 'teal', 'plum'] as const
+	// A component's color comes from two real axes (NOT arbitrary scale names):
+	// `color` = hierarchy override, `intent` = evaluative / semantic palette.
+	const HIERARCHY_OVERRIDES = ['primary', 'secondary', 'neutral'] as const
+	const INTENT_OVERRIDES = ['affirm', 'fulfill', 'risk', 'threat', 'loss'] as const
 
 	// ── Lectura de valores en runtime (precisión) ─────────────────────
 	let hex = $state<Record<string, string>>({})
@@ -355,12 +358,19 @@
 				<div data-spec-surface style="border-color: var(--color-border-strong); border-width: 2px"><span>border</span><code>strong</code></div>
 			</div>
 
-			<p data-spec-label>Override por componente · cualquier escala de la paleta</p>
+			<p data-spec-label>Override jerárquico · prop <code>color</code></p>
 			<div data-spec-cluster>
-				{#each OVERRIDE_COLORS as c}
+				{#each HIERARCHY_OVERRIDES as c}
 					<Button color={c} variant="soft">{c}</Button>
 				{/each}
 			</div>
+
+			<p data-spec-label>Color semántico · prop <code>intent</code></p>
+			<div data-spec-cluster>
+				{#each INTENT_OVERRIDES as it}
+					<Button intent={it} variant="soft">{it}</Button>
+				{/each}
+			</div>
 		</section>
 
 		<!-- ═══ 02 · Tipografía ══════════════════════════════════════ -->