Claude design.md
Uma serifa literária sobre papel marfim, escrita em quase-preto
Uma página calma, com cara de livro: fundo marfim quente, títulos em serifa leve, um sans cinza-quente discreto para o resto, o quase-preto como única cor de ação e uma faísca laranja-argila guardada para o logo e detalhes raros.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/claude/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Claude, 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 claude.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
anthropicSerif
Alternativa grátis: Source Serif 4 300/400/500 (Google Fonts)
anthropicSans
Alternativa grátis: DM Sans 400/500/600 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 56px | 330 | 0 |
| heading | 52px | 500 | 0 |
| heading-sm | 32px | 500 | 0 |
| price | 24px | 600 | 0 |
| subheading | 19px | 500 | 0 |
| question | 18px | 400 | 0 |
| body-lg | 17px | 400 | 0 |
| body | 15px | 400 | 0 |
| button | 15px | 500 | 0 |
| caption | 12px | 400 | 0.12px |
- tags
- 12px
- cards
- 24px
- inputs
- 9.6px
- buttons
- 8px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de claude.com, para referência. Inspirado em Claude, não é o design system oficial; o Faundr não tem ligação com Claude, 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.
