Revolut design.md
Letras enormes e seguras sobre gente e céu, com uma pílula grafite
Um banco de consumo guiado por fotos: imagens de estilo de vida e painéis pretos de ponta a ponta sustentam a página, títulos gigantes em Aeonik vão direto sobre a foto em branco e toda ação é uma pílula grafite bem arredondada. A interface em si quase não tem cor — grafite, branco e cinzas suaves.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/revolut/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Revolut, 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 revolut.com/en-US 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
Aeonik Pro
Alternativa grátis: Manrope 400/500 (Google Fonts)
Inter
Alternativa grátis: Inter (Google Fonts, same family)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 87.57px | 500 | -2.08px |
| heading | 51.79px | 500 | -0.6px |
| body-lg | 18px | 400 | 0 |
| button | 16px | 500 | 0 |
| small | 12px | 400 | 0.18px |
- tags
- 9999px
- cards
- 22.5px
- inputs
- 12px
- buttons
- 9999px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de revolut.com/en-US, para referência. Inspirado em Revolut, não é o design system oficial; o Faundr não tem ligação com Revolut, 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.
