Vitrine.
Editorial de moda monocromático: blanco hielo y negro, títulos gigantes en Syne minúscula que se salen de la pantalla y un único acento azul eléctrico. Una tienda con aire de campaña.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Syne
- Texto
- Inter
ParaPersonas de 18 a 40 años que compran moda online y se fijan en la estética y la marca
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaPersonas de 18 a 40 años que compran moda online y se fijan en la estética y la marca
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Syne en los títulos, Inter en el texto.
TítulosSyne
Aag!
Vitrine en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca con identidad en blanco y negro
- fotos de campaña potentes
- colecciones por temporada o drops
- e-commerce propio
- servicio con turnos
- público infantil
- marca delicada o romántica
- tienda sin fotos propias
- mayorista o precio bajo
Tono
Lo que lo hace Vitrine
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Vitrine se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Vitrine.
