diff --git a/web/routes/temas/color/+page.svelte b/web/routes/temas/color/+page.svelte
index 9d905dc17..3ae6fd571 100644
--- a/web/routes/temas/color/+page.svelte
+++ b/web/routes/temas/color/+page.svelte
@@ -194,17 +194,6 @@
 		return out
 	})
 
-	// Split the roles by their on-solid TEXT pick (white vs dark) — the 2 groups.
-	const onSolidGroups = $derived.by((): { white: ColorRole[]; dark: ColorRole[] } => {
-		const white: ColorRole[] = []
-		const dark: ColorRole[] = []
-		for (const role of COLOR_ROLES) {
-			if (onSolidInfo(role).picked === 'dark') dark.push(role)
-			else white.push(role)
-		}
-		return { white, dark }
-	})
-
 	interface BuilderRole {
 		role: string
 		steps: string[]
@@ -501,9 +490,8 @@
 					El color del texto SOBRE el sólido (<code>--color-{'{role}'}-contrast</code>). El motor
 					prefiere <strong>blanco</strong> salvo que falle el suelo APCA (|Lc| &lt; 60) o WCAG (&lt; 3)
 					— entonces voltea a <strong>oscuro</strong>. El chip usa los tokens REALES; el pie muestra
-					el cálculo APCA en vivo. Se agrupan por el pick — <strong>texto blanco</strong> (sólidos
-					oscuros) y <strong>texto oscuro</strong> (sólidos claros); con el tema base solo risk va a
-					oscuro.
+					el cálculo APCA en vivo, agrupado en <strong>jerarquía</strong> e <strong>intents</strong>
+					como arriba. Solo voltea a oscuro en sólidos claros (con el tema base, solo risk).
 				</p>
 			</div>
 			{#snippet chipFor(role: ColorRole)}
@@ -516,18 +504,12 @@
 					<small>on-solid: {info.picked} · |Lc| {Math.abs(info.lc).toFixed(0)} · WCAG {info.wcag.toFixed(2)}</small>
 				</div>
 			{/snippet}
-			{#if onSolidGroups.white.length}
-				<div class="onsolid-group-label">Texto blanco <small>({onSolidGroups.white.length})</small></div>
-				<div class="onsolid-grid">
-					{#each onSolidGroups.white as role}{@render chipFor(role)}{/each}
-				</div>
-			{/if}
-			{#if onSolidGroups.dark.length}
-				<div class="onsolid-group-label">Texto oscuro <small>({onSolidGroups.dark.length})</small></div>
+			{#each GROUPS as group}
+				<div class="onsolid-group-label">{group.label} <small>({group.roles.length})</small></div>
 				<div class="onsolid-grid">
-					{#each onSolidGroups.dark as role}{@render chipFor(role)}{/each}
+					{#each group.roles as role}{@render chipFor(role)}{/each}
 				</div>
-			{/if}
+			{/each}
 		</section>
 
 		<!-- Superficies translúcidas — compositing-inverse alpha -->