Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairassuréorganiséenthousiaste
EEmbarque

Embarque.

Carte d'embarquement et tableau des départs : sections découpées comme un billet avec perforation et demi-lunes, tableau à palettes ambre, tampons de passeport et routes en pointillés en arc. Papier crème, encre bleu marine et rouge compagnie aérienne.

Type
Landing page
Thème
Clair
Titres
Red Hat Display
Texte
Red Hat Display

PourAdultes de 25 à 60 ans qui préparent un voyage d'agrément, une lune de miel ou un déplacement pro, et veulent que quelqu'un s'occupe de tout l'itinéraire

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/embarque

Sections de la page01/09nav

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

O cartão de embarque e o painel de partidas do aeroporto. A página inteira é papelaria de viagem: bilhete com canhoto, painel split-flap, carimbo de passaporte e rota pontilhada. Parece balcão de companhia aérea, não template de agência com foto de praia.

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

PourAdultes de 25 à 60 ans qui préparent un voyage d'agrément, une lune de miel ou un déplacement pro, et veulent que quelqu'un s'occupe de tout l'itinéraire

Palette

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

Typographie

Red Hat Display pour les titres, Red Hat Display pour le texte.

TitresRed Hat Display

Aag!

Embarque en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteRed Hat Display

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 avec rouge, bleu marine ou ambre
  • agence avec forfaits et départs fixes
  • vente par WhatsApp avec itinéraire sur mesure
  • entreprise de transferts ou réceptif avec trajets fixes
À éviter pour
  • luxe discret et hôtellerie de charme
  • marque pastel ou bio
  • activité sans rapport avec le voyage ou le transport
  • tourisme de nature qui veut un ton contemplatif
Secteurs
agence de voyagestourisme réceptifséjours linguistiquesforfaits et circuits en groupetransferts et navettes aéroportguide touristiquevoyage de nocesvoyages d'affairescroisières

Ton

assuréorganiséenthousiastepratique

Ce qui fait Embarque

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

  1. 01

    Bilhete com canhoto: duas peças lado a lado (canhoto embaixo no celular), picote border-dotted entre elas e meias-luas feitas por máscara: .embarque-corte-fim na peça principal, .embarque-corte-inicio no canhoto. .embarque-vertical força o canhoto embaixo em qualquer largura. Sombra com .embarque-sombra no pai (máscara corta box-shadow).

  2. 02

    Códigos de 3 letras gigantes (GRU → LIS), destino em vermelho, cidade pequena embaixo.

  3. 03

    Campos rotulados tipo bilhete: rótulo mono 10px caixa-alta + valor em display extrabold (componente Campo).

  4. 04

    Painel split-flap: cada letra numa plaquinha .embarque-flap com a linha do meio; vira em onda a cada 9 s, só CSS. Status verde piscando para "embarcando".

  5. 05

    Carimbos de passaporte em SVG (Carimbo): anel duplo, texto em volta, tinta falhada com filtro de ruído, girados e em mix-blend-multiply. No máximo 2 por tela.

  6. 06

    Rotas pontilhadas em arco com aviãozinho e pontas marcadas; a linha anda devagar.

  7. 07

    Código de barras e QR em SVG, gerados a partir de um texto (enfeite, não leem nada).

  8. 08

    Etiqueta de bagagem (cantos chanfrados + furo) para listas de "incluso".

Règles du jeu

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

Voir le DESIGN.md

Identidade

  • Fundo papel de bilhete creme-acinzentado #ebe7de. Bilhetes em surface #f7f4ee com a trama de segurança .embarque-papel. Faixa alternada em surface-2 #e0dbcf.
  • Texto tinta azul-marinho #14213d; secundário #525d74. Nada de preto.
  • Primária vermelho-sinal #c9241b: faixa do topo do bilhete, código do destino, botões.
  • Destaque âmbar #f0a202: só no painel de partidas (letras --embarque-ambar), selo "Aberto" e carimbo do check-in. Nunca em fundo grande claro.
  • Painel faixa escura #0e1420 com placas #1b2332.
  • Fontes: Red Hat Display pesada (font-black, tracking negativo forte) para títulos e códigos; Red Hat Mono em caixa-alta espaçada para rótulos, códigos e avisos.

Regras

  • Cantos quase retos (rounded-d 6px). Bilhete e cartões em rounded-d-lg.
  • Máximo de 2 botões por tela. Primário vermelho; secundário em mono sublinhado.
  • Rótulos de seção: quadradinho + texto mono espaçado, sempre acima de um título display pesado.
  • Rótulos bilíngues (DE / FROM) só nos pontos de bilhete e painel, não no texto corrido.
  • Painel no celular: hora/voo/noites viram uma linha mono pequena e o destino fica em 10 placas. Destino com mais de 10 letras: abrevie ou aumente n (e confira a largura no celular).
  • Animações (placas, rota, pisca) param com movimento reduzido. Entrada com data-sobe, rolagem com data-revela.

Adaptar à marca do cliente

  • Cor própria: troque --d-primary (e a cor da sombra dos botões). Mantenha papel creme e tinta marinho; o âmbar do painel fica, é a cor do aeroporto.
  • Marca azul: use o azul como --d-text escurecido e mantenha um vermelho ou laranja de sinal como primária.
  • Receptivo/transfer: troque o painel por horários de traslado e os roteiros por passeios.
  • Cruzeiro: "Portão" vira "Cabine", "Voo" vira "Navio"; os códigos viram portos.
Mode d'emploi

Deux fichiers.
Un prompt.

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

Voir le catalogue
LandingClairVoir le design

Fermento

LandingClairVoir le design

Assento

LandingClairVoir le design

Trena

LandingClairVoir le design

Vitrine