Lovable design.md
Papel quente, tinta preta e um pôr do sol subindo por baixo do prompt
Uma página creme e tranquila, com texto quase preto e botões pretos, onde toda a cor vem de um único gradiente suave de azul, rosa e vermelho brilhando atrás da caixa de prompt. Títulos em seminegrito com letras bem juntas; cards em creme sobre creme, cantos arredondados e quase nenhuma sombra.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/lovable/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Lovable, 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 lovable.dev 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
Camera Plain Variable
Alternativa grátis: Inter 400/500/600 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 48px | 600 | -1.92px |
| heading | 36px | 600 | -1.44px |
| heading-sm | 28px | 600 | -1.12px |
| subheading | 24px | 480 | -0.48px |
| body-lg | 18px | 400 | 0 |
| body | 16px | 400 | 0 |
| card-title | 16px | 600 | 0 |
| caption | 14px | 400 | 0 |
- tags
- 9999px
- cards
- 16px
- inputs
- 28px
- buttons
- 6px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de lovable.dev, para referência. Inspirado em Lovable, não é o design system oficial; o Faundr não tem ligação com Lovable, 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.
