Mercury design.md
Um banco à meia-noite, iluminado por uma única pílula azul-lavanda
Um site escuro e silencioso, em azul-tinta: foto de paisagem cinematográfica no topo, texto cinza-lavanda claro em pesos intermediários e leves, e um único botão-pílula azul-lavanda como ação. A interface do produto aparece em painéis escuros discretos e cards quase brancos, separados por linhas finas em vez de cor.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/mercury/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Mercury, 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 mercury.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
arcadiaDisplay
Alternativa grátis: Inter Tight 400/500 (Google Fonts)
arcadia
Alternativa grátis: Inter (variable, 350–500) from Google Fonts
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 49px | 480 | 0 |
| heading | 42px | 480 | 0.42px |
| heading-sm | 32px | 480 | 0.48px |
| subheading | 28px | 360 | 0.42px |
| title | 24px | 480 | 0.48px |
| body-lg | 18px | 360 | 0 |
| body | 16px | 400 | 0 |
| button | 16px | 420 | 0 |
| caption | 12px | 400 | 0.24px |
- tags
- 4px
- cards
- 12px
- inputs
- 32px
- buttons
- 32px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de mercury.com, para referência. Inspirado em Mercury, não é o design system oficial; o Faundr não tem ligação com Mercury, 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.
