Framer design.md
Um palco preto onde só o produto acende
Um estúdio todo em preto, quase sem cor: títulos brancos geométricos e apertados, Inter cinza no resto, botões brancos pequenos com canto de 8px e um único azul elétrico que pertence ao próprio editor — molduras, seleções e o botão Publish brilhando no escuro.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/framer/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Framer, 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 framer.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
GT Walsheim
Alternativa grátis: Figtree 500 (Google Fonts)
Inter
Alternativa grátis: Inter (Google Fonts, same family)
Input Mono
Alternativa grátis: JetBrains Mono 400/700 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 54px | 500 | -2.16px |
| heading | 44px | 500 | -1.76px |
| body-lg | 18px | 400 | -0.2px |
| body | 15px | 400 | -0.1px |
| body-sm | 14px | 400 | -0.1px |
| label | 13px | 500 | 0 |
| button | 14px | 500 | 0 |
| mono | 12px | 400 | 0 |
| caption | 12px | 500 | 0 |
- tags
- 100px
- cards
- 20px
- inputs
- 8px
- buttons
- 8px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de framer.com, para referência. Inspirado em Framer, não é o design system oficial; o Faundr não tem ligação com Framer, 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.
