Embarque.
Cartão de embarque e painel de partidas: seções recortadas como bilhete com picote e meias-luas, painel split-flap âmbar, carimbos de passaporte e rotas pontilhadas em arco. Papel creme, tinta azul-marinho e vermelho de companhia aérea.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Red Hat Display
- Texto
- Red Hat Display
ParaAdultos 25-60 planejando viagem de lazer, lua de mel ou a trabalho, que querem alguém cuidando do roteiro inteiro
Seções da 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.
ParaAdultos 25-60 planejando viagem de lazer, lua de mel ou a trabalho, que querem alguém cuidando do roteiro inteiro
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Red Hat Display nos títulos, Red Hat Display no texto.
TítulosRed Hat Display
Aag!
Embarque em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoRed Hat Display
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca com vermelho, azul-marinho ou âmbar
- agência com pacotes e saídas marcadas
- venda por WhatsApp com roteiro sob medida
- empresa de transfer ou receptivo com rotas fixas
- luxo silencioso e hotelaria boutique
- marca pastel ou orgânica
- negócio sem relação com deslocamento ou viagem
- turismo de natureza que quer tom contemplativo
Tom
O que faz ser Embarque
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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".
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Embarque vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Embarque.