Shop
Una constelación comercial flotante sobre mármol blanco.
La tienda online funciona con un modelo de "lienzo blanco", donde los productos se muestran como tarjetas de imagen grandes y muy curvas, en lugar de cuadrículas de miniaturas. La interfaz es increíblemente fluida: radios de 20-28 px en toda la superficie, controles en forma de píldora y un cuerpo compacto GT Standard de 16 px con un espaciado negativo ajustado que hace que el texto sea nítido y llamativo. El único acento llamativo del sistema es un morado vibrante (#5433eb), que aparece en el logotipo, el campo circular de resultados de búsqueda y como una sombra teñida en el mismo botón. El resto de la paleta es de tonos neutros cálidos: superficies blancas, un sutil lienzo gris frío, bordes discretos y texto casi negro. La densidad se mantiene compacta con márgenes de 12 px, pero las franjas principales y de categoría respiran gracias a un generoso ritmo vertical de 64-80 px, lo que hace que la experiencia de compra se sienta más como navegar que como un catálogo.
El ancho máximo es de 1200 px, centrado en un lienzo translúcido #f2f4f5, con una barra lateral persistente de 64 px de ancho a la izquierda que contiene solo iconos de navegación. El elemento principal es una tira de ancho completo, con tarjetas de producto posicionadas sobre un logotipo de "tienda" morado centrado, y una barra de búsqueda en forma de píldora justo debajo. Las píldoras de categoría están dispuestas en una sola fila centrada debajo de la barra de búsqueda. Las secciones de contenido (Mujer, Hombre, Belleza, Hogar, Bebé y Niños) siguen como tiras designadas, cada una con una cuadrícula de 4 columnas con imágenes de productos o una composición de "elemento principal y cuadrícula" de 2 columnas. El ritmo vertical es generoso: 64–80 px entre secciones principales. El pie de página es una tira oscura en la parte inferior de la página con grupos de enlaces en forma de columna. Las flechas de carrusel en el lado derecho de los paneles horizontales de productos indican contenido desplazable sin puntos de paginación.
La fotografía es el elemento visual dominante: fotos de productos a pantalla completa sobre fondo blanco, recortadas a escala 1:1, e imágenes de estilo de vida con tonos cálidos y terrosos (beige, terracota, verde salvia, marfil). Las imágenes de los productos tienen su propio color; la interfaz de usuario permanece acromática, lo que permite que los tonos de los productos aporten variedad visual. Los logotipos de las marcas aparecen como texto superpuesto sobre imágenes principales oscuras o claras, en lugar de como iconos individuales. En la composición principal, las tarjetas de productos se posicionan como una constelación flotante, ligeramente superpuesta, sobre el logotipo. Los iconos son minimalistas y monocromáticos (contornos negros), con la excepción de los iconos de categoría, que utilizan un único color de la marca. No hay ilustraciones, efectos 3D ni degradados en las imágenes de los productos.
Paleta
Marca
- Shop Violet
#5433eb— El botón de envío, la marca de texto punteada y el logotipo de la marca son los únicos detalles que resaltan la acción y la individualidad sobre el fondo blanco. - Violet Wash
#c0b5f3— Un halo translúcido detrás del botón de envío morado que mantiene su brillo sin cambiar de tonalidad.
Neutral
- Canvas Mist
#f2f4f5— Fondo de página y tratamiento superficial adicional detrás de las tarjetas en relieve. - Pure White
#ffffff— La superficie principal para tarjetas, campos de entrada, letreros flotantes y botones con forma de píldora. - Ink Black
#000000— Texto principal, encabezados, iconos, símbolos de navegación y tarjetas de producto en modo oscuro. - Faint Border
#ebebeb— Líneas divisorias finas en las tarjetas, contornos de los campos de entrada y marcos de botones con forma de píldora. - Muted Gray
#787574— Texto secundario, etiquetas de navegación, contornos de iconos cuando están inactivos - Cool Stone
#cccccc— Marcadores de posición, estados deshabilitados y fondos de iconos inactivos
Tipografía
de 11 a 16 píxeles · 4 pasos
- GT Standard — reemplazo: Inter · esquemas 400 · La fuente principal en todos los tamaños, tanto para el cuerpo del texto como para los títulos, es GTStandard-MRegular (16 px/-0,031 em). GTStandard-MSemibold (20 px/-0,05 em) se utiliza para varios títulos grandes; GTStandard-MMedium (11-12 px) se utiliza para los microtítulos. Cada variante de fuente se muestra con un peso óptico de 400; la jerarquía de fuentes se logra mediante degradados sutiles y un espaciado negativo denso entre letras, en lugar de un contraste marcado. Este es un estilo distintivo: Shop no recurre a fuentes llamativas, sino que da forma al texto mediante el espaciado entre letras.
- Shopify Sans — reemplazo: Inter · esquemas 400, 700 · Reservado para mensajes a nivel del sistema, como banners de carga de aplicaciones y texto de consentimiento de cookies.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 12px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 28px |
| Oscuridad | sombras suaves |
| Entre secciones | 64px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Shop y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Cursor — Un acogedor taller de pergamino, iluminado por brasas humeantes.
- Slush — Universo inflable de pegatinas sobre papel pastel
- MindMarket — Un acogedor libro de cuentos de hadas en papel color crema: un lienzo editorial amigable donde grandes titulares y personajes de papel recortados coexisten en una superficie suave como una pegatina, bañada por el sol.
- Airbnb — Una tranquila pared blanca de la galería con un único marcapáginas de color rojo coral.
- Superr — Un cuaderno escolar cálido bajo la suave luz de la tarde. Una página color crema, un rotulador naranja sin tapa y una pila de pegatinas plastificadas con nombres, listas para ser despegadas.
- Apple (España) — La galería del museo, bañada por una suave luz natural, es un único espacio blanco, cautivador y etéreo, donde cada pieza está iluminada por un foco contra una pared ligeramente tintada.
- Lamborghini — Carrocería negra en la sala de exposición, bajo los focos: un coche amarillo.
- Amplemarket — Un lugar de trabajo bañado por el sol y cubierto de confeti.
- Getharvest — Un escritorio a la hora dorada: un lienzo de color crema cálido, postales blancas colgadas en el lienzo y una sola llama de color naranja brillante.
- Agence Foudre — La portada de la revista es de un suave color rosa que recuerda al pintalabios.
- Drive Capital — Póster retro de viaje por carretera en papel cálido
- Apple (España) — Vitrina blanca para galería