Airbnb design.md
Foto em primeiro lugar e um botão coral para buscar
Um marketplace branco em que as fotos falam por si: fileiras de fotos de anúncios com cantos suaves, texto grafite numa sans geométrica arredondada, uma barra de busca flutuante em pílula e um único botão de busca vermelho-framboesa como a única cor além do logo.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/airbnb/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Airbnb, medido do site deles: siga as cores, fontes, cantos e componentes dele em toda tela que criar ou mudar. Onde ele usar uma fonte paga, use a alternativa grátis que o arquivo indica.
A página real
Capturada de airbnb.com em inglês, com 1440 px de largura.
Cores
Clique numa cor para copiar. O papel de cada uma está em inglês, como no arquivo.
Fontes e forma
Airbnb Cereal VF
Alternativa grátis: DM Sans 400/500/600 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| section-title | 20px | 600 | -0.18px |
| body | 14px | 400 | 0 |
| nav | 14px | 500 | 0 |
| card-title | 13px | 500 | 0 |
| meta | 12px | 400 | 0 |
| field-label | 12px | 500 | 0 |
| badge | 11px | 600 | 0 |
- tags
- 14px
- cards
- 20px
- inputs
- 32px
- buttons
- 50%
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de airbnb.com, para referência. Inspirado em Airbnb, não é o design system oficial; o Faundr não tem ligação com Airbnb, e o nome e as marcas são dela.
Faundr
Design.md só funciona se alguém confere.
O Faundr lê o seu design.md e confere cada tela que a IA mexe: cor fora do guia, componente refeito, menu cortado, celular quebrado.
