Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairaudacieuxéditorialminimaliste
VVitrine

Vitrine.

Éditorial de mode monochrome : blanc glacé et noir, titres géants en Syne minuscule qui débordent de l'écran et un seul accent bleu électrique. Une boutique qui a l'allure d'une campagne.

Type
Landing page
Thème
Clair
Titres
Syne
Texte
Inter

PourPersonnes de 18 à 40 ans qui achètent de la mode en ligne et se soucient d'esthétique et de marque

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/vitrine

Sections de la page01/10Topo e navegação

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

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.

Extrait du DESIGN.md, en portugais pour l'instant.

PourPersonnes de 18 à 40 ans qui achètent de la mode en ligne et se soucient d'esthétique et de marque

Palette

Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.

Typographie

Syne pour les titres, Inter pour le texte.

TitresSyne

Aag!

Vitrine en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteInter

La police de lecture porte les longs paragraphes sans fatiguer.

Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.

0123456789 · 1 234,56 € · 25/09 à 19h30

Pour qui

Ce que l'IA compare avec le client pour choisir le design.

Idéal pour
  • marque à l'identité noir et blanc
  • photos de campagne fortes
  • collections par saison ou drops
  • e-commerce propre
À éviter pour
  • service sur rendez-vous
  • public enfant
  • marque délicate ou romantique
  • boutique sans photos propres
  • gros/petit prix
Secteurs
boutique de modeboutiquemarque de vêtements d'auteurfriperie sélectionnéebijouxaccessoireschaussuresmode masculinemode sans genre

Ton

audacieuxéditorialminimalistefashionassuré

Ce qui fait Vitrine

Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.

  1. 01

    Título gigante que sangra (.vitrine-gigante, text-[30vw] e afins) dentro de pai com overflow-hidden. Nome da coleção no hero, "peças", manchete e a marca no rodapé.

  2. 02

    Hero = foto de campanha em tela cheia com o nome da coleção sobreposto, cortado pela borda de baixo.

  3. 03

    Faixa "nova coleção" correndo em preto, com um ponto azul a cada volta.

  4. 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.

  5. 05

    Lookbook em rolagem horizontal com snap-x snap-mandatory e número gigante do look sobre a foto.

  6. 06

    Guia de medidas em tabela de verdade, com rolagem própria no celular.

  7. 07

    Trocas, frete e arrependimento em 3 colunas separadas por fio preto.

  8. 08

    Newsletter com campo só de linha (sem caixa).

Règles du jeu

Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.

Voir le DESIGN.md

Identidade

  • Fundo branco-gelo #f4f3ef, nunca branco puro. surface-2 #e8e7e2 atrá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 de max-w estreito: 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, lookbook 4/5.
  • Animação: entrada (data-sobe), rolagem (data-revela), faixa correndo e troca de foto no hover. Tudo para com prefers-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-square e a tabela de medidas por aro/comprimento.
Mode d'emploi

Deux fichiers.
Un prompt.

Vitrine devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.

Prompt pour l'agent Utiliser avec l'IA

Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.

  1. 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
  2. 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
  3. 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
  4. 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.

Similaires

Des landings qui partagent un ton ou un secteur avec Vitrine.

Voir le catalogue
LandingClairVoir le design

Assento

LandingClairVoir le design

Retícula

LandingClairVoir le design

Fermento

LandingClairVoir le design

Lavra