From 814df2af531461c8eceebfde5d2e32d2eef48b30 Mon Sep 17 00:00:00 2001 From: Cristian Felipe Cruz Buitron Date: Thu, 27 Aug 2026 08:42:47 -0500 Subject: [PATCH] feat(ecommerce): ADR 0008 "Navy & Coral" - Sub-fase 1 (tokens + logo) Reemplaza ADR 0007 (Atelier calido, ciruela/carbon/cobre) tras dos ciclos de implementar-y-descartar en produccion. Esta vez la direccion se valido con mockups fuera de este entorno antes de tocar codigo. - globals.css: paleta marino/coral/coral-claro + alias temporales de los tokens de ADR 0007 (se resuelven ya contra la paleta nueva para no dejar catalog-client/product-card/button.tsx sin estilo hasta que cada sub-fase migre el nombre de clase; se eliminan en la sub-fase 5). - layout.tsx: Poppins peso 700 reemplaza a Domine en --font-display. - Nuevo isotipo (mariposa de 4 elipses) como logo-ari.svg (lockup) y app/icon.svg (favicon reducido, convencion Next.js App Router); favicon.png anterior eliminado por no estar referenciado. - docs: ADR 0008 con la cronologia completa y el hallazgo de los gradientes arcoiris nunca actualizados en navbar.tsx; ADR 0007 marcado como superseded sin borrar su contenido. Validado con npm ci + typecheck + lint + build de produccion via Docker (no hay node/npm en este shell) y verificando el CSS compilado: los alias resuelven a la paleta nueva y las utilities bg-ari-ciruela/text-ari-carbon/bg-ari-hueso se siguen generando. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01F8c83sjFBP7c4m4UVN5d3d --- .../0007-identidad-visual-propia.md | 10 +- .../decisiones/0008-identidad-navy-coral.md | 170 ++++++++++++++++++ workloads/docs-portal/mkdocs.yml | 1 + workloads/ecommerce/app/globals.css | 36 ++-- workloads/ecommerce/app/icon.svg | 14 ++ workloads/ecommerce/app/layout.tsx | 14 +- .../ecommerce/public/images/brand/favicon.png | Bin 8227 -> 0 bytes .../public/images/brand/logo-ari.svg | 15 ++ 8 files changed, 239 insertions(+), 21 deletions(-) create mode 100644 workloads/docs-portal/docs/decisiones/0008-identidad-navy-coral.md create mode 100644 workloads/ecommerce/app/icon.svg delete mode 100644 workloads/ecommerce/public/images/brand/favicon.png create mode 100644 workloads/ecommerce/public/images/brand/logo-ari.svg diff --git a/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md b/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md index 08eeb4a..d43cb65 100644 --- a/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md +++ b/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md @@ -1,8 +1,16 @@ # 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) +**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 — diff --git a/workloads/docs-portal/docs/decisiones/0008-identidad-navy-coral.md b/workloads/docs-portal/docs/decisiones/0008-identidad-navy-coral.md new file mode 100644 index 0000000..03ceef6 --- /dev/null +++ b/workloads/docs-portal/docs/decisiones/0008-identidad-navy-coral.md @@ -0,0 +1,170 @@ +# ADR 0008 — Identidad visual "Navy & Coral" para ARI Shopping + +**Estado:** aceptada (implementación en curso, por sub-fases) +**Fecha:** 2026-08-27 +**Reemplaza a:** [ADR 0007](0007-identidad-visual-propia.md) (Opción 2, "Atelier cálido") + +## 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 + +1. **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-full` en casi todo, `font-black` como + default. Nunca fue una decisión de marca, era el estado por defecto + del scaffold inicial. +2. **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. +3. **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 `ProductCard` en + 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. +4. **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. +5. **"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. + +1. Tokens base + logo (`globals.css`, `logo-ari.svg`, favicon). +2. Header + footer (`navbar.tsx` — incluida la limpieza de §5 —, + `footer.tsx`, logo aplicado). +3. Product card + grid de catálogo + badges. +4. Home (hero, tiles de categoría, secciones). +5. 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-portal` se actualiza con capturas/descripción del resultado + final una vez cada sub-fase esté validada en producción, no antes. diff --git a/workloads/docs-portal/mkdocs.yml b/workloads/docs-portal/mkdocs.yml index 1e2c324..d9c7d71 100644 --- a/workloads/docs-portal/mkdocs.yml +++ b/workloads/docs-portal/mkdocs.yml @@ -94,6 +94,7 @@ nav: - "0005 · Rediseño storefront": decisiones/0005-rediseno-storefront.md - "0006 · Motor de búsqueda y facetas": decisiones/0006-motor-busqueda-facetas.md - "0007 · Identidad visual propia": decisiones/0007-identidad-visual-propia.md + - "0008 · Identidad Navy & Coral": decisiones/0008-identidad-navy-coral.md - Plantilla ADR: decisiones/plantilla-adr.md - Playbooks: - Crashloop Medusa: playbooks/incidente-crashloop-medusa.md diff --git a/workloads/ecommerce/app/globals.css b/workloads/ecommerce/app/globals.css index 4c439a9..c657470 100644 --- a/workloads/ecommerce/app/globals.css +++ b/workloads/ecommerce/app/globals.css @@ -1,16 +1,26 @@ @import "tailwindcss"; @theme { - /* ADR 0007 (Opcion 2, "Atelier calido") -- identidad premium propia, - no derivada de ningun competidor. Ver - docs-portal/docs/decisiones/0007-identidad-visual-propia.md */ - --color-ari-ciruela: #5B3256; /* CTA -- unico uso reservado a accion */ - --color-ari-carbon-oscuro: #221D1A; /* ancla oscura: header/footer, badge "Nuevo" */ - --color-ari-cobre: #B5723A; /* acento: links, badge "Top", foco */ - --color-ari-hueso: #F7F1E6; /* fondo general */ - --color-ari-carbon: #2A2420; /* texto principal */ - --color-ari-terracota-oscuro: #9C4A2E; /* badge de descuento */ - --font-display: var(--font-domine), ui-serif, Georgia, serif; + /* ADR 0008 ("Navy & Coral") -- reemplaza ADR 0007 (Opcion 2, "Atelier + calido"). Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md */ + --color-ari-marino: #122844; /* ancla: header, footer, badge "Nuevo", fondo de hero */ + --color-ari-coral: #D85A30; /* acento unico de accion: CTA, precio destacado */ + --color-ari-coral-claro: #F0997B; /* acento secundario: subtitulos sobre marino, ala inferior del isotipo */ + + /* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los + siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx + (migracion pendiente en las sub-fases 3-5 del ADR 0008). Se resuelven + ya contra la paleta nueva para que ningun uso existente quede sin + estilo entre sub-fases; se eliminan por completo al cerrar la + sub-fase 5. No usar estos alias en código nuevo. */ + --color-ari-ciruela: var(--color-ari-coral); + --color-ari-carbon-oscuro: var(--color-ari-marino); + --color-ari-cobre: var(--color-ari-coral-claro); + --color-ari-carbon: var(--color-ari-marino); + --color-ari-terracota-oscuro: var(--color-ari-coral); + --color-ari-hueso: #FFFFFF; + + --font-display: var(--font-poppins), ui-sans-serif, system-ui, sans-serif; --animate-accordion-down: accordion-down .2s ease-out; --animate-accordion-up: accordion-up .2s ease-out; } @@ -21,10 +31,10 @@ :root { color-scheme: light; } * { border-color: rgb(226 232 240); } html { scroll-behavior: smooth; } -body { margin: 0; background: var(--color-ari-hueso); color: var(--color-ari-carbon); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } +body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } button, a { -webkit-tap-highlight-color: transparent; } -button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(181 114 58 / .5); outline-offset: 3px; } -::selection { background: rgb(91 50 86 / .2); color: var(--color-ari-carbon); } +button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(216 90 48 / .5); outline-offset: 3px; } +::selection { background: rgb(216 90 48 / .15); color: var(--color-slate-900); } .content-auto { content-visibility: auto; diff --git a/workloads/ecommerce/app/icon.svg b/workloads/ecommerce/app/icon.svg new file mode 100644 index 0000000..1f9d2a7 --- /dev/null +++ b/workloads/ecommerce/app/icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/workloads/ecommerce/app/layout.tsx b/workloads/ecommerce/app/layout.tsx index a4fd8a3..eaa36a2 100644 --- a/workloads/ecommerce/app/layout.tsx +++ b/workloads/ecommerce/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata, Viewport } from "next"; -import { Domine, Inter } from "next/font/google"; +import { Inter, Poppins } from "next/font/google"; import "./globals.css"; import { CartDrawer } from "@/components/cart/cart-drawer"; import { Footer } from "@/components/layout/footer"; @@ -21,15 +21,15 @@ export const metadata: Metadata = { openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" }, }; -export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#221D1A" }; +export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#122844" }; -// ADR 0007 (Opcion 2, "Atelier calido"): Domine (titulares/precio) + Inter -// (UI/cuerpo) via next/font -- antes "Inter" era solo un nombre de fallback -// en el CSS, sin garantia real de que el navegador tuviera esa fuente. +// ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca" +// (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el +// peso 700, es el unico que usa --font-display. const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" }); -const domine = Domine({ subsets: ["latin"], variable: "--font-domine", display: "swap" }); +const poppins = Poppins({ subsets: ["latin"], weight: ["700"], variable: "--font-poppins", display: "swap" }); export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { const [products, categories] = await Promise.all([getProducts(), getCategories()]); - return
{children}