Spotify design.md
Palco preto, botão verde em pílula e letra que grita
Um palco quase preto onde manchetes gigantes, largas e pesadíssimas fazem o barulho, uma única pílula verde Spotify leva todas as chamadas para ação e cards de cor chapada, com cantos bem redondos, contam as histórias do produto.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/spotify/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Spotify, 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 spotify.com/us/premium 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
SpotifyMixUITitle (variable)
Alternativa grátis: Archivo at wdth 125, weights 300/400/700/800/900 (Google Fonts)
SpotifyMixUI
Alternativa grátis: Figtree 400/700 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 128px | 900 | 0 |
| heading-xl | 64px | 800 | 0 |
| heading-statement | 48px | 400 | 0 |
| heading | 32px | 700 | 0 |
| subheading | 24px | 300 | 0 |
| card-title | 20px | 700 | 0 |
| body | 16px | 400 | 0 |
| button | 16px | 700 | 0 |
| small | 14px | 400 | 0 |
| caption | 12px | 400 | 0 |
- tags
- 4px
- cards
- 24px
- inputs
- 4px
- buttons
- 9999px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de spotify.com/us/premium, para referência. Inspirado em Spotify, não é o design system oficial; o Faundr não tem ligação com Spotify, 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.
