From a01ab55ebeaadfb70e64d5f449f29ccdc9f7b087 Mon Sep 17 00:00:00 2001 From: Cristian Felipe Cruz Buitron Date: Thu, 27 Aug 2026 01:18:16 -0500 Subject: [PATCH] feat(ecommerce): ADR 0007 Opcion 2 "Atelier calido" - Sub-fase 1+3 Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md, revision 2). Correccion de proceso respecto al intento anterior (v1.0.176, revertido): en vez de un token aislado en un solo boton, esta pasada toca de punta a punta los componentes que se ven juntos en la misma pantalla para que ninguna card quede a mitad de camino. - globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza cyan/magenta/yellow/blue, confirmado sin uso previo). Domine (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes "Inter" era solo un fallback de CSS sin garantia real de carga. - button.tsx: variant "magenta" renombrada a "primary" (ya no es magenta, es ciruela solida) y su color redefinido -- renombrada en los 8 archivos que la usaban para no dejar un nombre enganoso. Radio base rounded-full -> rounded-lg, ring de foco retintado. - product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no mas fucsia/amarillo neon), precio en Domine, radio y sombra consistentes con el boton. - catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro de precio, pills de filtro y boton de reset -- cero cambios de logica. Header, footer, home y pagina de producto/drawers quedan con la paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes. Validado con `docker build --target builder` (npm ci + next build con typecheck completo) -- compila limpio. --- .../0007-identidad-visual-propia.md | 404 ++++++++---------- workloads/ecommerce/app/globals.css | 20 +- workloads/ecommerce/app/layout.tsx | 11 +- workloads/ecommerce/app/not-found.tsx | 2 +- .../ecommerce/components/cart/cart-drawer.tsx | 2 +- .../components/catalog/catalog-client.tsx | 30 +- .../ecommerce/components/layout/navbar.tsx | 4 +- .../components/product/mobile-add-to-cart.tsx | 2 +- .../components/product/product-card.tsx | 20 +- .../components/product/product-purchase.tsx | 2 +- workloads/ecommerce/components/ui/button.tsx | 12 +- .../components/wishlist/wishlist-drawer.tsx | 2 +- 12 files changed, 251 insertions(+), 260 deletions(-) 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 1a407d8..08eeb4a 100644 --- a/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md +++ b/workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md @@ -1,252 +1,224 @@ # ADR 0007 — Identidad visual propia para ARI Shopping -**Estado:** aceptada (2026-08-27, dirección corregida aprobada por el usuario) +**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 (2026-08-27):** la primera versión de este -> ADR proponía clonar la estética visual de Amazon (paleta ink/naranja, -> radios mínimos, densidad Amazon). El usuario corrigió el enfoque: -> **el objetivo no es imitar a Amazon, es superar sus patrones de UX -> con una identidad propia, distintiva y memorable** — se adoptan los -> *principios funcionales* que hacen que Amazon (y el mercado en -> general) funcionen bien, no su paleta ni su estética. Esta versión -> reemplaza la anterior por completo. +> **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 (juguetes, mochilas, regalos, ya multi-categoría). No -> se toca taxonomía, backend, ni la estructura de navegación ya -> construida en el ADR 0005 (header de 3 niveles, mega-menú, -> breadcrumb, conteos de filtro) — se re-expresa visualmente sobre esa -> misma estructura. +> 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 respecto a la versión anterior — sigue siendo la -descripción real del código, no de la propuesta.) +(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", consistente en todos los componentes revisados -(`app/globals.css`, `components/ui/button.tsx`, `components/ui/badge.tsx`, -`components/layout/navbar.tsx`, `components/layout/footer.tsx`, -`components/product/product-card.tsx`, `app/page.tsx`): - -- **Paleta**: tokens propios en `@theme` (`--color-ari-cyan: #06b6d4`, - `--color-ari-magenta: #ec4899`, `--color-ari-yellow: #fde047`) más - gradientes `cyan→violet→fuchsia` y `amber→yellow→lime` en barras, - botones y fondos de sección. Paleta arcoíris de alta saturación, no - una paleta de marca contenida. -- **Forma**: `rounded-full` en casi todo — botones, badges, chips, - avatar del logo, inputs del footer. Cero variación de forma. -- **Tipografía**: `font-black`/`font-extrabold` como default en - título, precio, botones y texto secundario — todo compite por - atención, nada queda como "de soporte". -- **La estructura ya toma prestados patrones de mercado** (ADR 0005, - Etapa 2 sub-fase 3): header de 3 niveles, mega-menú "Departamentos", - footer oscuro de 4 columnas, badges de producto, breadcrumb, conteos - de filtro. Esta propuesta **no rehace esa estructura** — cambia - cómo se ve, no cómo funciona. +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) -Estos son patrones que funcionan en el mercado — Amazon es la -referencia más citable, pero el principio es lo que se adopta, nunca -su paleta ni su forma: +(Sin cambios respecto a la revisión anterior.) -| Principio | Por qué funciona (evidencia del mercado) | Cómo se aplica en ARI sin copiar la estética | +| Principio | Por qué funciona | Cómo se aplica sin copiar estética | |---|---|---| -| **Jerarquía visual clara** entre precio/CTA/información secundaria | Cuando todo pesa igual (todo bold, todo saturado), el ojo no sabe dónde mirar primero — el usuario tarda más en decidir | El precio y el botón de acción son los únicos elementos con peso tipográfico y color reservado; categoría/SKU/colección bajan a texto liviano y gris cálido | -| **Alta densidad de información sin sentirse saturado** | Más información útil visible (variantes, stock, rating) sin agrandar la card compite mejor que decoración vacía | Los gradientes decorativos actuales ocupan espacio visual sin aportar información — se liberan para mostrar más señales reales del producto | -| **Señales de confianza visibles** | Urgencia de inventario real, garantías, tiempos de envío — leídas como información seria, no decoración | Se conservan/refuerzan elementos ya reales del sitio ("Quedan N", `TrustBar` del home) expresados en colores serios, no en el arcoíris actual | -| **Contraste suficiente para escaneo rápido** | Un usuario escanea, no lee — necesita distinguir texto/fondo/CTA en milisegundos | Cada par de color de esta propuesta se valida contra WCAG AA (ver §4.1) antes de aprobarse, no se asume | +| 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 (opciones consideradas) +## 3. Por qué no clonar la estética de un competidor -| Opción | A favor | En contra | +(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 | |---|---|---| -| Clonar estética Amazon (ink/naranja/gris, radios mínimos) | Reconocible como "marketplace serio" de inmediato | Es exactamente lo que el usuario pidió evitar — ARI Shopping se vuelve indistinguible de cualquier clon genérico; cero valor de marca propio | -| **Identidad propia guiada por los principios de §2** (esta propuesta) | Distintiva, memorable, defendible como marca; resuelve los mismos problemas de UX reales del sitio actual sin perder personalidad | Requiere más trabajo de diseño que copiar un sistema ya hecho — hay que justificar cada decisión, no solo imitar | -| Mantener la paleta arcoíris actual, solo bajar el peso de fuente | Cambio mínimo | No resuelve el pedido real ("ya no la tienda de juguetes") — el problema no es solo la tipografía, es la paleta completa | +| 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` | -**Decisión de esta sección:** identidad propia. +- **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. -## 4. Identidad visual propia propuesta +### Opción 2 — "Atelier cálido" -### 4.1 Paleta — "cálida, confiable, ligeramente lúdica" +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. -Evita a propósito el azul corporativo genérico y el arcoíris actual. -Parte de la propia identidad narrativa del sitio ("tesoros para cada -aventura") — una paleta de tono *tienda de tesoros/regalos cálida*, -no de bazar infantil ni de marketplace frío. +| 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` | -| Token | Valor | Uso | Por qué esta elección | +- **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 | |---|---|---|---| -| `--color-ari-terracota` | `#C1502E` | CTA primario ("Agregar al carrito", "Comprar") — único uso reservado a acción | Cálido y terroso, no un naranja saturado tipo Amazon ni un rosa/fucsia de juguetería. Al ser el *único* color reservado a acción, refuerza la jerarquía visual del §2 | -| `--color-ari-espresso` | `#2B1B13` | Header, footer, texto sobre fondo claro cuando se necesita máximo contraste | Ancla oscura cálida (marrón profundo), no el navy frío de Amazon — mismo rol funcional (contraste fuerte para escanear), estética propia | -| `--color-ari-pino` | `#2F6F62` | Links, estados de confirmación, acentos secundarios/confianza | Reemplaza al "azul de link" genérico sin perder la legibilidad de "esto es clickeable" — un verde-azulado profundo lee como serio y confiable sin ser corporativo | -| `--color-ari-crema` | `#FBF3E7` | Fondo general fuera de las cards | Blanco cálido, no gris frío (`#EAEDED` de Amazon) ni blanco puro — sensación de catálogo de regalos, no de bodega | -| `--color-ari-carbon` | `#2E2620` | Texto principal | Negro cálido, coherente con el resto de la paleta — nunca `slate` frío | -| `--color-ari-oro` | `#E3A008` | Badge "Destacado/Top" | Reemplaza el amarillo neón actual (`#fde047`) por un dorado más rico — mismo rol (llamar la atención puntual), menos "juguete plástico" | -| `--color-ari-ladrillo` | `#A83232` | Badge de descuento | Reemplaza rosa/fucsia — un rojo ladrillo serio comunica "oferta" sin verse infantil | +| 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" | -**Validación de contraste (WCAG AA, calculada, no asumida):** +## 6. Decisión final: Opción 2 — "Atelier cálido" -| Par | Contraste | Cumple AA (texto normal ≥4.5:1 / texto grande ≥3:1) | -|---|---|---| -| Carbón sobre crema (texto de cuerpo) | 13.5:1 | Sí, con margen amplio (supera incluso AAA) | -| Blanco sobre espresso (header/footer) | 16.5:1 | Sí, con margen amplio | -| Blanco sobre terracota (texto de botón CTA) | 4.7:1 | Sí, cumple normal — margen ajustado, mantener el label del botón en `font-semibold` o superior | -| Pino sobre crema (links) | 5.3:1 | Sí, cumple normal | +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". -### 4.2 Tipografía — con carácter propio, no la default de cualquier plantilla +## 7. Decisión de proceso (corregida) -- **Titulares y precio**: [Fraunces](https://fonts.google.com/specimen/Fraunces) - (serif cálida, con personalidad, cargable vía `next/font/google` sin - costo de licencia) — usada en h1/h2 de sección, en el precio grande - de producto, y en momentos de marca (hero). Un serif con carácter en - estos puntos específicos es una señal de marca deliberada: casi - ningún competidor de e-commerce usa serif, todos van 100% sans — - conecta directo con "tesoros para cada aventura" (sensación de - catálogo curado, no de bazar). -- **UI y cuerpo**: se mantiene **Inter** (ya integrada, probada, muy - legible en tamaños chicos — nav, badges, filtros) pero se abandona - el default `font-black`/`font-extrabold` en todo. Escala real: - `font-normal` para texto de soporte, `font-semibold` para - título/etiqueta de card, `font-bold` reservado a precio y CTA - únicamente — el peso vuelve a significar algo en vez de ser el - default de todo. +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. -### 4.3 Lenguaje de forma — reconocible sin el logo +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. -- **Radio uniforme**: `rounded-xl` (12px) en botones, cards, inputs y - badges — ni el `rounded-full` actual (se siente "globo de juguete"), - ni el radio mínimo tipo Amazon (se siente frío/utilitario). Un radio - moderado y consistente en todo el sistema lee como diseño - deliberado, no como plantilla default. -- **Sombras con tinte de marca**: sombras suaves calculadas sobre - `--color-ari-espresso` a baja opacidad (ej. - `shadow-[0_8px_24px_-8px_rgba(43,27,19,0.25)]`) en vez del - `shadow-slate-900/…` genérico actual — un detalle que casi nadie - hace (la mayoría usa el gris default del framework) y que ata la - sombra misma a la paleta de marca. -- **Densidad**: intermedia — ni tan aireada/decorativa como hoy (mucho - espacio ocupado por gradientes y texto sobre-dimensionado) ni tan - comprimida como un marketplace utilitario. +## 8. Consecuencias -### 4.4 Tres decisiones deliberadas y distintivas - -Elegidas específicamente para ser difíciles de replicar "por -accidente" por un competidor genérico: - -1. **Badge en forma de "etiqueta de regalo"**: los badges de - producto (Nuevo/Top/Descuento) dejan de ser una píldora - `rounded-full` genérica y pasan a una forma con una pequeña - muesca en una esquina (`clip-path` CSS), evocando una etiqueta de - precio/regalo física — coherente con "tienda de regalos", y no es - una utilidad default de Tailwind, así que no aparece por accidente - en ningún template genérico. -2. **Fondo crema + viñeta suave en fotografía de producto**: las - imágenes de producto se apoyan sobre `--color-ari-crema` (no blanco - ni gris) con una viñeta radial muy sutil — el catálogo se siente - como una vitrina de regalos curada, no una grilla de bodega. -3. **Micro-interacción de marca en el CTA principal**: al hacer hover/ - focus en "Agregar al carrito", el ícono de bolsa hace un pequeño - giro/rebote de ~200ms (CSS puro, sin JS) en vez del `-translate-y` - genérico actual — reservado *solo* al CTA principal, para que el - momento de acción tenga una firma reconocible sin volverse - caricaturesco en el resto del sitio. - -## 5. Tabla de tokens: antes → después - -| Token / propiedad | Antes | Después (propuesto) | -|---|---|---| -| `--color-ari-cyan` (`#06b6d4`) | color de marca | eliminado | -| `--color-ari-magenta` (`#ec4899`) | color de marca/CTA | eliminado | -| `--color-ari-yellow` (`#fde047`) | acento | eliminado, ver `--color-ari-oro` | -| Nuevo: `--color-ari-terracota` | — | `#C1502E` — CTA único | -| Nuevo: `--color-ari-espresso` | — | `#2B1B13` — header/footer | -| Nuevo: `--color-ari-pino` | — | `#2F6F62` — links/confianza | -| Nuevo: `--color-ari-crema` | — | `#FBF3E7` — fondo general | -| Nuevo: `--color-ari-carbon` | — | `#2E2620` — texto principal | -| Nuevo: `--color-ari-oro` | — | `#E3A008` — badge destacado | -| Nuevo: `--color-ari-ladrillo` | — | `#A83232` — badge descuento | -| Radio por defecto | `rounded-full` | `rounded-xl` (uniforme) | -| Radio de card de producto | `rounded-3xl` | `rounded-xl` | -| Peso de fuente por defecto | `font-black`/`font-extrabold` en todo | `font-normal` (soporte) / `font-semibold` (títulos/labels) / `font-bold` (solo precio y CTA) | -| Fuente de titulares/precio | Inter (heredada del body) | Fraunces | -| Fondo de sección | `#fff` | `--color-ari-crema` fuera de cards, blanco dentro | -| Sombras | `shadow-slate-900/…` genérico | tintado con `--color-ari-espresso` | -| Gradientes decorativos | `cyan/violet/fuchsia`, `amber/yellow/lime` | eliminados — bloques de color sólido | - -## 6. Wireframe en texto: header (antes/después) - -**Antes:** -``` -[ barra degradada ámbar/amarillo: "Paga a cuotas · Envíos..." ] -[ logo redondo | buscador (gradiente cyan/violeta/fuchsia) | cuenta ♡ 🛒(amarillo) ] -[ barra negra: ☰ Departamentos▾(fuchsia al activo) | Todo | ... ] -``` - -**Después (propuesto):** -``` -[ barra espresso fina, sólida: "Envíos nacionales · Compra segura con ARI" ] -[ fondo espresso | logo | buscador (input crema, botón terracota) | cuenta ♡ 🛒(badge terracota) ] -[ barra espresso: ☰ Departamentos▾(terracota al activo) | Todo | ... ] -``` - -## 7. Wireframe en texto: product card (antes/después) - -**Antes**: `rounded-3xl`, sombra genérica grande, badges en rosa/ -fucsia/amarillo, botón "Agregar" en gradiente fucsia/pink. - -**Después:** `rounded-xl`, sombra tintada espresso a baja opacidad, -fondo crema detrás de la foto con viñeta sutil, badge "etiqueta de -regalo" (ladrillo para descuento, oro para destacado), precio en -Fraunces bold sobre carbón, botón "Agregar" sólido terracota con la -micro-interacción de §4.4.3 al hover. - -## 8. Decisión - -Identidad visual propia (§4), ejecutada en las mismas 5 sub-fases -independientes ya planteadas — cada una su propio `fix/*`, diff -mostrado, gate visual antes de la siguiente: - -1. **Tokens base**: `globals.css` (`@theme`, variables centralizadas — - nada de valores hex sueltos en componentes), `button.tsx` (nueva - variant `primary` en terracota), `badge.tsx`, integración de - Fraunces vía `next/font/google`. -2. **Header + footer**. -3. **Product card + grid de catálogo**. -4. **Home**. -5. **Página de producto + drawers de carrito/wishlist**. - -**Validación de la Sub-fase 1 antes de tocar todo lo demás:** -aplicar los tokens nuevos a un único elemento visible (ej. el botón -CTA de un solo componente) como *smoke test* visual antes de propagar -el cambio a todo el sistema — y, dado que el flujo de revalidación -Admin → `product.updated` → `revalidateTag` (protegido desde Fase 5, -ver ADR 0005) no debería verse afectado por un cambio puramente de -estilos, una edición real de producto vía Admin sirve como validación -cruzada de que nada de esto tocó ese flujo. Mismo mecanismo de -rama/diff/confirmación de siempre en cada paso. - -## 9. Consecuencias - -- Se gana una identidad de marca propia, memorable y justificable - componente por componente — no una imitación de ningún competidor - ni la continuación de la paleta arcoíris actual. -- Sigue siendo un cambio visible en todas las páginas del storefront a - la vez conceptualmente, pero se implementa y valida en 5 sub-fases - independientes, cada una revertible por separado (`git revert` del - commit de esa sub-fase — no hay manifiestos de por medio, es código - de frontend puro). +- 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 — reutiliza - `build.yaml` tal como está. -- Costo adicional real frente a un clon de Amazon: cada decisión de - esta propuesta tuvo que justificarse contra un principio de UX en - vez de copiarse — más trabajo de diseño ahora, pero es lo que hace - que el resultado sea defendible como marca propia y no un genérico - reconocible. + `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. diff --git a/workloads/ecommerce/app/globals.css b/workloads/ecommerce/app/globals.css index c94cc02..4c439a9 100644 --- a/workloads/ecommerce/app/globals.css +++ b/workloads/ecommerce/app/globals.css @@ -1,10 +1,16 @@ @import "tailwindcss"; @theme { - --color-ari-cyan: #06b6d4; - --color-ari-magenta: #ec4899; - --color-ari-yellow: #fde047; - --color-ari-blue: #0f172a; + /* 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; --animate-accordion-down: accordion-down .2s ease-out; --animate-accordion-up: accordion-up .2s ease-out; } @@ -15,10 +21,10 @@ :root { color-scheme: light; } * { border-color: rgb(226 232 240); } html { scroll-behavior: smooth; } -body { margin: 0; background: #fff; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } +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; } button, a { -webkit-tap-highlight-color: transparent; } -button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(167 139 250 / .55); outline-offset: 3px; } -::selection { background: #fde047; color: #0f172a; } +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); } .content-auto { content-visibility: auto; diff --git a/workloads/ecommerce/app/layout.tsx b/workloads/ecommerce/app/layout.tsx index 2293db6..a4fd8a3 100644 --- a/workloads/ecommerce/app/layout.tsx +++ b/workloads/ecommerce/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata, Viewport } from "next"; +import { Domine, Inter } from "next/font/google"; import "./globals.css"; import { CartDrawer } from "@/components/cart/cart-drawer"; import { Footer } from "@/components/layout/footer"; @@ -20,9 +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: "#0f172a" }; +export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#221D1A" }; + +// 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. +const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" }); +const domine = Domine({ subsets: ["latin"], variable: "--font-domine", display: "swap" }); export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { const [products, categories] = await Promise.all([getProducts(), getCategories()]); - return
{children}