El truco del borde, en criollo
Antes el borde era una línea medio transparente dibujada justo donde termina la caja, más una sombra suave. Eso, en la esquina curva, se mezcla con el fondo y se ve sucio: como un marco pintado con acuarela.
Ahora el borde es una pieza aparte: se pinta con dos capas de color. Una capa rellena el interior de la caja y la otra pinta el marco de 1 píxel. Es como un cuadro con marco de verdad: el marco no se corre para adentro de la foto.
Eso se llama "doble fondo": padding-box para el relleno y border-box para el borde. Queda igual de filoso en pantalla chica y en pantalla grande, y no depende de sombras.
Lo que se hizo igual en las 9
- Borde nítido con doble fondo y filo interior de 1 píxel (así no se pierde sobre fondos claros).
- Sin blur: se apagó el vidrio esmerilado (
backdrop-filter) y las sombras difusas en las tarjetas. - Radios parejos: 12, 16 y 20 píxeles. Las tarjetas van todas a 16.
- Hover sobrio: la caja se levanta 2 píxeles. Se fue el
scale, que agrandaba la tarjeta y volvía borroso el borde. - Letra: base de 20 o 21 píxeles y ningún texto por debajo de 15. Se agrandó la letra chica (etiquetas, sellos, chips) que estaba en 12,5.
- Botones: alto mínimo de 48 píxeles y anillo de foco de 2 píxeles bien marcado para quien navega con teclado.
- Espaciado: márgenes, rellenos y separaciones redondeados a la escala de 8 píxeles, para que todo respire parejo.
- Fotos: carga diferida (
loading="lazy") y decodificado asíncrono, salvo las dos primeras de cada página, que cargan primero porque son lo primero que se ve. - Entrada suave: los bloques aparecen una sola vez con opacidad y movimiento de 16 píxeles. Se apaga sola si el sistema pide "menos movimiento".
- Contraste: se oscurecieron los textos de acento que no llegaban al mínimo legible (AA).
Las 9, una por una
01 · Comercio multirrubro
Molde multirrubro v2
Abrir el molde multirrubro- 8 cajas (4 productos y 4 beneficios) con el borde nuevo.
- Letra chica de 11,5 y 13 píxeles subida a 15.
- Botones con alto mínimo y foco visible.
Qué mirar: las esquinas de las tarjetas de producto y la cinta que se arrastra de costado. Pasá el mouse: la tarjeta se levanta, no se agranda.
07 · Ferretería y corralón
Ferretería con calculadora
Abrir la ferretería con calculadora- 13 cajas: los productos, las partidas de la calculadora y el panel de resultado.
- Las partidas y el resultado son cajas oscuras: ahí el borde se pinta claro, para que se vea sobre el azul.
- Se conservó el estado "elegido" en naranja de las partidas.
- Ningún texto por debajo de 15 píxeles.
Qué mirar: tocá una partida (por ejemplo "Pared") y fijate que la caja elegida siga naranja y el borde siga filoso. Después mirá el panel del resultado a la derecha.
08 · Home center
Casa Firme (modelo home center)
Abrir el home center- 29 cajas: ofertas, categorías, miniaturas, accesos y las tarjetas de servicios.
- Se sacaron las sombras difusas de todas las tarjetas: ahora el borde hace el trabajo.
- 26 fotos más quedaron con carga diferida; las 2 primeras cargan primero.
- 29 botones que estaban por debajo de 44 píxeles pasaron a 48 (quedan 4 controles chicos del carrusel a propósito).
Qué mirar: la grilla de ofertas con cuentas regresivas y las tarjetas verdes de servicios (fondo oscuro). Abrí el carrito también.
Concesionaria · opción A
Ruta (cinematográfica)
Abrir Ruta- 12 cajas oscuras: los autos, las sedes, la calculadora y el formulario de tasación.
- Se corrigió un detalle importante: las tarjetas con fondo en degradé estaban perdiendo el relleno. Ahora lo conservan y el borde se pinta arriba.
- 23 textos chicos subieron a 15 píxeles.
Qué mirar: las tarjetas de auto (que tienen degradé) y el formulario de tasación. El borde tiene que verse continuo, sin cortes.
Concesionaria · opción B
Vidriera
Abrir Vidriera- 14 cajas: unidades, servicios, sedes y el buscador.
- 19 textos chicos subieron a 15 píxeles (los sellos de "nuevo" eran los más chicos).
Qué mirar: las unidades con precio en pesos y en dólares, y el bloque del plan de cuotas.
Concesionaria · opción C
Central
Abrir Central- 8 cajas. Las oscuras (autos, portal "Mi Central") llevan borde claro; las blancas (sedes, formulario de turno) llevan borde oscuro.
- Se respetó el verde lima del estado elegido.
Qué mirar: la tarjeta del portal y el formulario de turno, que son una oscura y una clara juntas en la misma pantalla.
Pinturería · opción A
Lienzo (calculadora de litros)
Abrir Lienzo- 9 cajas: productos, sedes, el panel de resultado y la tira de pasos.
- 28 textos chicos subieron a 15 píxeles; se arregló el contraste del gris de los rendimientos y del precio.
Qué mirar: el resultado de la calculadora (caja oscura) y las tarjetas de producto con el rinde por litro.
Pinturería · opción B
Paleta (probador de color)
Abrir Paleta- 15 cajas: ambientes, productos, combos, opiniones y sedes.
- Todas las tarjetas son blancas sobre papel cálido: ahí el filo interior de 1 píxel es el que evita que el borde se pierda.
- Se arregló el contraste de la mostaza en la opinión destacada.
Qué mirar: los tres ambientes (Sala, Fachada, Pileta) que tienen foto arriba y lista de precios abajo, y las muestras de color.
Pinturería · opción C
Brocha (B2B pintores)
Abrir Brocha- 5 tipos de caja, todas oscuras: tramos de precio, ofertas, resumen del pedido, pintores y sedes.
- Se respetó el amarillo del tramo elegido.
Qué mirar: los tramos de precio (tocá uno) y el resumen del pedido a la derecha.
Qué probé y qué no
Probado: las 9 páginas se abrieron en un navegador de verdad (Chrome sin pantalla) y se midió, caja por caja, que el borde esté pintado con dos capas, que no haya blur, que el hover no agrande, que la letra base sea de 20 o más, que no queden textos por debajo de 15 y que ningún título quede cortado. Después se publicaron las 9 y se bajó cada una: las 9 responden 200 y el HTML que baja es idéntico al que tengo acá.
Lo que no hice: mirarlas con mis ojos. No tengo pantalla, así que el juicio final de "esto se ve premium" es tuyo.
Un aviso: mientras yo publicaba, otra sesión agregó a las mismas 9 páginas un bloque extra llamado "Átomo 2.0" (brillo en los botones y un borde giratorio al pasar el mouse). Lo que está publicado hoy tiene las dos cosas. Si ves algo raro en un botón o en una tarjeta al pasar el mouse, es de ese bloque, no del mío: se saca en un minuto.
Próximo paso
Abrí primero la ferretería con calculadora y el home center, que son las dos con más cajas de producto. Mirá las esquinas y pasá el mouse por tres tarjetas. Si te gusta cómo quedó, replico el mismo retoque en los moldes que vayas creando (queda como hoja fija de la fábrica). Si algo no te cierra, decime en qué página y en qué caja y lo ajusto.