Shop
Unha constelación comercial flotante sobre mármore branco
A tenda en liña funciona cun modelo de "lenceiro branco", cos produtos mostrados como tarxetas de imaxe grandes e fortemente curvadas en lugar de cuadrículas de miniaturas. Toda a interface é incriblemente fluida: raios de 20-28 px en toda a pantalla, controis en forma de pílula e un corpo GT Standard compacto de 16 px con seguimento negativo axustado que fai que o texto sexa nítido e en negriña. O único acento en negriña do sistema é un púrpura vibrante (#5433eb), que aparece no logotipo, no campo circular de resultados de busca e como unha sombra tintada no mesmo botón. O resto da paleta é neutra cálida: superficies brancas, un lenzo gris frío e sutil, bordos sutís e texto case negro. A densidade permanece compacta con raias de 12 px, pero as raias do heroe e da categoría respiran grazas a un ritmo vertical xeneroso de 64-80 px, facendo que a experiencia comercial se sinta máis como unha navegación que un catálogo.
O ancho máximo é de 1200 px, centrado nun lenzo translúcido #f2f4f5, cunha barra lateral persistente de 64 px de ancho á esquerda que contén só iconas de navegación. O elemento principal é unha tira de ancho completo, con tarxetas de produto colocadas enriba dun logotipo de "tenda" morado centrado e unha barra de busca con forma de pílula xusto debaixo dela. As pílulas de categoría están dispostas nunha única fila centrada debaixo da barra de busca. As seccións de contido (Mulleres, Homes, Beleza, Fogar, Bebés e Nenos) seguen como tiras designadas, cada unha contendo unha grella de 4 columnas con imaxes de produtos ou unha composición de "elemento principal e grella" de 2 columnas. O ritmo vertical é xeneroso: 64–80 px entre as seccións principais. O pé de páxina é unha tira escura na parte inferior da páxina con grupos de ligazóns en forma de columna. As frechas de carrusel no lado dereito dos paneis horizontais de produtos indican contido desprazable sen puntos de páxina.
A fotografía é o elemento visual dominante: fotos de produtos a pantalla completa sobre un fondo branco, recortadas a escala 1:1 e imaxes de estilo de vida con tons terrosos cálidos (beixe, terracota, salvia, marfil). As imaxes dos produtos teñen a súa propia cor: a interface de usuario permanece acromática, o que permite que os tons dos produtos proporcionen variedade visual. Os logotipos das marcas aparecen como texto superposto a imaxes principais escuras ou claras, en lugar de como iconas individuais. Na composición principal, as tarxetas de produto colócanse como unha constelación flotante e lixeiramente superposta sobre a marca denominativa. As iconas son minimalistas e monocromáticas (contornos negros), coa excepción das iconas de categoría, que usan unha única cor de marca. Non hai ilustracións, efectos 3D nin degradados nas imaxes dos produtos.
Paleta
Marca
- Shop Violet
#5433eb— O botón de enviar, a marca de texto punteado e o logotipo da marca son os únicos detalles que destacan a acción e a individualidade sobre o fondo branco. - Violet Wash
#c0b5f3— Un halo translúcido detrás do botón de envío morado que mantén o seu brillo sen cambiar de tonalidade.
Neutro
- Canvas Mist
#f2f4f5— Fondo da páxina e tratamento superficial adicional detrás das tarxetas en relevo. - Pure White
#ffffff— A superficie principal para tarxetas, campos de entrada, sinais flotantes e botóns con forma de pílula. - Ink Black
#000000— Texto principal, títulos, iconas, símbolos de navegación e tarxetas de produtos en modo escuro. - Faint Border
#ebebeb— Liñas divisorias finas en tarxetas, contornos de campos de entrada e marcos de botóns con forma de pílula. - Muted Gray
#787574— Texto secundario, etiquetas de navegación, contornos de iconas cando están inactivas - Cool Stone
#cccccc— Marcadores de posición, estados desactivados e fondos de iconas inactivas
Tipografía
de 11 a 16 px · 4 pasos
- GT Standard — substitución: Inter · contornos 400 · A fonte principal en todos os tamaños, tanto para o texto do corpo como para os títulos. GTStandard-MRugular a 16 px/-0,031 em é a fonte principal para o texto do corpo, os botóns e as etiquetas. GTStandard-MSemibold a 20 px/-0,05 em úsase para varios títulos grandes; GTStandard-MMedium a 11–12 px úsase para as microlendas. Cada variante de fonte móstrase cun peso óptico de 400: a xerarquía de fontes conséguese mediante gradientes sutís e un denso espazado negativo entre letras, en lugar dun contraste en negra. Este é un estilo característico: Shop non berra con fontes en negra, senón que dá forma ao texto mediante o espazado entre letras.
- Shopify Sans — substitución: Inter · contornos 400, 700 · Reservado para mensaxes a nivel de sistema, como banners de carga de aplicacións e texto de consentimento de cookies.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 12px |
| Radio do botón | 9999px |
| Radio da tarxeta | 28px |
| Sombras | sombras suaves |
| Entre seccións | 64px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Shop e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Cursor — Un acolledor taller de pergamiño, iluminado por brasas fumegantes
- Slush — universo inflable de adhesivos en papel pastel
- MindMarket — Un acolledor libro de conto de fadas sobre papel crema: un lenzo editorial amigable onde grandes titulares de Inter e personaxes de papel recortados conviven nunha superficie suave como unha pegatina bañada polo sol.
- Airbnb — Unha tranquila parede de galería branca cun único marcador de libros vermello coral
- Superr — Un caderno escolar cálido á suave luz da tarde. Unha páxina de cor crema, un rotulador laranxa sen tapa e unha pila de adhesivos plastificados cos nomes á espera de ser despegados.
- Apple (España) — A galería do museo, á suave luz do día, é un espazo branco único, cativador e ingrávido, con cada exposición iluminada por un foco contra unha parede lixeiramente tintada.
- Lamborghini — Cor negra da carrozaría na sala de exposicións, baixo os focos: un coche amarelo
- Amplemarket — Un lugar de traballo bañado polo sol cheo de confeti
- Getharvest — Un escritorio na hora dourada: un lenzo cor crema cálido, postais brancas colgadas no lenzo e unha única chama laranxa brillante.
- Agence Foudre — A portada da revista é dunha cor rosa suave que lembra ao batom.
- Drive Capital — Póster retro de viaxe por estrada en papel quente
- Apple (España) — vitrina de galería branca