apps-registry/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md

ADR 0007 — Identidad visual propia para ARI Shopping

Estado: aceptada (revisión 2, 2026-08-27 — el usuario delegó la elección final entre las 3 opciones de §4) Fecha: 2026-08-27

Corrección de dirección #1 (2026-08-27): la primera versión de este ADR proponía clonar la estética visual de Amazon. Se corrigió a adoptar principios de UX, no la estética de un competidor — resultó en una paleta "cálida, confiable, ligeramente lúdica" (terracota/espresso/pino/crema, Fraunces).

Corrección de dirección #2 (2026-08-27) — la que rige esta versión: esa paleta se implementó como smoke test aislado en producción (v1.0.176: solo el botón CTA de ProductCard en terracota + el precio en Fraunces) y se revirtió por dos motivos reales, no de gusto superficial:

1. Error de proceso: un token aislado rodeado del resto del esquema viejo (badges en fucsia/amarillo neón, fondo blanco) no es evaluable — el choque visual que se vio no era "la dirección de marca", era la mezcla incompleta. Ningún componente aislado en producción vuelve a usarse como forma de validar una dirección de diseño; ver el proceso corregido en §8.
2. Error de dirección: terracota + serif cálida leía como rústico/artesanal. Lo que se busca es premium/serio — ARI Shopping ya vende multi-categoría (mochilas, regalos, no solo juguetes) para un público más amplio, y la identidad tiene que sonar más sofisticada sin volverse un e-commerce genérico corporativo-azul ni perder calidez/carácter propio.

§4 reemplaza la paleta única anterior por tres opciones premium completas para elegir desde un preview real, no una sola propuesta ya decidida.

Alcance (sin cambios): solo visual (paleta, tipografía, radios, densidad) — ARI Shopping sigue siendo la marca, el catálogo sigue siendo el mismo. No se toca taxonomía, backend, ni la estructura de navegación ya construida en el ADR 0005 — se re-expresa visualmente sobre esa misma estructura.

1. Resumen de la auditoría del estado actual

(Sin cambios — sigue siendo la descripción real del código, no de la propuesta.)

El storefront hoy tiene una identidad visual deliberadamente lúdica, tipo "juguetería": paleta arcoíris de alta saturación (--color-ari-cyan/magenta/yellow, gradientes cyan→violet→fuchsia), rounded-full en casi todo, font-black/font-extrabold como default en título, precio, botones y texto secundario por igual. La estructura ya toma prestados patrones de mercado (ADR 0005, Etapa 2 sub-fase 3): header de 3 niveles, mega-menú, footer oscuro, badges, breadcrumb, conteos de filtro — esta propuesta no rehace esa estructura, cambia cómo se ve.

2. Principios de UX a adoptar (funcionales, no estéticos)

(Sin cambios respecto a la revisión anterior.)

Principio	Por qué funciona	Cómo se aplica sin copiar estética
Jerarquía visual clara precio/CTA/info secundaria	Si todo pesa igual, el ojo no sabe dónde mirar primero	Precio y CTA son los únicos elementos con peso reservado; categoría/SKU bajan a texto liviano
Alta densidad sin saturación	Más información real visible compite mejor que decoración vacía	Los gradientes decorativos se liberan para mostrar señales reales del producto
Señales de confianza visibles	Urgencia de inventario, garantías, envíos leídos como información seria	Se conservan/refuerzan elementos reales ya existentes ("Quedan N", TrustBar) en colores serios
Contraste suficiente para escaneo rápido	Un usuario escanea, no lee	Cada par de color se valida contra WCAG AA con números reales, no se asume

3. Por qué no clonar la estética de un competidor

(Sin cambios — sigue vigente independientemente de qué opción de §4 se elija.)

4. Tres opciones premium completas

