Notion design.md
Tinta preta, papel morno e uma caneta marca-texto
Um documento simpático em papel off-white morno: títulos pretos enormes e apertados em Inter, uma palavra destacada numa pílula amarela, desenhos à mão em traço preto, um único azul para a ação principal e o produto mostrado em janelas calmas com sombra suave.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/notion/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Notion, 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 notion.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
NotionInter
Alternativa grátis: Inter 400/500/600/700 (Google Fonts)
Lyon Text
Alternativa grátis: Source Serif 4 400 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 96px | 600 | -4.6px |
| heading | 54px | 700 | -1.875px |
| heading-sm | 42px | 700 | -1.5px |
| card-title | 22px | 700 | -0.25px |
| lead | 20px | 400 | -0.125px |
| quote | 18px | 400 | 0 |
| body | 16px | 500 | 0 |
| button | 16px | 500 | 0 |
| ui | 14px | 500 | 0 |
| caption | 12px | 500 | 0.125px |
- tags
- 4px
- cards
- 12px
- inputs
- 8px
- buttons
- 8px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de notion.com, para referência. Inspirado em Notion, não é o design system oficial; o Faundr não tem ligação com Notion, 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.
