Vitrine.
Editorial de moda monocromático: branco-gelo e preto, títulos gigantes em Syne minúscula que sangram da tela e um único acento azul-elétrico. Loja com cara de campanha.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Syne
- Texto
- Inter
ParaPessoas 18-40 que compram moda online e ligam para estética e marca
Seções da página01/10Topo e navegação
Editorial de moda monocromático e ousado: branco-gelo, preto e um único azul-elétrico. Parece campanha de revista, não loja de template.
ParaPessoas 18-40 que compram moda online e ligam para estética e marca
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Syne nos títulos, Inter no texto.
TítulosSyne
Aag!
Vitrine em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca com identidade preta e branca
- fotos de campanha fortes
- coleções por estação ou drop
- e-commerce próprio
- serviço com agendamento
- público infantil
- marca delicada ou romântica
- loja sem fotos próprias
- atacado/preço baixo
Tom
O que faz ser Vitrine
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Título gigante que sangra (
.vitrine-gigante,text-[30vw]e afins) dentro de pai comoverflow-hidden. Nome da coleção no hero, "peças", manchete e a marca no rodapé. - 02
Hero = foto de campanha em tela cheia com o nome da coleção sobreposto, cortado pela borda de baixo.
- 03
Faixa "nova coleção" correndo em preto, com um ponto azul a cada volta.
- 04
Grade de produtos: hover troca a foto (frente → costas) e sobe a régua de tamanhos, com esgotado riscado. No celular os tamanhos disponíveis aparecem em texto abaixo.
- 05
Lookbook em rolagem horizontal com
snap-x snap-mandatorye número gigante do look sobre a foto. - 06
Guia de medidas em tabela de verdade, com rolagem própria no celular.
- 07
Trocas, frete e arrependimento em 3 colunas separadas por fio preto.
- 08
Newsletter com campo só de linha (sem caixa).
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo branco-gelo
#f4f3ef, nunca branco puro.surface-2#e8e7e2atrás das fotos. - Texto preto
#0b0b0b; secundário#5e5d59. Blocos invertidos (faixa, manchete, rodapé) em preto com texto gelo. - Acento azul-elétrico
#2f3cff, com parcimônia: quadradinho dos rótulos, selo "novo", hover de botão, linha do tamanho na tabela, seleção de texto. Nunca em fundo grande nem em texto corrido. - Fontes: Syne 700/800 para títulos, sempre minúscula e com tracking negativo; Inter para texto.
- Cantos retos (
--d-radius: 0). Nada arredondado, só os pontos da faixa.
Regras
- Largura total, gutter
px-5/md:px-10. Nada demax-westreito: moda pede tela cheia. - Um botão por tela. Texto de botão minúsculo e de ação ("ver a coleção").
- Fotos sempre no formato final: campanha em tela cheia, produto
3/4, lookbook4/5. - Animação: entrada (
data-sobe), rolagem (data-revela), faixa correndo e troca de foto no hover. Tudo para comprefers-reduced-motion.
Adaptar à marca do cliente
- Cor da marca vai em
--d-accent(e na::selection). Continue usando só em detalhe. - Mantenha gelo e preto. Se a marca é colorida por natureza (estampa, infantil, praia tropical), esse design provavelmente não é o certo.
- Nome da coleção curto (até ~8 letras) fica melhor no hero. Nome longo: reduza o
text-[38vw]. - Joias e acessórios: troque a proporção das fotos de produto para
aspect-squaree a tabela de medidas por aro/comprimento.
Dois arquivos.
Um prompt.
O Vitrine vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Vitrine.