ADR 0008 — Identidad visual "Navy & Coral" para ARI Shopping¶
Estado: aceptada, con enmienda de paleta (ver §8) — sub-fases 1 a 4 completas, sub-fase 5 parcial (ver §9) Fecha: 2026-08-27 (enmendada 2026-09-06) Reemplaza a: ADR 0007 (Opción 2, "Atelier cálido")
Nota de vigencia: la paleta descrita en §4 ("Navy & Coral": marino
#122844/ coral#D85A30/ coral claro#F0997B) fue la dirección aprobada e implementada en las sub-fases 1-3, pero fue reemplazada el mismo día por una paleta azul/amarillo estilo Walmart (ramafix/adr0008-walmart-palette-blue-yellow, ver §8). Los valores reales en producción hoy están en §8, no en §4. Se deja §4 intacto como registro histórico de la decisión original.
1. Contexto¶
Este es el tercer intento de identidad visual propia para ARI Shopping, después de dos ciclos de implementar-y-descartar en producción (ver cronología en §2). El costo real de esos dos ciclos no fue el tiempo de escribir el código, fue el tiempo de verlo mal en producción antes de poder juzgarlo — y en ambos casos el veredicto real no era sobre la paleta en sí, sino sobre verla mezclada con partes del sitio que todavía no se habían tocado.
2. Cronología completa¶
- Arcoíris original — la identidad "juguetería" con la que arrancó
el storefront: paleta de alta saturación (cian/violeta/fucsia/ámbar/
amarillo/lima),
rounded-fullen casi todo,font-blackcomo default. Nunca fue una decisión de marca, era el estado por defecto del scaffold inicial. - Intento de clon de Amazon (descartado antes de implementarse) — la primera versión de ADR 0007 proponía clonar la estética visual de un competidor directamente. Se corrigió a adoptar principios de UX (jerarquía, densidad, señales de confianza), no la estética de nadie — ver la memoria de este cambio de dirección.
- Terracota/espresso/pino/crema + Fraunces ("cálido, confiable,
ligeramente lúdico") — se implementó como smoke test aislado en
producción (v1.0.176: solo el botón CTA de
ProductCarden terracota + precio en Fraunces, todo lo demás sin tocar) y se revirtió. Dos motivos reales: (a) un token aislado rodeado del resto del esquema viejo (badges fucsia/amarillo neón) no es evaluable — el choque visual no era "la dirección de marca", era la mezcla incompleta; (b) terracota + serif cálida leía como rústico/ artesanal, y el objetivo era premium/serio. - Ciruela/carbón/cobre "Atelier cálido" (ADR 0007, Opción 2 de 3) —
esta vez la implementación cubrió un conjunto completo de
componentes que se ven juntos en la misma pantalla (tokens base,
button.tsx,badge.tsx,product-card.tsx,catalog-client.tsx), evitando el error de proceso del punto anterior. Aun así, header, footer, home y página de producto/drawers quedaron deliberadamente pendientes de una siguiente pasada (ADR 0007 §7). Resultado: se descartó — no convenció combinada con el resto del sitio sin cambiar. El catálogo aislado se veía coherente, pero el sitio completo (con el header/footer viejos alrededor) seguía sin leerse como una marca terminada. - "Navy & Coral" (esta dirección, final) — marino/coral/coral claro + Poppins para momentos de marca. Ver especificación completa en §4.
3. Mejora de proceso: validar barato antes de implementar¶
A diferencia de los dos intentos anteriores, esta dirección se validó visualmente con el usuario mediante mockups de referencia simulados fuera de este entorno, antes de tocar código real. Ningún ciclo de implementación se gastó en generar opciones que después se descartarían por gusto — el código de esta ADR se escribe ya sobre una dirección aprobada.
Esto vale la pena dejarlo como práctica para el playbook de diseño de este proyecto: cuando el costo de deshacer una implementación en producción es alto (como pasó en los puntos 3 y 4 de §2), vale la pena invertir primero en una validación visual barata y rápida (mockup, preview, captura) antes de comprometer ciclos de implementación real, en vez de decidir la dirección mientras se implementa.
4. Especificación de marca¶
Paleta¶
| Rol | Token | Valor |
|---|---|---|
| Ancla (header, footer, badge "Nuevo", fondo de hero) | --color-ari-marino |
#122844 |
| Acento único de acción (CTA "Agregar al carrito", precio destacado) | --color-ari-coral |
#D85A30 |
| Acento secundario (subtítulos sobre marino, ala inferior del isotipo) | --color-ari-coral-claro |
#F0997B |
| Fondo general | — | #FFFFFF (blanco puro; reemplaza --color-ari-hueso) |
| Texto secundario / bordes | escala slate-* ya usada en el proyecto |
sin token nuevo |
Tipografía¶
- Poppins, peso 700 — solo para los "momentos de marca": wordmark
del logo, títulos de sección (
h1/h2), precio de producto, texto de CTA. Es el único peso que se carga. - Inter (ya integrada) se mantiene para body/UI/navegación — no todo el sitio pasa a Poppins.
- Domine (Opción 2 de ADR 0007) se elimina por completo, incluida su
carga vía
next/font.
Isotipo¶
Mariposa geométrica simplificada, construida con 4 elipses (no el filigrana intrincado del logo original, que se perdía en tamaños chicos):
| Elemento | Parámetros | Color |
|---|---|---|
| Ala superior izquierda | elipse rx=9 ry=7, cx=10 cy=8, rotada -18° |
#D85A30 |
| Ala superior derecha | elipse rx=9 ry=7, cx=24 cy=8, rotada 18° |
#D85A30 |
| Ala inferior izquierda | elipse rx=6 ry=5, cx=12 cy=16, rotada -10° |
#F0997B |
| Ala inferior derecha | elipse rx=6 ry=5, cx=22 cy=16, rotada 10° |
#F0997B |
| Cuerpo | rectángulo x=16 y=3 width=2 height=18, redondeado |
#122844 |
Coordenadas base sobre viewBox 34x24, sobre fondo circular marino.
Wordmark "ARI" (Poppins 700, blanco) + "shopping" debajo (Poppins 700,
#F0997B, más chico, letter-spacing amplio).
Assets: public/images/brand/logo-ari.svg (lockup completo,
reemplaza logo-ari.png) y app/icon.svg (versión reducida — solo
círculo + mariposa, sin wordmark — favicon/app icon vía la convención
de Next.js App Router).
5. Hallazgo: causa raíz del estado mixto anterior¶
Al auditar navbar.tsx para esta implementación se encontró que,
desde el arranque de este proyecto de reskin, nunca se había tocado:
una barra superior con gradiente from-amber-300 via-yellow-200
to-lime-200 y una línea decorativa from-cyan-400 via-violet-500
to-fuchsia-500, ambas del esquema arcoíris original (punto 1 de §2).
Esto confirma que el "estado mixto" visto en producción durante ADR
0007 no era solo "header pendiente de una pasada futura" en abstracto
— eran restos concretos y nunca inventariados del esquema anterior,
conviviendo con cada iteración de paleta desde entonces sin que nadie
los marcara como deuda. Se eliminan en la sub-fase 2 de esta
implementación.
6. Plan de implementación¶
Por sub-fases, cada una con rama fix/*, diff mostrado y PR sin
mergear hasta confirmación explícita del usuario. Cada sub-fase debe
dejar el sitio en un estado internamente coherente (no fragmentos
aislados en producción — la lección de los puntos 3 y 4 de §2) y debe
confirmar con evidencia real (no supuesta) que el flujo de
auto-refresh desde Medusa Admin (precio/descripción/imagen) sigue
funcionando.
- Tokens base + logo (
globals.css,logo-ari.svg, favicon). - Header + footer (
navbar.tsx— incluida la limpieza de §5 —,footer.tsx, logo aplicado). - Product card + grid de catálogo + badges.
- Home (hero, tiles de categoría, secciones).
- Página de producto + drawers de carrito/wishlist.
Nota de implementación: alias de compatibilidad de tokens¶
La sub-fase 1 solo toca globals.css/layout.tsx/assets — no
catalog-client.tsx, product-card.tsx ni button.tsx, que hoy
siguen usando los nombres de token de ADR 0007
(ari-ciruela, ari-carbon-oscuro, ari-cobre, ari-carbon,
ari-terracota-oscuro, ari-hueso). Para no dejar esos usos sin
estilo entre sub-fases, globals.css define esos nombres como alias
temporales resueltos ya contra la paleta nueva. Cada sub-fase que
toque esos archivos reemplaza el nombre de clase por el token
definitivo; los alias se eliminan por completo al cerrar la sub-fase
5.
7. Consecuencias¶
- El sitio completo adopta la paleta nueva en un solo despliegue desde la sub-fase 1 (vía los alias de §6), incluso antes de que cada componente migre al nombre de token definitivo — evita repetir el error de "token aislado rodeado del esquema viejo" de los puntos 3 y 4 de §2.
- Domine y su carga de fuente se eliminan; Poppins se agrega mínimo (solo peso 700).
- Trabajo puramente de frontend: no requiere cambios en
commerce-backend,platform-infra, ni CI nuevo. docs-portalse actualiza con capturas/descripción del resultado final una vez cada sub-fase esté validada en producción, no antes.
8. Enmienda 2026-08-27 tarde: pivote de paleta a azul/amarillo¶
Horas después de mergear la sub-fase 3 (product card + grid), se
mergeó fix/adr0008-walmart-palette-blue-yellow: la paleta "Navy &
Coral" de §4 se descartó en producción y se reemplazó por una paleta
azul/amarillo (mismo patrón "estética Walmart" ya usado como
referencia de UX en ADR 0007). Esta decisión no quedó documentada
como enmienda en su momento — se detecta y se registra aquí recién
el 2026-09-06, al auditar el estado real del código contra este
documento.
Valores reales en globals.css hoy (los nombres de token de §4 se
conservan, pero apuntan a estos valores, no a los de la tabla
original):
| Token | Valor real | Uso |
|---|---|---|
--color-ari-marino |
#0055B8 (azul) |
ancla: header, footer, fondo de hero, botón de búsqueda |
--color-ari-coral |
#0055B8 (azul, mismo valor que marino) |
CTA "Agregar al carrito", precio destacado |
--color-ari-coral-claro |
#FFC220 (amarillo) |
badges de oferta/urgencia, acento del isotipo, botón "yellow" del hero |
Nota: ari-coral y ari-marino son el mismo azul (#0055B8) — a
diferencia de la especificación original de §4, donde marino y coral
eran colores distintos. Cualquier lectura de este ADR para decisiones
de diseño futuras debe partir de esta tabla, no de §4.
El isotipo (mariposa de 4 elipses, §4) tampoco se implementó como se
describe: el logo vigente es logo-ari-circular.svg (rama
adr0008-logo-circular-header), un lockup circular distinto al
descrito en la tabla de coordenadas de §4. logo-ari.svg (rectangular,
el que sí sigue la spec original) quedó sin usarse en el header.
9. Estado real por sub-fase (auditado 2026-09-06)¶
Auditoría contra el código en main, no contra el plan de §6.
| # | Sub-fase | Estado | Evidencia |
|---|---|---|---|
| 1 | Tokens base + logo | ✅ completa (con la paleta enmendada en §8, no la de §4) | globals.css, logo-ari.svg inicial, luego reemplazado por circular en sub-fase posterior |
| 2 | Header + footer (incl. limpieza de §5) | ✅ completa | navbar.tsx, restos arcoíris (gradiente ámbar/lima, línea cian/violeta/fucsia de §5) eliminados |
| 3 | Product card + grid + badges | ✅ completa | product-card.tsx en tokens ari-* |
| 4 | Home (hero, tiles, secciones) | ✅ completa | hero-carousel.tsx, category-tiles.tsx (varias iteraciones: pastel → scrim → foto flotante → foto más grande, todas mergeadas) |
| 5 | Página de producto + drawers de carrito/wishlist | ⚠️ parcial | product-purchase.tsx/página de producto sí migraron (rama adr0008-product-purchase-mobile-y-badge). cart-drawer.tsx y wishlist-drawer.tsx no tienen ningún token ari-* — nunca se tocaron. No hay rama mergeada que los mencione. |
Deuda abierta, no asumir resuelta:
- Los alias de compatibilidad de §6 (
ari-ciruela,ari-cobre,ari-carbon,ari-carbon-oscuro,ari-terracota-oscuro,ari-hueso) siguen en uso real enbutton.tsx(focus-visible:ring-ari-cobre/40,bg-ari-ciruela,hover:border-ari-cobre) — la condición de cierre de §6 ("los alias se eliminan por completo al cerrar la sub-fase 5") no se cumplió. Confirma que la sub-fase 5 no está cerrada, más allá de los drawers. - Ramas mergeadas fuera del plan original de 5 sub-fases de §6, sin
enmienda que las registre:
adr0008-megamenu-mobile-overflow,adr0008-club-ari-y-novedades,adr0008-club-ari-imagen-azul. Son trabajo real en producción, pero expanden el alcance de este ADR sin quedar documentado como tal. docs-portal(este documento) es la primera actualización desde el cierre de la sub-fase 3 — la condición de §7 ("se actualiza con capturas/descripción... una vez cada sub-fase esté validada") no se vino cumpliendo sub-fase por sub-fase como se planeó.