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](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.