−20 % de descuento
Alfombra de lana Trama Nieve 200 × 290
$ 214.900
Precio anterior: $ 268.000
Ahorras $ 53.100 (20 %)
6 cuotas sin interés de $ 35.817
Envío gratis
Sistema de diseño
Los ladrillos antes que la casa
Todo lo que se ve más adelante en el sitio sale de esta página. Cada componente está documentado con todos sus estados, porque un componente sin sus estados no es un componente: es un dibujo. Las decisiones que se apartan del brief están marcadas y justificadas.
1 · Color
El sitio se apoya sobre un arena muy claro, no sobre blanco. Es una decisión
comercial antes que estética: la tienda no tiene reputación, y un recorrido cálido
baja la guardia más que uno clínico. El tono se aclaró de #F5E6D3 a
#F9F5EF para que la calidez esté sin pesar. Sobre esa base, el naranja
sólo aparece en lo que se toca o en lo que cuesta dinero — si algo es naranja y no
es accionable ni es precio, está mal puesto.
Todos los valores están verificados contra los dos fondos reales del sitio, arena y oliva, no sólo contra blanco. Es donde suele romperse una paleta cálida: un color que cumple sobre blanco puede quedar por debajo de AA sobre arena.
-
--arena#F9F5EF superficie -
--arena-honda#EFE8DC superficie -
--papel#FFFFFF 1,09:1 sobre el fondo -
--oferta-wash#DCDF9E superficie -
--tinta#1C1814 16,3:1 fondo · 12,7:1 oliva -
--gris-800#4A4038 9,3:1 fondo · 7,3:1 oliva -
--gris-texto#665A50 6,2:1 fondo · 4,8:1 oliva -
--gris-500#9C8C7A 3,0:1 — no apto para texto -
--gris-200#E3D3BC borde -
--naranja-marca#FF6A3D 2,3:1 — decorativo -
--naranja-accion#B8431C 5,4:1 con blanco -
--naranja-texto#9C3714 5,5:1 fondo · 5,1:1 oliva -
--verde#2F5D3A 7,0:1 fondo · 5,5:1 oliva -
--rojo#A8342A 6,1:1 fondo · 4,7:1 oliva -
--amarillo#E0A32B decorativo
Tres desvíos respecto del brief, y por qué
-
El hover del botón. El brief pide hover en
#FF6A3D. Con texto blanco eso da 2,85:1 y rompe la meta de “AA sin excepciones” del §8. La salida no fue elegir entre marca y accesibilidad: el relleno se oscurece a#A8380Fy el naranja de marca vuelve como resplandor cálido alrededor del botón. La luz vive por fuera del relleno, así que nunca toca el texto y el blanco se mantiene en 6,49:1. El gesto de marca no sólo sobrevive: queda más fuerte que con el color plano. Y no es un adorno prestado — la tienda vende iluminación, y el botón se enciende como el producto. La comparación de las siete variantes que se evaluaron está en la página de hover. -
La paleta entera se movió a cálida. El brief define blanco de fondo y
grises fríos. Sobre un fondo cálido, esos grises tienen tinte azul y se ven sucios; peor,
#6B6B6Bcaía a 4,35:1 sobre arena y quedaba por debajo de AA. Los neutros pasaron a cálidos y, de paso, contrastan mejor: el metadato subió de 4,35:1 a 6,2:1. Lo mismo con los semánticos — el verde esmeralda y el rojo bermellón del brief no llegaban a 4,5:1 sobre el fondo cálido, así que bajaron a verde bosque y rojo tierra, que además pertenecen a la misma familia que el fondo. Con el aclarado posterior del fondo todos los valores mejoraron todavía más; el que sigue marcando el límite es el oliva de las ofertas, que es el más claro de los dos fondos del sitio. -
El gris de metadatos. El gris decorativo
#9C8C7Ada 2,7:1 sobre arena: sirve para íconos y separadores, no para texto. El texto chico usa#665A50(5,5:1). A ojo son casi el mismo gris; para un lector con baja visión, no.
2 · El gesto que ya no está
El logo pasó por tres versiones. La primera tenía una tilde diagonal de 21°, medida sobre el archivo; la segunda, una barra vertical que colgaba del borde de una pastilla. Las dos veces el sistema tomó ese ángulo y lo repartió: bisel del badge de descuento, corte del banner de oferta, cabeza de la barra de envío gratis, marca del resumen del pedido.
El wordmark actual no tiene ninguno de los dos. Así que el gesto salió del sistema completo, no de a pedazos: un sistema no puede sostener una cita a un logo que nadie vio nunca. Un bisel diagonal huérfano se lee como un detalle azaroso, que es exactamente lo contrario de lo que un sistema de diseño tiene que producir.
Lo que queda en su lugar. Las formas volvieron al radio del sistema: el badge de descuento es un chip sólido, el banner de oferta divide sus dos zonas con un borde recto y la barra de envío gratis termina en una cabeza redondeada. Nada quedó apuntando a un ángulo que la marca ya no usa.
Si vuelve un acento gráfico, vuelve como token —un valor, un solo lugar donde cambiarlo— y no como una decisión repetida a mano en seis componentes. Sacar este gesto llevó una tarde justamente porque la primera vez se había aplicado bien.
3 · Tipografía
Inter en una sola familia, escala fluida entre 360 y 1280 px. La tipografía del logo se usa sólo en el logo. Todo número que se compara en columna lleva cifras tabulares: sin eso, los precios de la grilla no alinean y la comparación cuesta.
El titular de campaña usa peso 500, no 700.
Un display en negrita sobre paleta cálida empuja, y el recorrido que busca este sitio es el contrario: que el visitante se tome su tiempo. En 500 el titular sostiene los 44 px sin levantar la voz. El tamaño hace la jerarquía; el peso queda libre para otra cosa.
El tracking se cerró de −2 % a −2,5 % para compensar. Menos peso deja más aire entre letras: si se baja el peso sin ajustar el tracking, el titular se desarma en las medidas grandes.
Los títulos de sección se quedan en 600, así que a 20 px son más pesados que el titular a 44. Se ve raro escrito, pero funciona: a esa diferencia de tamaño la jerarquía la define la escala, y el contraste de peso le da al titular un aire editorial que un 700 uniforme le sacaría.
-
Titular de campaña
.t-titular -
Título de sección
.t-seccion -
Nombre de producto
.t-producto -
Precio
.t-precio -
Precio anterior
.t-precio-anterior -
Cuotas y envío
.t-cuotas -
.t-meta -
Texto largo
.t-texto
4 · Espaciado, radios y elevación
Escala de 4 px
-
--e-1 -
--e-2 -
--e-3 -
--e-4 -
--e-5 -
--e-6 -
--e-8 -
--e-10 -
--e-12 -
--e-16 -
--e-20 -
--e-24
Radios
--r-badge--r-tarjeta--r-modalElevación · dos niveles y ninguno más
borde--sombra-1--sombra-25 · Botón · 3 jerarquías × 4 estados
Una sola acción primaria por pantalla. Si hay dos naranjas compitiendo, no hay ninguna.
ReposoHoverFocoDeshabilitado
Primario
Secundario
Fantasma
Tamaños y estado cargando
Sobre la columna “Foco”. Ese contorno grueso y oscuro no es el hover: es el indicador de foco de teclado, y aparece cuando alguien navega con Tab en lugar de mouse. Es intencionalmente el elemento más visible del botón — quien no usa mouse necesita saber sin ninguna duda dónde está parado. Va en tinta y no en naranja porque tiene que leerse sobre cualquier fondo del sitio, y es el mismo en todas las jerarquías: el foco no es decoración, es orientación.
El hover, en cambio, es la luz naranja de la primera columna. Nunca se muestran los dos a la vez salvo que alguien navegue con teclado y además apoye el mouse encima.
6 · Badges
−60 % de descuento
−15 % de descuento
Oferta
Más vendido
Nuevo
Últimas unidades
Agotado
7 · Bloque de precio
$ 45.900
Precio anterior: $ 72.000
Ahorras $ 26.100 (36 %)
6 cuotas sin interés de $ 7.650
$ 18.500
6 cuotas sin interés de $ 3.083
$ 129.900
Precio anterior: $ 324.750
Ahorras $ 194.850 (60 %)
6 cuotas sin interés de $ 21.650
$ 13.600
6 cuotas sin interés de $ 2.267
$ 3.400 por unidad
$ 45.900
Precio anterior: $ 72.000
Ahorras $ 26.100 (36 %)
6 cuotas sin interés de $ 7.650
8 · Rating
9 · Campos y validación
Te enviamos el seguimiento del pedido acá.
Cuatro números, sin letras.
El código postal lleva sólo cuatro números. Prueba con 1425.
Se completa con el código postal.
El foco de un campo de texto no es el foco de un botón.
En botones y enlaces el foco es un anillo negro de 3 px, porque quien navega con teclado necesita saber sin ninguna duda dónde está parado. Sobre un campo de texto ese mismo anillo grita: el campo ya se ve como campo, y lo único que hace falta es confirmar que está listo para escribir. Por eso el foco de los campos es verde y suave — el mismo verde que en este sistema significa “esto está bien, sigue”.
Contraste verificado igual: #0F7B4F da 5,29:1 sobre blanco y 4,89:1
sobre el gris del buscador, muy por encima del 3:1 que exige el criterio 1.4.11
para indicadores no textuales. El halo suave es refuerzo visual; el indicador que
cumple es el borde sólido, y funciona solo.
El choque que hubo que resolver. El verde ya era el color de “campo válido”, así que foco y validado iban a verse igual. Se separaron por otra vía: el foco trae halo, el validado trae tilde. Nunca se confunden, y cuando un campo válido recibe foco, muestra los dos — que es exactamente lo que está pasando.
Ni el foco ni el error mueven el contenido. El borde nunca cambia de grosor:
el segundo píxel de color es un box-shadow de spread 1. Engrosar el
borde en :focus desplaza todo 1 px, y en un checkout de tres pasos eso
se siente en cada campo.
10 · Selector de cantidad y chips de filtro
11 · Barra de envío gratis
Umbral en $ 50.000. Es la palanca de mayor impacto sobre el ticket promedio: convierte “me falta poco” en un motivo concreto para sumar un producto más.
Te faltan $ 88.000 para el envío gratis
Te faltan $ 58.500 para el envío gratis
Te faltan $ 42.000 para el envío gratis
12 · Banner de oferta
13 · Toasts, skeletons y estados vacíos
Agregado al carrito
Lámpara de pie Arco · Arena
No pudimos calcular el envío
Revisa el código postal e intentá de nuevo.
Guardamos tu carrito
Lo vas a encontrar cuando vuelvas.
Skeletons · nunca pantalla en blanco
Estado vacío · siempre con salida
No encontramos productos con esos filtros
14 · Tarjeta de producto
El componente que más se repite del sitio, y por eso el que más tiene que aguantar. Estos seis casos no son maquetas armadas para la documentación: son los productos del catálogo que efectivamente tienen cada problema.
−25 % de descuento
Extensor de wi-fi de doble banda con puerto Ethernet y repetición automática de la red del hogar
$ 33.900
Precio anterior: $ 45.000
Ahorras $ 11.100 (25 %)
6 cuotas sin interés de $ 5.650
Envío calculado por código postal
−16 % de descuento
Últimas unidades
Vaso Stanley Quencher ProTour Wild Blooms 887 ml
$ 135.000
Precio anterior: $ 160.000
Ahorras $ 25.000 (16 %)
6 cuotas sin interés de $ 22.500
Envío gratis
−17 % de descuento
Últimas unidades
Corkcicle Cold Cup XL con asa
$ 100.000
Precio anterior: $ 120.000
Ahorras $ 20.000 (17 %)
6 cuotas sin interés de $ 16.667
Envío gratis
- Alfombra de lana Trama Nieve… Habitual · descuento, ranking y envío gratis
- Extensor de wi-fi de doble b… Nombre largo: se corta en dos líneas
- Vaso Stanley Quencher ProTou… Sin ninguna opinión todavía
- Corkcicle Cold Cup XL con as… Últimas unidades · stock real bajo
Agotado
Últimas unidades
Tres decisiones de la tarjeta.
El nombre se corta en dos líneas. Un producto de 92 caracteres no puede empujar el precio fuera de la línea de base de la grilla: si los precios no alinean entre columnas, comparar cuesta, y comparar es lo único que se hace en un listado.
El envío gratis se anuncia en la tarjeta. El costo de envío sorpresa es la principal causa de abandono de carrito. Cuando la noticia es buena, darla temprano es gratis; cuando es mala, evita el reclamo.
El agotado no se esconde. Sigue visible, sigue indexable y conserva el precio. Sacarlo de la grilla pierde el tráfico que ya lo estaba buscando — y quien llega puede terminar comprando otra cosa.
Qué sigue
Etapa 2: la home con el bento comercial y la tarjeta de producto en sus tres variantes. Todo lo de esta página se usa ahí sin tocar una línea de CSS nueva — esa es la prueba de que el sistema funciona.