Linear design.md
Noite grafite, texto branco e contornos desenhados com luz
Uma ferramenta de produto quase preta com cara de engenharia: fundo grafite, texto branco-gelo em Inter no peso intermediário 510, contornos em branco translúcido no lugar de sombras, um único botão preenchido em pílula cinza-claro e a própria interface do app como ilustração principal.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/linear/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Linear, 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 linear.app 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
Inter Variable
Alternativa grátis: Inter 300/400/500/600 (Google Fonts); use 500 for 510 and 600 for 590
Berkeley Mono
Alternativa grátis: JetBrains Mono 400 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 64px | 510 | -1.408px |
| heading | 48px | 510 | -1.056px |
| subheading | 24px | 400 | -0.288px |
| card-title | 20px | 590 | -0.24px |
| body | 15px | 400 | -0.165px |
| body-sm | 13px | 400 | -0.039px |
| button | 13px | 510 | 0 |
| label | 12px | 510 | 0 |
| mono-caption | 12px | 400 | 0 |
- tags
- 16px
- cards
- 12px
- inputs
- 8px
- buttons
- 9999px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de linear.app, para referência. Inspirado em Linear, não é o design system oficial; o Faundr não tem ligação com Linear, 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.
