# ADR 0007 — Identidad visual propia para ARI Shopping **Estado:** reemplazada por [ADR 0008](0008-identidad-navy-coral.md) (2026-08-27) **Fecha:** 2026-08-27 > **Superseded (2026-08-27):** la Opción 2 "Atelier cálido" (ciruela/ > carbón/cobre + Domine) descrita en este ADR se descartó — no > convenció combinada con el resto del sitio sin cambiar (header, > footer, home y producto seguían con la paleta anterior, ver §7). El > ADR 0008 documenta la dirección final ("Navy & Coral") y su > cronología completa. Este documento se conserva como registro > histórico, sin editar el resto de su contenido. > **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](https://fonts.google.com/specimen/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](https://fonts.google.com/specimen/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](https://fonts.google.com/specimen/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.