Vercel design.md
Um triângulo preto no papel branco e nada mais para distrair
Minimalismo rígido em preto e branco: fundo off-white, texto quase preto em Geist no peso exato 450 com espaçamento bem apertado, botões pretos em pílula, um único triângulo preto em 3D como imagem principal e os produtos dos clientes em molduras que somem no fundo.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/vercel/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Vercel, 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 vercel.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
Geist
Alternativa grátis: Geist 400/500/600 (free on Google Fonts); use 500 for 450 if the variable axis is unavailable
Geist Mono
Alternativa grátis: Geist Mono 400/500 (free on Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 64px | 400 | -3.84px |
| heading | 56px | 450 | -3.36px |
| subheading | 24px | 450 | -0.96px |
| body-lg | 16px | 450 | -0.32px |
| button | 16px | 500 | 0 |
| body | 14px | 400 | 0 |
| button-sm | 14px | 500 | 0 |
| small | 13px | 400 | 0 |
| label | 11px | 500 | 0.2px |
- tags
- 6px
- cards
- 6px
- inputs
- 6px
- buttons
- 9999px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de vercel.com, para referência. Inspirado em Vercel, não é o design system oficial; o Faundr não tem ligação com Vercel, 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.
