Embarque.
Tarjeta de embarque y panel de salidas: secciones recortadas como boleto con perforado y medias lunas, panel split-flap ámbar, sellos de pasaporte y rutas punteadas en arco. Papel crema, tinta azul marino y rojo de aerolínea.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Red Hat Display
- Texto
- Red Hat Display
ParaAdultos de 25 a 60 que planean un viaje de ocio, luna de miel o de trabajo, y quieren que alguien se encargue de todo el itinerario
Secciones de la página01/09nav
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.
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos de 25 a 60 que planean un viaje de ocio, luna de miel o de trabajo, y quieren que alguien se encargue de todo el itinerario
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Red Hat Display en los títulos, Red Hat Display en el texto.
TítulosRed Hat Display
Aag!
Embarque en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoRed Hat Display
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 rojo, azul marino o ámbar
- agencia con paquetes y salidas fijas
- venta por WhatsApp con itinerario a medida
- empresa de traslados o receptivo con rutas fijas
- lujo silencioso y hotelería boutique
- marca pastel u orgánica
- negocio sin relación con traslados o viajes
- turismo de naturaleza que busca un tono contemplativo
Tono
Lo que lo hace Embarque
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Bilhete com canhoto: duas peças lado a lado (canhoto embaixo no celular), picote
border-dottedentre elas e meias-luas feitas por máscara:.embarque-corte-fimna peça principal,.embarque-corte-iniciono canhoto..embarque-verticalforça o canhoto embaixo em qualquer largura. Sombra com.embarque-sombrano pai (máscara cortabox-shadow). - 02
Códigos de 3 letras gigantes (
GRU → LIS), destino em vermelho, cidade pequena embaixo. - 03
Campos rotulados tipo bilhete: rótulo mono 10px caixa-alta + valor em display extrabold (componente
Campo). - 04
Painel split-flap: cada letra numa plaquinha
.embarque-flapcom a linha do meio; vira em onda a cada 9 s, só CSS. Status verde piscando para "embarcando". - 05
Carimbos de passaporte em SVG (
Carimbo): anel duplo, texto em volta, tinta falhada com filtro de ruído, girados e emmix-blend-multiply. No máximo 2 por tela. - 06
Rotas pontilhadas em arco com aviãozinho e pontas marcadas; a linha anda devagar.
- 07
Código de barras e QR em SVG, gerados a partir de um texto (enfeite, não leem nada).
- 08
Etiqueta de bagagem (cantos chanfrados + furo) para listas de "incluso".
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo papel de bilhete creme-acinzentado
#ebe7de. Bilhetes emsurface#f7f4eecom a trama de segurança.embarque-papel. Faixa alternada emsurface-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
#0e1420com 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-d6px). Bilhete e cartões emrounded-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 comdata-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-textescurecido 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.
Dos archivos.
Un prompt.
Embarque 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 Embarque.
