Shop
Uma constelação comercial flutuante em mármore branco
A loja online opera em um modelo de "tela branca", com os produtos exibidos como grandes cartões de imagem com curvas acentuadas, em vez de grades de miniaturas. Toda a interface é incrivelmente fluida: raios de 20 a 28 pixels por toda parte, controles em formato de pílula e um corpo compacto de 16 pixels GT Standard com espaçamento negativo preciso que torna o texto nítido e em negrito. O único destaque em negrito do sistema é um roxo vibrante (#5433eb), que aparece no logotipo, no campo circular de resultados de pesquisa e como uma sombra matizada no mesmo botão. O restante da paleta é neutra e quente: superfícies brancas, uma tela sutilmente cinza-frio, bordas discretas e texto quase preto. A densidade permanece compacta com espaçamento de 12 pixels, mas as faixas principais e de categoria ganham vida graças a um ritmo vertical generoso de 64 a 80 pixels, fazendo com que a experiência de compra se assemelhe mais à navegação do que à consulta de um catálogo.
A largura máxima é de 1200px, centrada em um canvas translúcido #f2f4f5, com uma barra lateral fixa de 64px de largura à esquerda contendo apenas ícones de navegação. O elemento principal é uma faixa de largura total, com os cartões de produtos posicionados acima de um logotipo roxo centralizado com a palavra "loja" e uma barra de pesquisa em formato de pílula logo abaixo. As pílulas de categoria são organizadas em uma única linha centralizada abaixo da barra de pesquisa. As seções de conteúdo (Mulheres, Homens, Beleza, Casa, Bebê e Crianças) seguem como faixas designadas, cada uma contendo uma grade de 4 colunas com imagens de produtos ou uma composição de 2 colunas com o elemento principal e a grade. O espaçamento vertical é generoso: 64–80px entre as seções principais. O rodapé é uma faixa escura na parte inferior da página com grupos de links em formato de coluna. Setas de carrossel à direita dos painéis horizontais de produtos indicam conteúdo rolável sem pontos de paginação.
A fotografia é o elemento visual dominante: fotos de produtos em tela cheia contra um fundo branco, recortadas na proporção 1:1, e imagens de estilo de vida com tons terrosos quentes (bege, terracota, sálvia, marfim). As imagens dos produtos têm sua própria cor — a interface do usuário permanece acromática, permitindo que os tons dos produtos proporcionem variedade visual. Os logotipos das marcas aparecem como texto sobreposto em imagens principais escuras ou claras, em vez de ícones individuais. Na composição principal, os cartões de produtos são posicionados como uma constelação flutuante, ligeiramente sobreposta, acima da marca. Os ícones são minimalistas e monocromáticos (contornos pretos), com exceção dos ícones de categoria, que usam uma única cor da marca. Não há ilustrações, efeitos 3D ou gradientes nas imagens dos produtos.
Paleta
Marca
- Shop Violet
#5433eb— O botão de enviar, o marcador de texto pontilhado e o logotipo da marca são os únicos detalhes que destacam a ação e a individualidade no fundo branco. - Violet Wash
#c0b5f3— Um halo translúcido atrás do botão roxo de enviar, que mantém seu brilho sem alterar a tonalidade.
Neutro
- Canvas Mist
#f2f4f5— Fundo da página e tratamento de superfície adicional atrás dos cartões em relevo. - Pure White
#ffffff— A superfície principal para cartões, campos de entrada, ícones flutuantes e botões em formato de pílula. - Ink Black
#000000— Texto principal, títulos, ícones, símbolos de navegação e cartões de produtos em modo escuro. - Faint Border
#ebebeb— Linhas divisórias finas nos cartões, contornos dos campos de entrada e molduras de botões em formato de pílula. - Muted Gray
#787574— Texto secundário, rótulos de navegação, contornos de ícones quando inativos - Cool Stone
#cccccc— Espaços reservados, estados desativados e fundos de ícones inativos.
Tipografia
de 11 a 16px · 4 etapas
- GT Standard — substituição: Inter · esboços 400 · A fonte principal em todos os tamanhos — tanto para o corpo do texto quanto para os títulos. GTStandard-MRegular em 16px/-0,031em é a fonte principal para o corpo do texto, botões e rótulos. GTStandard-MSemibold em 20px/-0,05em é usada para alguns títulos grandes; GTStandard-MMedium em 11–12px é usada para microlegendas. Cada variante da fonte é exibida com uma espessura óptica de 400 — a hierarquia da fonte é alcançada por meio de gradientes sutis e espaçamento negativo denso entre as letras, em vez de contraste forte. Este é um estilo característico: a loja não usa fontes em negrito chamativas, mas sim molda o texto por meio do espaçamento entre as letras.
- Shopify Sans — substituição: Inter · esboços 400, 700 · Reservado para mensagens de nível de sistema, como banners de carregamento de aplicativos e textos de consentimento de cookies.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 12px |
| Raio do botão | 9999px |
| Raio do cartão | 28px |
| Sombras | sombras suaves |
| Entre seções | 64px |
| Largura da página | 1200px |
A IA criará seu site no estilo Shop e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Cursor — Uma oficina de pergaminho aconchegante, iluminada por brasas fumegantes.
- Slush — Universo inflável de adesivos em papel pastel
- MindMarket — Um livro de contos de fadas aconchegante em papel creme - uma tela editorial amigável onde grandes manchetes da Inter e personagens de papel recortado coexistem em uma superfície ensolarada e macia como adesivos.
- Airbnb — Uma discreta parede branca de galeria com um único marcador de livros vermelho-coral.
- Superr — Um caderno escolar quentinho sob a suave luz da tarde. Uma página cor creme, um marcador laranja sem tampa e uma pilha de etiquetas adesivas plastificadas com nomes, prontas para serem destacadas.
- Apple (España) — A galeria do museu, sob uma suave luz natural, é um espaço único, cativante e etéreo, todo branco, com cada peça da exposição iluminada por um foco de luz contra uma parede levemente colorida.
- Lamborghini — Carroceria preta no showroom, sob os holofotes - um carro amarelo.
- Amplemarket — Um local de trabalho banhado de sol e coberto de confetes.
- Getharvest — Uma escrivaninha na hora dourada – uma tela em tons creme quentes, cartões-postais brancos pendurados na tela e uma única chama laranja brilhante.
- Agence Foudre — A capa da revista é de um tom rosa suave que lembra a cor de um batom.
- Drive Capital — Pôster retrô de viagem de carro em papel quente.
- Apple (España) — vitrine branca para galeria