Vitrine.
Monochrome fashion editorial: ice white and black, giant lowercase Syne headlines that bleed off the screen and a single electric-blue accent. A store that looks like a campaign.
- Type
- Landing page
- Theme
- Light
- Headings
- Syne
- Body
- Inter
ForPeople 18-40 who shop for fashion online and care about aesthetics and brand
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForPeople 18-40 who shop for fashion online and care about aesthetics and brand
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Syne for headings, Inter for body text.
HeadingsSyne
Aag!
Vitrine in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- brand with a black-and-white identity
- strong campaign photos
- seasonal collections or drops
- own e-commerce
- service with appointments
- children's audience
- delicate or romantic brand
- store without its own photos
- wholesale/low price
Tone
What makes it Vitrine
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Vitrine becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Vitrine.
