Apple design.md
O produto no palco e uma pílula azul para comprar
Uma galeria de blocos de ponta a ponta que alternam preto e cinza-claro, cada um com o nome do produto centralizado em SF Pro seminegrito, uma frase curta, um par de botões azuis em pílula e uma foto enorme do produto. Sem cards, sem sombras, sem enfeite: o produto é a única imagem e o azul é a única ação.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/apple/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Apple, 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 apple.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
SF Pro Display
Alternativa grátis: Inter 400/600/700 (Google Fonts)
SF Pro Text
Alternativa grátis: Inter 400/600 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 56px | 600 | -0.28px |
| heading | 40px | 600 | 0 |
| subheading | 28px | 400 | 0.196px |
| tagline | 21px | 400 | 0.231px |
| body | 17px | 400 | -0.374px |
| button | 17px | 400 | -0.374px |
| body-sm | 14px | 400 | -0.224px |
| caption | 12px | 400 | -0.12px |
- tags
- 980px
- cards
- 0px
- inputs
- 11px
- buttons
- 980px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de apple.com, para referência. Inspirado em Apple, não é o design system oficial; o Faundr não tem ligação com Apple, 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.
