Shopify
Estufa da Meia-Noite - As marcas registradas florescem contra um fundo turquesa profundo, iluminado por uma única faísca de menta.
O sistema de design da Shopify é um laboratório fotográfico noturno para o comércio: uma tela quase preta tingida com um verde turquesa profundo, uma tipografia sans-serif ampla e imponente e um único toque vibrante de menta que ativa os momentos interativos. A interface lembra um quarto escuro, onde produtos e marcas são a fonte de luz — fotos e vitrines brilham contra superfícies quase pretas, enquanto elementos cromados recuam. Os componentes são geométricos, porém suaves: cards com raio de 12px e bordas finas, botões em formato de pílula e uma tipografia de 330 pontos que transmite escala sutilmente, em vez de ostentar. Um único sinal de pontuação cromático (#36f4a4) é usado com parcimônia em links, tags e estados de foco, reservando a cor para momentos funcionais e garantindo que as histórias dos lojistas permaneçam o ponto focal visual.
A largura máxima é de aproximadamente 1280px, centralizada, com blocos de destaque em tela cheia que se estendem além do contêiner da foto. O ritmo da página alterna: (1) uma página inicial escura em tela cheia com um título sobreposto e botões de chamada para ação, (2) seções escuras confortáveis com blocos de texto e imagem de largura máxima em 2 colunas ou grades de imagens em 3 colunas, (3) painéis interativos de apresentação (ficha do produto, calculadora de frete, mapa-múndi) exibidos como cartões em relevo em uma tela mais profunda. A navegação consiste em uma barra superior fixa com o logotipo + 3 elementos de navegação + links secundários + o botão principal de chamada para ação, todos alinhados à direita. O ritmo vertical utiliza espaços de 80px entre as seções com uma transição suave — sem divisores entre as seções escuras, apenas uma mudança no tom da superfície.
O design visual é focado principalmente no varejista: fotos de produtos em tamanho real e fotos de eventos da marca compõem a maior parte do conteúdo visual, frequentemente em grandes fundos com texto branco sobreposto. As imagens são recortadas de forma precisa, com alto contraste e um caráter festivo (o toque do sino da Nasdaq, cumprimentos em grupo, closes de produtos nas mãos). O fundo escuro cria a impressão de que essas fotos estão iluminadas por holofotes. As ilustrações são minimalistas — a principal função explicativa é desempenhada por imagens de produtos incorporadas e capturas de tela de vitrines. Os ícones são monocromáticos, com uma largura de linha de 1,5 a 2 pixels, geralmente brancos ou #36f4a4 para estados ativos.
Paleta
Marca
- Shopify Mint
#36f4a4— Os indicadores de navegação ativa, os anéis de foco, os destaques das tags e os destaques ao passar o cursor sobre os links são os únicos elementos cromáticos que criam uma sensação de interatividade ativada em um fundo escuro.
Neutro
- Midnight Forest
#02090a— Tela da página, imagens de fundo do cabeçalho, imagens de fundo da seção - Deep Lichen
#061a1c— Superfícies principais do cartão, painéis em relevo, blocos de conteúdo. - Shaded Fern
#072720— Painel de navegação, cartões adicionais, elevação do painel quase imperceptível. - Spruce Border
#1e2c31— Bordas finas para cartões, linhas divisórias, contornos de campos de entrada. - Abyss Indigo
#000a1e— Superfície adicional para inserir produtos/demonstrações, painéis com descrições de funções. - Pure White
#ffffff— Texto principal, preenchimento do botão, título, logotipos.
Tipografia
de 12 a 70px · 8 etapas
- Neue Haas Grotesk — substituição: Inter · esboços 330, 400, 500, 550, 600 · O sistema tipográfico principal consiste em títulos com peso de fonte de 70 a 96 pixels (330 a 400), que são sutis em vez de chamativos; texto corrido com peso de fonte de 16 a 18 pixels (400 a 500); e navegação e interface do usuário com peso de fonte de 14 a 16 pixels (500 a 550). O peso de fonte ultraleve de 330 em telas grandes é uma característica distintiva: transmite confiança por meio da sobriedade, em vez do volume.
- Inter Variable — substituição: Inter · esboços 400, 420, 450, 550 · Uma fonte secundária usada em elementos de interface de navegação, notas pequenas, controles de abas e microtexto em rodapés. Suas letras minúsculas ligeiramente maiores e espaçamento entre letras mais padrão a tornam mais legível em tamanhos compactos. Também é adequada para situações em que uma fonte de peso 420 preenche a lacuna entre uma fonte de tamanho regular e uma de tamanho médio.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 12px |
| Raio do botão | 9999px |
| Raio do cartão | 12px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80px |
| Largura da página | 1280px |
A IA criará seu site no estilo Shopify 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
- Retool — Uma oficina de obsidiana aconchegante — uma superfície para ferramentas de precisão, iluminada por brasas fumegantes, onde tudo é criado.
- Elektron — À meia-noite, o painel de controle do equipamento é uma tela quase preta, onde as fotos dos produtos brilham enquanto a interface permanece praticamente invisível.
- REKKI — Painel de controle de voo no laboratório fotográfico
- OFFFICE : — uma galeria noir envolta em fonte monolítica
- Clyde — O showroom, com seu único foco de luz, é uma galeria quase escura onde a única cor no ambiente é uma esfera com um degradê quente.
- Channel Studio — Um estúdio fotográfico com um abajur coral.
- Electronic Materials Office — Uma brasa incandescente em uma galeria decorada com carvão.
- ORYZO AI — Um ensaio fotográfico sobre um quarto escuro. Um objeto solitário pairando na escuridão quente, com uma fonte creme como única decoração.
- Factory — O terminal da "sala de guerra" à meia-noite. A "fábrica" é um painel de controle totalmente preto, onde um único cartão branco aterrissa como um despacho iluminado por uma lanterna — o único objeto na sala é a própria obra.
- Hungry Tiger — Grafites em tons vibrantes de açafrão na parede do tandoor. Uma paleta uniforme de dourado e marrom ferrugem, com uma fonte tão grande que parece mais uma placa de mercado de especiarias do que um site.
- Bibliothèque — Uma galeria preta em forma de cubo sob um holofote – uma placa iluminada solitária em um vasto salão escuro.
- Apple (España) — Teatro preto com acessórios iluminados