Shopify design.md
Botões brancos em pílula e letras finas e enormes numa noite preta esverdeada
Uma vitrine escura e cinematográfica: vídeo ocupando o topo inteiro, depois um fundo quase preto puxado para o verde, títulos brancos enormes em peso fino com a segunda metade em cinza, botões brancos em pílula como única ação e fotos de produto em cards verde-petróleo quase sem sombra.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/shopify/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Shopify, 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 shopify.com/?locale=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
Shopify-Inter
Alternativa grátis: Inter (variable, Google Fonts), weights 300–600
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 96px | 300 | -1.92px |
| heading | 56px | 330 | -1.68px |
| heading-tight | 56px | 330 | -1.12px |
| title | 24px | 400 | -0.48px |
| card-title | 20px | 450 | 0 |
| body-lg | 20px | 400 | 0 |
| body | 18px | 400 | 0 |
| body-sm | 16px | 400 | 0 |
| button | 16px | 550 | 0 |
| caption | 14px | 420 | 0 |
| label | 14px | 500 | 0.28px |
- tags
- 9999px
- cards
- 12px
- inputs
- 8px
- buttons
- 9999px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de shopify.com/?locale=en-US, para referência. Inspirado em Shopify, não é o design system oficial; o Faundr não tem ligação com Shopify, 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.
