Nike design.md
Maiúsculas condensadas gritando sobre atletas de ponta a ponta, numa vitrine branca
Uma vitrine que sai da frente da fotografia: imagens de campanha de ponta a ponta com títulos enormes em maiúsculas condensadas brancas, botões-pílula brancos pequenos e uma prateleira neutra em branco e cinza claro para os produtos. A interface é preta, branca e cinza; toda cor vem dos atletas.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/nike/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Nike, 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 nike.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
Nike Futura ND
Alternativa grátis: Anton 400 (Google Fonts)
Helvetica Now Display
Alternativa grátis: Inter 500 (Google Fonts)
Helvetica Now Text
Alternativa grátis: Inter 400/500 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 76px | 500 | 0 |
| heading | 24px | 500 | 0 |
| body | 16px | 400 | 0 |
| nav | 16px | 500 | 0 |
| button | 16px | 500 | 0 |
| body-sm | 14px | 500 | 0 |
| caption | 12px | 500 | 0 |
- tags
- 30px
- cards
- 0px
- inputs
- 24px
- buttons
- 30px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de nike.com, para referência. Inspirado em Nike, não é o design system oficial; o Faundr não tem ligação com Nike, 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.