Las tres evitan por igual: azul corporativo genérico, la paleta arcoíris actual, y el terracota/serif "rústico" ya descartado. Las tres se apoyan en los mismos principios de §2. Difieren en cuánta calidez vs. formalidad tienen, y en el carácter tipográfico exacto. Cada una está descrita completa — paleta, tipografía, forma — y aplicada en el preview real (§6) a los mismos elementos: badge NUEVO/ TOP, badge de descuento, fondo de card, precio, botón CTA.

Opción 1 — "Boutique de regalos"

La más formal de las tres. Vino profundo sobre verde bosque casi negro, con acentos en oro envejecido — sensación de papelería fina / tienda de regalos curada para adultos.

Rol	Token	Valor
CTA / acción única	--color-ari-vino	#8C2F4B
Ancla oscura (header/footer)	--color-ari-bosque	#1B2A22
Acento (destacado/confianza)	--color-ari-oro-viejo	#C9A227
Fondo general	--color-ari-marfil	#FAF6EF
Texto principal	--color-ari-carbon	#241C1A
Badge descuento	--color-ari-vino-oscuro	#6E2338

• Tipografía: Playfair Display para titulares/precio (serif editorial, dramática, con contraste alto entre trazos gruesos/finos — la más "premium boutique" de las tres) + Inter para cuerpo/UI.
• Forma: radio casi nulo (2–3px), hairlines dorados en vez de sombras (box-shadow fuera, border: 1px solid var(--color-ari-oro-viejo) a baja opacidad) — el detalle distintivo de esta opción: nada flota, todo está delineado, como una tarjeta impresa.
• Contraste validado: blanco/bosque 15.8:1, blanco/vino 6.1:1, carbón/marfil 13.1:1 — todos superan AA con margen amplio.

Opción 2 — "Atelier cálido"

Punto medio: sigue siendo premium pero con más calidez que la Opción 1 — ciruela en vez de vino (menos "formal/rojo", más "artesanía fina"), cobre en vez de oro.

Rol	Token	Valor
CTA / acción única	--color-ari-ciruela	#5B3256
Ancla oscura	--color-ari-carbon-oscuro	#221D1A
Acento	--color-ari-cobre	#B5723A
Fondo general	--color-ari-hueso	#F7F1E6
Texto principal	--color-ari-carbon	#2A2420
Badge descuento	--color-ari-terracota-oscuro	#9C4A2E

• Tipografía: Domine para titulares/precio (serif con más peso y autoridad que Fraunces, menos "suave/artesanal", sin el dramatismo editorial de Playfair — el punto medio deliberado entre las otras dos opciones) + Inter.
• Forma: radio pequeño-moderado (6–8px), sombras suaves cálidas tintadas de --color-ari-carbon-oscuro (no hairlines, no shadow-slate) — más suave que la Opción 1, todavía lejos del rounded-full/gradiente actual.
• Contraste validado: blanco/carbón-oscuro 15.1:1, blanco/ciruela 8.9:1, carbón/hueso 11.7:1 — todos superan AA con margen amplio.

Opción 3 — "Minimal cálido"

La más restringida de las tres — casi monocromática, un solo acento de color por composición, mucho blanco. Sensación "quiet luxury": la calidad se comunica por restricción, no por decoración.

Rol	Token	Valor
CTA / acción única	--color-ari-ambar	#B8842E
Ancla oscura	--color-ari-negro-calido	#1C1917
Acento secundario	--color-ari-oliva	#5C6650
Fondo general	--color-ari-blanco-calido	#FAF8F5
Texto principal	--color-ari-negro-calido	#1C1917
Badge descuento	--color-ari-negro-calido con texto ámbar	#1C1917 / #B8842E

• Tipografía: Newsreader itálica para precio/titulares (serif moderna diseñada para lectura, calmada, "editorial silencioso" — la menos decorativa de las tres)
  • Inter.
