Embarque.
Boarding pass and departures board: sections cut like a ticket with perforations and half-moons, amber split-flap board, passport stamps and dotted arched routes. Cream paper, navy ink and airline red.
- Type
- Landing page
- Theme
- Light
- Headings
- Red Hat Display
- Body
- Red Hat Display
ForAdults 25-60 planning a leisure trip, honeymoon or business travel, who want someone handling the whole itinerary
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForAdults 25-60 planning a leisure trip, honeymoon or business travel, who want someone handling the whole itinerary
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Red Hat Display for headings, Red Hat Display for body text.
HeadingsRed Hat Display
Aag!
Embarque in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyRed Hat Display
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- brand with red, navy or amber
- agency with packages and scheduled departures
- WhatsApp sales with custom itineraries
- transfer or inbound operator with fixed routes
- quiet luxury and boutique hospitality
- pastel or organic brand
- business unrelated to travel or transport
- nature tourism wanting a contemplative tone
Tone
What makes it Embarque
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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".
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Embarque becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Embarque.