Sistema de design inspirado no Airbnb

Category: E-commerce e varejo Marketplace de viagens. Acento coral quente, orientado para fotografia, interface com cantos arredondados.

1. Tema visual e atmosfera

O design do Airbnb em 2026 parece uma revista de viagens que por acaso também é um aplicativo — telas de branco imaculado dão lugar a fotografias em sangria total, e a própria interface desaparece para que os anúncios possam respirar. O característico coral-rosa Rausch (#ff385c) é usado com parcimônia, mas de forma inconfundível: CTA de pesquisa, indicador de aba ativa, botão de ação principal, o preço ou o coração de lista de desejos ocasional. Todo o resto é uma escala de cinza disciplinada, com #222222 carregando quase cada linha de texto.

O que torna o sistema inconfundivelmente Airbnb é a fé que ele deposita no conteúdo. As fotos das propriedades são exibidas em escala heroica, 4:3 com tratamento de borda a borda com raio. A troca de categoria acontece por meio de um seletor de três abas (Casas / Experiências / Serviços) que usa ícones ilustrados renderizados em 3D (uma casa com telhado inclinado, um balão de ar quente, uma campainha de serviço) — físicos, táteis, quase como brinquedos — combinados com etiquetas nítidas de Airbnb Cereal VF. É o raro produto de consumo onde renders 3D e interface puramente tipográfica coexistem sem tensão.

A superfície mais nova é a linha de produtos de Experiências — o mesmo chrome, mas maior densidade de cartões, mais fotografia e um painel de reserva com centralização e preço fixo na coluna direita. As páginas de detalhes de anúncios (tanto quartos quanto experiências) seguem um modelo rígido: grade de imagem hero em sangria total → cartão de reserva arredondado sobreposto (fixo ao rolar) → comodidades → avaliações (os prêmios Guest Favorite usam um grande 4,81 centralizado com um medalhão de coroa de louros) → mapa → perfil do anfitrião → divulgações. O ritmo é consistente, seja reservando um quarto ou um passeio de iate.

Características principais:

• Coral-rosa Rausch (#ff385c) como cor de marca de acento único, usada apenas para CTAs principais e o botão de pesquisa
• Fotografia em sangria total em 4:3 / 16:9 com suave arredondamento de cantos (14–20px) como vocabulário visual principal
• Ícones de categoria renderizados em 3D combinados com abas tipográficas — o único lugar onde o sistema permite ilustração
• Botões de ícone circulares 50% (seta voltar, compartilhar, favorito, setas de carrossel) espalhados por toda a interface
• Airbnb Cereal VF carrega cada etiqueta, desde notas legais de 8px até títulos de seção de 28px — um sistema de família única
• Codificação de cor por nível de produto: Airbnb Plus (magenta #92174d), Airbnb Luxe (roxo profundo #460479), Airbnb (coral Rausch)
• Medalhão de prêmio Guest Favorite — número de avaliação gigante centralizado entre duas coroas de louros, um dos momentos mais reconhecíveis do sistema
• Painel de reserva fixo com uma pilha preço → datas → hóspedes, ancorado na coluna direita no desktop, transformando-se em uma barra de «Reservar» ancorada na parte inferior no mobile
• Navegação mobile fixada na parte inferior (Explorar / Listas de desejos / Entrar) com um toque Rausch no estado ativo

2. Paleta de cores e papéis

Principal

• Rausch (#ff385c): O coral-rosa característico da marca. Variável CSS --palette-bg-primary-core. Usado para: botão principal «Reservar», botão de envio de pesquisa, sublinhado de aba ativa, preenchimento do coração de lista de desejos, ênfase de preço. A cor de maior visibilidade em cada página.

Secundárias e de destaque

• Deep Rausch (#e00b41): Uma variante mais saturada. Variável CSS --palette-bg-tertiary-core. Usado para estados de botão pressionado/ativo e pontos terminais de gradiente.
• Plus Magenta (#92174d): Variável CSS --palette-bg-primary-plus. A cor de marca para o nível de produto Airbnb Plus — uma oferta de anúncios curados de alto padrão.
• Luxe Purple (#460479): Variável CSS --palette-bg-primary-luxe. A cor de marca para o nível de produto Airbnb Luxe — aluguéis de villas e propriedades de luxo.
• Info Blue (#428bff): Variável CSS --palette-text-legal. Usado para links legais/informativos (termos, privacidade, divulgações) — a única cor de link não monocromática no sistema.

Superfície e fundo

• Canvas White (#ffffff): O fundo de página padrão. Cada cartão, cada container, cada página de detalhe começa aqui.
• Soft Cloud (#f7f7f7): Tinte de subsuperfície sutil usado em fundos de rodapé, wrappers de visualização de mapa e seções de «todo o resto» que desejam recuar do branco principal.
• Hairline Gray (#dddddd): Cor de borda 1px onipresente — separa cartões, linhas de comodidades, painéis de avaliações, colunas de rodapé. O cavalo de batalha do sistema de layout.

Neutros e texto

• Ink Black (#222222): Variável CSS --palette-text-primary. O quase-preto do sistema. Cada título, cada parágrafo de corpo, cada etiqueta de navegação, cada preço. Usado em ~90% de todo o texto em uma página.
• Charcoal (#3f3f3f): Variável CSS --palette-text-focused. Usado no texto de entrada no estado focused e no texto de ênfase secundária.
• Ash Gray (#6a6a6a): Variável CSS --palette-bg-tertiary-hover. Etiquetas secundárias, texto de estilo de subtítulo «Aluguel de chalés» sob nomes de cidades, links de rodapé silenciados.
• Mute Gray (#929292): Variável CSS --palette-text-link-disabled. Botões desativados e metadados de baixa prioridade.
• Stone Gray (#c1c1c1): Divisores terciários, traços de ícones, avatares de espaço reservado.

Semânticos e de destaque

• Error Red (#c13515): Variável CSS --palette-text-primary-error. Erros de validação de formulários, avisos de ação destrutiva.
• Deep Error (#b32505): Variável CSS --palette-text-secondary-error-hover. Variantes pressionadas/ativas de estados de erro.
• Translucent Black (rgba(0, 0, 0, 0.24)): Variável CSS --palette-text-material-disabled. Etiquetas de estilo material desativadas.

Sistema de gradientes

O gradiente de marca do Airbnb aparece com parcimônia, normalmente apenas no logotipo e no momento de marca do botão de pesquisa:

linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)

Essa varredura coral → magenta é o «momento de marca» — nunca usado como superfície completa, apenas como preenchimento de pílula estreita ou tratamento de logo.

3. Regras tipográficas

Família tipográfica

• Airbnb Cereal VF (principal e única): O sans-serif de peso variável proprietário que carrega todo o sistema. Fontes de fallback (em ordem): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

Pesos observados nos tokens extraídos: 500, 600, 700. Sem 400-regular — o peso de «corpo» do sistema é 500, o que dá a cada bloco de texto uma densidade ligeiramente maior que se lê como confiante e deliberada.

Funcionalidades OpenType: salt (alternativas estilísticas) é usado nas etiquetas compactas de 11px e 14px 600 — provavelmente para formatação mais compacta de numerais e caracteres especiais. Não foram observadas funcionalidades de ligaduras ou numerais fracionários.

Hierarquia

Princípios

• Uma família, muitos pesos. Airbnb Cereal VF lida com tudo, do texto legal de 8px aos títulos de página de 28px — a identidade visual vem da própria família, não da mistura de tipografias.
• 500 é o novo 400. O peso «regular» do sistema é 500, dando a cada parágrafo uma textura ligeiramente mais confiante do que o padrão da web.
• Tracking negativo apenas para tipos de display. Títulos de 20px e acima comprimem o tracking em -0,18 a -0,44px para um aspecto cinzelado; tamanhos de corpo permanecem com tracking 0 para legibilidade.
• Alturas de linha ajustadas para manchetes, generosas para corpo. O tipo de display roda a 1,18–1,25 (ajustado); corpo e legendas se abrem para 1,43 para conforto de leitura longa.
• Sem maiúsculas exceto a 8px. A única transformação em maiúsculas no sistema é o sobrescrito de 8px — em qualquer outro lugar, a capitalização de sentença com sutis mudanças de peso faz o trabalho.

Nota sobre substitutos de fontes

Airbnb Cereal VF é proprietária. O substituto open source mais próximo é Circular Std (ainda comercial) ou Inter (gratuito, Google Fonts) com espaçamento de letras reduzido em -0,01em nos tamanhos de display. Para fidelidade estrita de marca, a cadeia de fallback documentada (Circular, -apple-system, system-ui) renderiza aceitavelmente no macOS/iOS onde system-ui se resolve para San Francisco, que tem proporções semelhantes.

4. Estilização de componentes

Botões

CTA principal («Reservar», «Pesquisar», «Adicionar datas»)

• Fundo: Rausch #ff385c
• Texto: Canvas White #ffffff, Airbnb Cereal 500, 16px
• Preenchimento: ~14px vertical, 24px horizontal
• Raio: 8px (retangular) ou 50% (variante de ícone circular)
• Borda: nenhuma
• Ativo/pressionado: transform: scale(0.92) mais um anel de foco de 2px #222222 em 0 0 0 2px

Botão secundário («Torne-se um anfitrião», ações terciárias delineadas)

• Fundo: #ffffff
• Texto: Ink Black #222222, Airbnb Cereal 500, 14–16px
• Preenchimento: 10px 16px
• Raio: 20px (pílula) ou 8px (retangular)
• Borda: 1px solid Hairline Gray #dddddd

Botão circular apenas com ícone (seta voltar, compartilhar, favorito, controles de carrossel)

• Fundo: #f2f2f2 (ligeiramente fora do branco) ou branco com borda preta translúcida de 1px
• Ícone: traço de contorno #222222, 16–20px
• Tamanho: diâmetro 32–44px
• Raio: 50%
• Ativo/pressionado: transform: scale(0.92); anel branco sutil de 4px 0 0 0 4px rgb(255,255,255) para separar de fundos fotográficos coloridos

Botão desativado

• Fundo: #f2f2f2
• Texto: Stone Gray #c1c1c1
• Opacidade: 0,5

Botão de aba em pílula (seletor de categoria «Casas / Experiências / Serviços»)

• Fundo: transparente
• Texto: Ink Black #222222, Airbnb Cereal 500, 16px
• Preenchimento: 8px 14px
• Estado ativo: sublinhado Ink Black de 2px abaixo da etiqueta
• Combinado com um ícone ilustrado renderizado em 3D de 36–48px acima da etiqueta

Cartões e containers

Cartão de anúncio (grade da página inicial, resultados de pesquisa)

• Fundo: #ffffff
• Raio: 14px na imagem, o texto fica diretamente abaixo em fundo transparente
• Imagem: proporção 4:3, em sangria total, arredondada com o mesmo raio de 14px
• Preenchimento: nenhum no container externo; 12px de espaçamento entre a imagem e as linhas de metadados
• Sombra: nenhuma — a separação vem do espaço em branco e do raio intrínseco da fotografia
• Padrão de metadados: cidade/região na linha 1 (16px 600), distância/duração na linha 2 (14px 500 Ash Gray), intervalo de datas na linha 3, linha de preço com «por noite» na parte inferior

Painel de reserva da página de detalhes (coluna direita fixa em páginas de quarto/experiência)

• Fundo: #ffffff
• Raio: 14–20px
• Borda: 1px solid Hairline Gray #dddddd
• Sombra: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 — uma elevação sutil de três camadas empilhadas
• Preenchimento: 24px
• Largura: ~370px, ancorado 120–140px abaixo do topo da viewport
• Conteúdo: título do preço → seletor de datas → dropdown de hóspedes → CTA principal → nota de rodapé «Você não será cobrado ainda»

Cartão de grade de comodidades (em páginas de detalhes de anúncios)

• Fundo: #ffffff
• Borda: 1px solid Hairline Gray #dddddd no nível da linha (não por item)
• Preenchimento: 16px vertical por linha de comodidade
• Padrão ícone + etiqueta: ícone de contorno 24px à esquerda, etiqueta 16px 500 à direita

Cartão de avaliação (avaliação individual em páginas de detalhes)

• Fundo: #ffffff, sem borda
• Preenchimento: 0 (depende dos espaços da grade)
• Conteúdo: avatar circular 40px + nome 16px 600 + data 14px 400 Ash Gray em uma linha, depois parágrafo de corpo 14px 500 abaixo

Entradas e formulários

Barra de pesquisa (página inicial principal)

• Fundo: #ffffff
• Borda: 1px solid Hairline Gray #dddddd envolvendo os três segmentos (Onde / Quando / Quem)
• Raio: 32px (pílula completa)
• Sombra: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — sensação de flutuação sutil
• Estrutura: três segmentos divididos por finos divisores verticais, cada segmento tem uma etiqueta 12px 500 acima de um espaço reservado 14px 500
• Envio: botão de ícone circular Rausch na borda direita, diâmetro 48px

Entrada de texto (formulários genéricos)

• Fundo: #ffffff
• Borda: 1px solid Hairline Gray #dddddd
• Raio: 8px
• Preenchimento: 14px 16px
• Foco: a borda muda para Ink Black, adiciona anel externo preto 0 0 0 2px
• Erro: a borda muda para #c13515 (Error Red), o texto de ajuda usa a mesma cor

Seletor de datas

• Grade de calendário: layout de 7 colunas, células de dias circulares 50% com 40–44px de largura
• Intervalo selecionado: fundo Ink Black #222222 com numerais brancos
• Âncoras de início/fim: círculos preenchidos maiores; datas intermediárias usam o tinte Soft Cloud #f7f7f7

Navegação

Navegação superior (Desktop)

• Altura: ~80px
• Fundo: #ffffff
• Esquerda: logotipo do Airbnb em Rausch (102×32px)
• Centro: seletor de categoria de três abas (Casas / Experiências / Serviços) com ícones 3D de 36–48px empilhados acima de etiquetas 16px 500; a aba ativa tem sublinhado Ink Black de 2px
• Direita: link de texto «Torne-se um anfitrião», depois globo circular 32px (idioma), depois menu hamburger de avatar 36px
• Border-bottom: 1px solid Hairline Gray #dddddd

Navegação superior (Mobile)

• Pílula de pesquisa em linha única ocupa toda a largura: espaço reservado «Comece sua pesquisa» com um pequeno ícone de lupa
• Abaixo: o seletor de categoria de três abas persiste (Casas / Experiências / Serviços) — os ícones ilustrados encolhem para ~28px
• Barra de abas fixada na parte inferior: Explorar (estado ativo Rausch) / Listas de desejos / Entrar — ícones 24px acima de etiquetas 12px

Navegação secundária da página de detalhes de anúncio

• Rolagem horizontal fixa de links de âncora (Fotos · Comodidades · Avaliações · Localização · Anfitrião) aparece ao rolar além da imagem hero
• Altura: 56px
• Border-bottom: 1px solid Hairline Gray

Tratamento de imagens

• Proporções principais: 4:3 para grades de anúncios da página inicial, 16:9 para fotografia hero de experiências, 1:1 para avatares
• Raio: 14px em imagens de grade de anúncios, 20px em molduras de fotos hero de páginas de detalhes, 50% em avatares
• Grade de imagens em páginas de detalhes: grade de cinco fotos com uma imagem grande à esquerda (50% de largura) e quatro fotos menores em uma grade 2×2 à direita, todas compartilhando o container arredondado externo de 20px
• Carregamento lazy: uso intensivo de loading="lazy" com prévias de espaço reservado borradas
• Carrossel: botões de seta circulares de 32px sobrepostos à imagem, centralizados verticalmente; indicadores de pontos ficam a 12px acima da borda inferior

Componentes assinatura

Medalhão de prêmio Guest Favorite (destacado em páginas de detalhes de anúncios com alta avaliação)

• Número de avaliação centralizado renderizado a 44–56px 700
• Duas ilustrações SVG de coroa de louros desenhadas à mão flanqueando esquerda e direita a ~48px de altura
• Abaixo: etiqueta «Guest Favorite» a 12px 700 em maiúsculas com tracking de 0,32px, e uma sub-etiqueta curta a 14px 500 Ash Gray
• Bloco de largura total, sem borda de container — fica diretamente sobre o canvas branco

Seletor de categoria de três abas (aparece no topo de cada superfície de navegação)

• Três abas: Casas / Experiências / Serviços
• Cada aba: ícone ilustrado renderizado em 3D (~48px de altura) acima de uma etiqueta 16px 500
• Experiências e Serviços atualmente carregam uma pequena pílula azul marinho «NOVO» (texto branco 12px 700 sobre fundo azul escuro) flutuando no canto superior direito do ícone
• Aba ativa: sublinhado Ink Black de 2px abaixo da etiqueta

Grade de cidades de inspiração (página inicial «Inspiração para futuras viagens»)

• Grade de 6 colunas de links de destino no desktop, 2 colunas no mobile
• Cada célula: nome de cidade 16px 600 na linha 1, subtítulo de tipo de aluguel 14px 500 Ash Gray na linha 2 («Aluguel de chalés», «Aluguel de villas»)
• Sem imagens — grade somente de texto
• Tabulada acima por categoria (Popular / Artes e cultura / Praia / Montanhas / Ao ar livre / Atividades / Dicas de viagem e inspiração / Apartamentos amigáveis ao Airbnb) — a aba ativa tem sublinhado de 2px e mudança de peso

Cartão fixo de reserva (páginas de detalhes de anúncios)

• Permanece fixo a 120px abaixo do topo da viewport no desktop conforme o usuário rola além do hero
• Colapsa para uma barra de largura total na parte inferior no mobile com uma etiqueta «A partir de R$ X / noite» e uma pílula Rausch «Reservar»
• Sempre exibe: título do preço → exibição de datas → seletor de hóspedes → CTA Rausch → isenção «Você não será cobrado ainda»

Cartão de anfitrião de experiência (páginas de detalhes de experiências)

• Container arredondado de largura total com uma fotografia de capa 3:2 no topo
• Avatar do anfitrião (circular, 56px) sobrepondo a borda inferior da capa em 50%
• Abaixo da sobreposição: nome do anfitrião a 16px 700, tempo de anfitrionagem a 14px 500 Ash Gray, pequeno botão de pílula Rausch «Enviar mensagem ao anfitrião»
• Usado como transição entre avaliações e o bloco de comodidades/localização

Faixa «Coisas importantes» (páginas de detalhes de anúncios)

• Grade de 3 colunas de blocos de regras/políticas (Regras da casa, Segurança e propriedade, Política de cancelamento)
• Cada coluna: ícone no topo, título 16px 600, corpo 14px 500 Ash Gray, link «Mostrar mais» sublinhado em Ink Black
• Separador: bordas superior e inferior Hairline Gray 1px na faixa inteira

5. Princípios de layout

Sistema de espaçamento

• Unidade base: 8px
• Escala extraída: 2, 3, 4, 5,5, 6, 8, 10, 11, 12, 15, 16, 18,5, 22, 24, 32px — finamente granulada com alguns valores fora da grade usados para alinhamento de ícones perfeito ao pixel
• Preenchimento de seção: ~48–64px em cima/baixo no desktop, 24–32px no mobile
• Preenchimento interno do cartão: 24px em painéis de reserva e cartões grandes, 16px em linhas de comodidades, 12px em metadados de cartão de anúncio
• Calha entre cartões de anúncio: 24px desktop, 16px mobile
• Entre linhas de texto empilhadas: 4–8px (muito ajustado — reforça a sensação de «informação densa» dos anúncios de viagem)

Grade e container

• Largura máxima do conteúdo: 1760–1920px em ultra-wide (o Airbnb deixa a grade respirar mais do que a maioria dos sites); 1280px na maioria das páginas de detalhes
• Grade de anúncios da página inicial: 6 colunas em ≥1760px, 5 em ≥1440px, 4 em ≥1128px, 3 em ≥800px, 2 em ≥550px, 1 abaixo
• Página de detalhes: 2 colunas assimétricas — conteúdo principal ~58%, painel de reserva fixo ~36% à direita, ~6% de calha
• Rodapé: 3 colunas Suporte / Hospedagem / Airbnb

Filosofia do espaço em branco

O Airbnb é densamente informativo, mas nunca sufocante. O espaço em branco é usado para agrupar — os cartões de anúncio têm 24px de calha para que cada fotografia seja lida como um objeto distinto, mas os metadados abaixo de cada cartão usam espaços de 4–8px para que o preço/cidade/data se sinta como uma unidade. O painel de reserva da página de detalhes tem 24px de preenchimento interno, mas as linhas dentro (seletor de datas, seletor de hóspedes, CTA) são empilhadas a 12px — o limite entre o cartão e a página faz mais trabalho de separação do que o conteúdo dentro.

Escala de raio de borda

6. Profundidade e elevação

Filosofia de sombras: o Airbnb usa sombras em camadas empilhadas em vez de uma única sombra projetada. A sombra de três camadas do painel de reserva se lê como uma única elevação coesa, mas na verdade são três sombras separadas com diferentes valores de opacidade/desfoque — criando um anti-serrilhamento sutil no perímetro da sombra que parece premium sem ser pesado.

Profundidade decorativa

• Fotografia como profundidade: o sistema depende fortemente de fotografia em sangria total para criar profundidade visual; sombras e gradientes são usados com moderação para que as fotografias façam o trabalho pesado
• Medalhão de coroa de louros: o prêmio Guest Favorite usa duas ilustrações SVG de louros que dão ao número de avaliação de outra forma plano uma presença cerimonial, como um troféu
• Ícones de categoria renderizados em 3D: os ícones Casas/Experiências/Serviços têm sua própria iluminação interna suave e sutis sombras projetadas assadas na arte — o único lugar onde a marca permite ilustração «dimensional»

7. O que fazer e o que não fazer

Fazer

• Reservar Rausch #ff385c para ações principais e o indicador de aba ativa — nunca diluí-lo com usos decorativos.
• Deixar a fotografia respirar — recortes 4:3 com cantos arredondados 14–20px, sem texto sobreposto, sem véus de gradiente.
• Usar Ink Black #222222 para cada camada de texto abaixo de Rausch — este é o quase-preto do sistema, nunca o verdadeiro #000000.
• Combinar os ícones ilustrados 3D do seletor de categoria de três abas com tipografia plana — não misturar estilos de ilustração dentro de uma única superfície.
• Empilhar três sombras de baixa opacidade (~2%, 4%, 10%) para criar a elevação assinatura do painel de reserva.
• Usar bordas Hairline Gray #dddddd de 1px para cada divisor cartão a cartão e linha a linha.
• Tratar o painel de reserva como fixo no desktop, colapsando para uma barra de reserva ancorada na parte inferior no mobile.
• Usar espaçamento de 4–8px dentro de grupos de metadados e 24px entre cartões — a densidade de informação é intencional.

Não fazer

• Não introduzir cores de destaque secundárias fora da paleta de níveis de produto Rausch / Plus Magenta / Luxe Purple.
• Não colocar texto dentro das fotografias — as legendas sempre ficam abaixo da imagem, nunca sobrepostas.
• Não usar etiquetas em maiúsculas exceto o único papel de sobrescrito de 8px.
• Não arredondar botões de ícone para nada além de 50% — o circular é a geometria assinatura do sistema.
• Não adicionar sombras projetadas aos cartões de anúncio — eles ficam sobre canvas branco sem elevação.
• Não usar fundos de gradiente — o único gradiente no sistema é uma varredura estreita Rausch → magenta no logotipo.
• Não usar o peso tipográfico 400-regular — o peso de corpo do Airbnb Cereal é 500.
• Não substituir Airbnb Cereal VF por uma tipografia de display diferente — o sistema é intencionalmente de família única.

8. Comportamento responsivo

Breakpoints

O Airbnb declara ~60 breakpoints (artefato de design de sua biblioteca de componentes), mas as mudanças de layout significativas ocorrem em um conjunto muito menor:

Alvos de toque

Todos os elementos interativos atendem ou excedem 44×44px. A família de botões de ícone circulares é especificamente dimensionada de 32–44px com 8–12px de preenchimento de área de toque estendido. O botão principal Rausch «Reservar» tem ~48px de altura. A área de toque do seletor de categoria de três abas é o retângulo completo de etiqueta-mais-ícone (tipicamente ~64×80px por aba).

Estratégia de colapso

• Nav: A nav superior mantém o logotipo do Airbnb + seletor de três abas no tablet e acima; no mobile o seletor desliza logo abaixo da pílula de pesquisa, e os controles de globo/avatar se movem para uma barra de abas ancorada na parte inferior.
• Barra de pesquisa: Pílula de três segmentos (Onde / Quando / Quem) com um botão de envio circular Rausch no desktop; colapsa para uma pílula de linha única «Comece sua pesquisa» no mobile, cujo toque abre uma folha de pesquisa em tela cheia.
• Painel de reserva: Coluna direita fixa em ≥1128px; em linha dentro da coluna de conteúdo principal entre 800–1127px; pílula «Reservar» fixada na parte inferior em <800px.
• Grade de anúncios: Reformata 6 → 5 → 4 → 3 → 2 → 1 colunas através dos breakpoints.
• Grade de imagens da página de detalhes: Layout de cinco imagens (1 grande + 4 pequenas) no desktop; torna-se um carrossel em sangria total deslizável no mobile com indicadores de pontos de página.
• Rodapé: O layout de 3 colunas colapsa para coluna única empilhada em <800px.

Comportamento de imagens

• loading="lazy" universal, com prévias de espaço reservado borradas com parâmetro im_w= de URL servidas primeiro
• Imagens responsivas usam a CDN muscache.com do Airbnb com o parâmetro de consulta im_w para entrega baseada em largura (im_w=240, im_w=720, im_w=1200, im_w=2400)
• Sem recortes de direção de arte — a mesma imagem é escalada para cima/baixo pelos breakpoints
• Carrosséis ajustam automaticamente a altura da foto para manter uma proporção 4:3 consistente independentemente do aspecto da fonte

9. Guia de prompts para agentes

Referência rápida de cores

• CTA principal: «Rausch (#ff385c)»
• Fundo de página: «Canvas White (#ffffff)»
• Subsuperfície: «Soft Cloud (#f7f7f7)»
• Texto de título / corpo: «Ink Black (#222222)»
• Texto secundário: «Ash Gray (#6a6a6a)»
• Borda / divisor: «Hairline Gray (#dddddd)»
• Erro: «Error Red (#c13515)»
• Link informativo: «Info Blue (#428bff)»
• Destaque de nível Luxe: «Luxe Purple (#460479)»
• Destaque de nível Plus: «Plus Magenta (#92174d)»

Exemplos de prompts de componentes

• «Crie um botão principal Reservar: fundo Rausch (#ff385c), etiqueta branca Airbnb Cereal 500 a 16px, preenchimento 14px × 24px, raio de borda 8px, sem sombra. Em ativo/pressionado adicione transform: scale(0.92) com um anel de foco Ink Black de 2px (0 0 0 2px #222222).»
• «Construa um cartão de anúncio com uma fotografia 4:3 em sangria total com raio de borda 14px, sem sombra de container; abaixo da imagem empilhe três linhas de texto com espaços de 4px: nome de cidade a 16px 600 Ink Black, tipo de aluguel a 14px 500 Ash Gray (#6a6a6a), e faixa de preço a 16px 500 Ink Black com um sufixo por noite de 14px.»
• «Projete um painel de reserva fixo: fundo branco, raio de borda 14px, borda Hairline Gray (#dddddd) de 1px, sombra de elevação de 3 camadas (rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0), preenchimento 24px, largura 370px, ancorado a 120px abaixo do topo da viewport no desktop. Conteúdo: título do preço, seletor de datas, dropdown de hóspedes, CTA principal Rausch e uma isenção Ash Gray de 12px Você não será cobrado ainda.»
• «Crie um seletor de categoria de três abas: três abas de igual largura com etiquetas Casas, Experiências, Serviços; cada aba tem um ícone ilustrado renderizado em 3D (~48px de altura) (casa, balão, campainha) acima de uma etiqueta 16px 500 Ink Black; a aba ativa recebe sublinhado Ink Black de 2px; adicione uma pequena pílula 12px 700 branca NOVO sobre fundo azul marinho escuro no canto superior direito dos ícones de Experiências e Serviços.»
• «Renderize o medalhão de prêmio Guest Favorite: um número de avaliação centralizado a 52px 700 Ink Black, flanqueado à esquerda e à direita por coroas de louros SVG desenhadas à mão a ~48px de altura; abaixo, uma etiqueta de 12px 700 em maiúsculas GUEST FAVORITE com tracking de 0,32px; sub-etiqueta a 14px 500 Ash Gray; bloco de largura total situado diretamente sobre o canvas branco sem borda de container.»

Guia de iteração

Ao refinar telas existentes geradas com este sistema de design:

1. Focar em UM componente por vez.
2. Referenciar nomes de cores específicos e códigos hexadecimais deste documento (ex.: «Ink Black #222222», não «cinza escuro»).
3. Usar descrições em linguagem natural junto com medidas («elevação sutil de três camadas» em vez de uma longa string de sombras).
4. Descrever o «sentimento» desejado («estilo de revista, fotografia em primeiro lugar» vs «utilidade densa»).
5. Sempre usar por padrão Airbnb Cereal VF 500 para corpo e 600–700 para ênfase — nunca 400.
6. Manter o rosa Rausch escasso — se mais de um elemento de cor Rausch aparecer por viewport, considere se um deveria ser neutralizado.

Lacunas conhecidas

• Cartões de grade de anúncios da página inicial: a grade principal de cartões de propriedade (a superfície visual principal do airbnb.com) não foi totalmente capturada nas capturas de tela da página inicial extraídas — o conteúdo carregou apenas parcialmente. As especificações de cartão de anúncio acima são inferidas da estrutura da grade de inspiração e das convenções mais amplas do Airbnb; confirme as proporções exatas e a hierarquia de metadados no site ao vivo antes do uso em produção.
• Ícones de categoria de Experiências: os ícones ilustrados 3D para Casas / Experiências / Serviços são servidos como ativos raster; suas especificações exatas de arquivo fonte (SVG vs PNG, dimensões de pixels renderizados) não estão documentadas aqui.
• Tempos de animação e transição: não capturados — escopo de extração estática.
• Modo escuro: o Airbnb não inclui um modo escuro nativo nas superfícies de produto extraídas; este documento descreve o único tema de modo claro.