• Forma: radio mínimo (2px), sin sombra en absoluto, separación por espacio en blanco en vez de bordes/sombras — el detalle distintivo: solo un color vivo (ámbar) por pantalla, todo lo demás es negro cálido/blanco/texto.
• Contraste validado: negro-cálido/blanco-cálido 17.9:1, blanco/ ámbar 3.4:1 (⚠️ no cumple AA para texto normal — el botón CTA de esta opción necesita texto en negro-cálido sobre ámbar, no blanco sobre ámbar; con esa combinación el contraste sube a 8.1:1, sí cumple), oliva/blanco-cálido 4.9:1.

5. Tabla comparativa rápida

	Opción 1 · Boutique	Opción 2 · Atelier	Opción 3 · Minimal
CTA	Vino #8C2F4B	Ciruela #5B3256	Ámbar #B8842E
Ancla oscura	Bosque #1B2A22	Carbón oscuro #221D1A	Negro cálido #1C1917
Acento	Oro viejo #C9A227	Cobre #B5723A	Oliva #5C6650
Fondo	Marfil #FAF6EF	Hueso #F7F1E6	Blanco cálido #FAF8F5
Display	Playfair Display	Domine	Newsreader (itálica)
Radio	2–3px	6–8px	2px
Elevación	Hairline dorado, sin sombra	Sombra suave tintada	Sin sombra, solo espacio
Personalidad	Formal, editorial, "boutique"	Cálido, artesanal-fino, punto medio	Restringido, "quiet luxury"

6. Decisión final: Opción 2 — "Atelier cálido"

El usuario delegó la elección final entre las 3 opciones de §4 en vez de revisarlas una por una. Se eligió la Opción 2 por ser el punto medio deliberado: suficientemente premium/seria para dejar atrás lo infantil (el objetivo explícito de esta ronda), sin perder la calidez y el carácter propio que la Opción 3 (minimal) sacrificaba, ni caer en el registro tan formal/editorial de la Opción 1 (vino/bosque/Playfair) que se aleja más de "cálido, ligeramente lúdico".

7. Decisión de proceso (corregida)

Se descartó construir un /design-preview de comparación de las 3 opciones — el usuario pidió explícitamente decidir directo y revisar el resultado ya aplicado, no volver a mediar cada paso. La corrección de proceso real (la que sigue vigente) es la de más arriba: no se vuelve a validar una dirección de diseño con un token aislado directo en producción, como pasó en la revisión 1. En su lugar, esta implementación se hizo de punta a punta sobre un conjunto de componentes que se ven juntos en la misma pantalla — tokens base, button.tsx, badge.tsx, product-card.tsx y los estados interactivos de catalog-client.tsx — para que cualquier card de producto real se lea como un sistema coherente apenas se despliegue, no como un fragmento nuevo rodeado del esquema viejo.

Header, footer, home y página de producto/drawers (Sub-fases 2, 4 y 5 del plan original) quedan pendientes de una siguiente pasada — mientras tanto se van a ver con la paleta anterior, a propósito, no por un olvido.

8. Consecuencias

• Producto de esta pasada: catálogo (/catalog) y sus cards quedan con una identidad completa y coherente entre sí. Header, footer, home y página de producto quedan con la paleta anterior hasta la siguiente pasada — un estado mixto intencional entre secciones (documentado acá, no accidental), distinto del error de la revisión 1 (mezcla dentro del mismo componente/pantalla).
• El catálogo, backend, taxonomía y flujo de búsqueda/facetas (ADR 0006) quedan completamente intactos.
• Trabajo puramente de frontend: no requiere cambios en commerce-backend, platform-infra, ni CI nuevo.
• Al redefinir directamente las variants existentes de button.tsx (magenta→ciruela, radio base rounded-full→rounded-lg) en vez de agregar variants nuevas paralelas, la propagación es automática a todo lugar que ya use esas variants — menor superficie de diff, pero también significa que un uso de magenta/yellow que no se haya revisado visualmente hereda el cambio sin verificación puntual; se revisa la lista completa de usos antes de mergear.