Glossier
Sessão fotográfica ensolarada - papel branco, tinta preta, um toque de amarelo vibrante.
A Glossier funciona como uma revista de beleza digital: uma tela quase monocromática em branco e preto, pontuada por um único e vibrante toque de amarelo que serve tanto como logotipo da marca quanto como único apelo à ação. O sistema é editorialmente contido — manchetes Apercu em tamanho grande, amplo espaço para texto, fotografias de estilo de vida em página inteira que carregam a maior parte do peso emocional — e utilitário na execução: cartões de produtos planos, bordas finas e ausência total de adornos. O amarelo não é uma cor secundária da marca; ele É a marca, usado com parcimônia, de modo que cada aparição pareça um flash de câmera. Todo o resto foi pensado para se integrar ao fundo: os tons neutros são cinzas quentes com um sutil subtom rosado, as bordas são discretas e a tipografia é densa e condensada. O resultado é uma vitrine que transmite confiança, discrição e uma modernidade inquestionável.
A página apresenta uma série de seções em tela cheia dispostas verticalmente, cada uma concebida como uma página dupla editorial independente. A seção principal consiste em uma foto de largura total com uma sobreposição branca flutuante (canto superior esquerdo) e um enorme logotipo amarelo ocupando toda a parte inferior da página. Abaixo da seção principal, as seções alternam entre imagens em tela cheia e grades de cartões individuais. A divisão das categorias (cuidados com a pele/maquiagem) em duas colunas com proporção igual de imagens (50/50) ocorre sem borda visível — apenas uma linha conectando as imagens as separa. O catálogo de produtos utiliza uma grade de quatro colunas com cartões quadrados sobre um fundo #f7f7f7. A navegação é feita por uma barra superior minimalista com uma faixa de anúncios secundária acima. Os espaços entre as seções são relativamente grandes (64px), mas as transições entre elas são suaves — sem divisores ou alternância de cores de fundo, exceto pelo rodapé em tons quentes. O ritmo geral é: fotografia, texto, fotografia, grade, fotografia — como folhear uma revista de moda.
A fotografia é a linguagem visual dominante. Toda a área de visualização é preenchida com imagens de estilo de vida e retratos — luz dourada e quente, closes suaves da pele, mãos segurando frascos de produtos contra um fundo de luz solar intensa. A paleta de cores nas fotografias é quente e dessaturada: céus cor de pêssego, tons de pele terracota, azuis profundos do oceano. As imagens sempre ocupam toda a superfície da página, sem cantos arredondados, molduras ou sobreposições, com exceção dos cartões de texto brancos ou do logotipo amarelo. As fotos dos produtos nos cartões do catálogo são tiradas contra um fundo branco puro e uniforme, com iluminação plana e homogênea. A proporção entre imagem e texto é de aproximadamente 70/30 — as imagens transmitem emoção, o texto, função. Sem ilustrações, gráficos abstratos ou renderizações 3D.
Paleta
Marca
- Glossier Yellow
#fff116— O amarelo é usado como cor secundária para detalhes decorativos e para destacar termos de pesquisa menos frequentes. Não deve ser usado como cor principal para uma chamada à ação.
Neutro
- Ink
#000000— Corpo do texto, links de navegação, texto principal, texto do rodapé, contornos dos ícones, bordas finas; cor tipográfica e estrutural dominante. - Paper
#ffffff— Superfícies dos cartões de produto, áreas de preenchimento, painéis em relevo; o nível de superfície mais brilhante da pilha. - Fog
#f7f7f7— Tela da página, fundos das seções, transições entre imagens na página; a superfície base sobre a qual todo o site está localizado. - Blush
#faf2f4— Fundo do rodapé, divisores de seção em tons suaves e quentes; um sutil tom branco-rosado adiciona calor à parte inferior das páginas. - Mist
#f0f0f0— Uma superfície de apoio leve para criar um fundo discreto e separar seções. Não deve ser usada como cor principal para a chamada à ação. - Ash
#e8e8e8— Bordas dos campos de entrada, fundos dos ícones, linhas separadoras finas; cor da borda estrutural para cartões e elementos de formulário.
Tipografia
de 12 a 32px · 5 etapas
- Apercu — substituição: Inter · esboços 400, 500, 700 · A tipografia principal é usada em toda a interface do usuário: texto corrido em 16px/400, navegação e legendas em 12–14px/500, subtítulos em 20px/500 e títulos editoriais em 32px/700. O design geométrico e humanista da Apercu confere à marca um estilo moderno e conciso; o espaçamento entre letras quase nulo (0,002–0,003em) torna a tipografia compacta e com aspecto de revista, em vez de leve ou amigável. A versão 700 é reservada para elementos de exibição em editoriais, não para elementos da interface do usuário.
- Apercu Mono — substituição: JetBrains Mono or IBM Plex Mono · esboços 400 · Tipografia microutilitária para metadados de pedidos, números de rastreamento e etiquetas ao lado do código; a versão monoespaçada cria uma textura técnica em contraste com um corpo de texto proporcional.
- GTStandard-M — substituição: Inter · esboços 400 · GTStandard-M - Encontrado nos dados extraídos, mas não descrito pela IA.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 8px |
| Raio do botão | 0px |
| Raio do cartão | 0px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64px |
| Largura da página | 1440px |
A IA criará seu site no estilo Glossier 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
- Lightship — Um diorama cinematográfico da estrada aberta. Paredes de galeria em tons creme quentes adornadas com grandes fotografias de paisagens, dispostas em intervalos curtos, com letras pretas finas quase invisíveis nas molduras, e um único toque de laranja vibrante quebrando a monotonia como uma fogueira em um prado.
- Faire ES — Catálogo por atacado de creme quente
- Adanola — Um lookbook editorial em papel branco. Um ensaio de moda onde a tipografia e a fotografia respiram em superfícies brancas e limpas, com tinta preta para a tipografia e uma fonte sans-serif discreta (Favorit), que reflete o estilo geral da marca.
- Oura Ring — Uma oficina aconchegante de preparo de mingau de aveia, banhada por uma suave luz natural.
- Stykka — Uma oficina escandinava sob luz branca – um showroom tranquilo e artesanal onde a única voz é a da fotografia.
- DJI — Lona preta aeroespacial com um único destaque em azul elétrico
- Altitude Beverages — Página dupla monocromática de revista. Imagine uma página dupla de revista de moda desprovida de todas as cores, exceto pelas fotos estáticas — o texto e o espaço em branco contam toda a história.
- AATHER — Uma palma aberta, uma única chama - um luxo silencioso contido na quietude.
- Cowboy — Uma galeria de bicicletas belgas em um ambiente de porcelana branca como a neve. Um showroom onde superfícies foscas, fontes grandes usadas em materiais editoriais e uma virtual ausência de decoração direcionam o olhar para a bicicleta e seus componentes.
- Refero — Layout editorial em mármore branco - uma página de produto criada por um tipógrafo, onde o título com serifa é o cartão de visitas da marca e todo o resto é discreto.
- Face Formula — Um retrato editorial escandinavo. Uma composição calma, ao estilo de revista, onde o olhar da modelo e a manchete, escrita em uma fonte serifada condensada, falam por si só contra um fundo frio e nebuloso.
- Shupatto — Vitrine de museu em mármore branco