Notion
Um caderno de papel quente sob o sol do meio-dia
A interface do Notion lembra um caderno de papel querido sob a luz do dia: uma tela quente e cremosa (#f6f5f4) que transmite uma sensação tátil em vez de estéril, uma tipografia generosa sem serifa que confere peso editorial ao texto do produto e cores usadas como pontuação esparsa — "pílulas" cor de pêssego destacam verbos, um único azul ancora a ação principal e uma variedade rotativa de tons de destaque (coral, âmbar, azul-celeste, azul-marinho) colorem os fundos dos cartões como adesivos. Os cartões são dispostos em uma tela com bordas e cantos finos — sem sombras, sem cromados — como as seções pautadas de um caderno Moleskine. A animação é divertida e dinâmica, com transições suaves a cada 200 ms e animações de personagens vibrantes que dão vida à interface sem serem meramente decorativas.
Centralizado, a largura máxima é limitada a aproximadamente 1440px. O elemento principal é uma pilha centralizada: uma linha de símbolos → um título grande de duas linhas com um ícone colorido incorporado → um subtítulo → uma linha com dois botões de chamada para ação → um mockup grande da interface do produto. Abaixo do elemento principal, as seções alternam entre grades de cartões brancos e painéis de destaque coloridos. O mural de logotipos é uma grade centralizada de uma única linha com os logotipos dos parceiros em tons de cinza. Os blocos de recursos usam um layout de duas colunas (texto à esquerda, painel colorido à direita), alternando da esquerda para a direita entre as seções. A seção "Pergunte aos seus assistentes sob demanda" usa uma grade de cartões 2x2, onde o cartão superior ocupa toda a largura e a linha inferior é dividida em duas colunas iguais. Os espaçamentos entre as seções são generosos (~80px), criando um ritmo vertical harmonioso. A navegação é uma barra superior fixa de 64px de altura com elementos de navegação centralizados e botões de ação alinhados à direita.
As ilustrações são fundamentais, sem fotos. A linguagem visual é construída sobre símbolos planos ilustrados (bordas arredondadas em círculos coloridos de 2px), elementos decorativos abstratos (rabiscos desenhados à mão, glitter, setas, formas de flores) e protótipos da interface do usuário do produto. Os símbolos aparecem na janela principal como uma linha horizontal de sete avatares e estão espalhados pela página como uma pontuação lúdica. Capturas de tela do produto são os únicos elementos visuais "reais": elas mostram a interface real do Notion (quadros Kanban, visualizações de documentos, painéis de agentes de IA) com um conjunto completo de elementos e dados reais. O protótipo do produto na janela principal é grande, centralizado e projeta uma única sombra que o separa da tela. Não há fotos de estilo de vida, imagens de banco de imagens ou renderizações 3D abstratas.
Paleta
Marca
- Notion Blue
#0075de— O elemento principal que preenche o botão de chamada à ação (CTA), um destaque na navegação ativa, os botões de ação preenchidos são o único esquema de cores em um sistema quase monocromático que é saturado o suficiente para ser percebido como um interruptor.
Neutro
- Paper Warmth
#f6f5f4— A tela da página, o fundo da janela principal e o fundo da seção são todos em tons quentes, ligeiramente bege, conferindo ao sistema uma sensação tátil e analógica. - Pure White
#ffffff— Superfícies de cartão, painéis em relevo, fundo com logotipo, texto contrastante em cartões escuros. - Ink Black
#000000— Texto principal, links de navegação e títulos - utilizados com diferentes níveis de transparência (100%, 95%, 90%, 60%, 40%, 20%) para criar hierarquia sem adicionar novas cores. - Charcoal
#111111— Uma opção de texto escuro para aquelas áreas da interface do usuário onde o preto puro ficaria muito agressivo. - Stone
#757575— Texto de navegação secundário, texto auxiliar silenciado, rótulos de botões desativados - 60% de transparência (alfa) - Graphite
#615d59— O texto principal tem um tom quente - cinza acastanhado, que harmoniza com o fundo também quente.
Tipografia
de 12 a 96px · 10 passos
- NotionInter — substituição: Inter · esboços 400, 500, 600, 700 · A principal fonte sem serifa é uma humanista geométrica com nuances sutis, usada nos tamanhos 400 para o corpo do texto, 500 para navegação/interface do usuário e 600-700 para títulos. A escala da fonte utiliza espaçamento negativo acentuado entre letras em tamanhos maiores (-4,6px em 96px, -2px em 72px), o que faz com que o título pareça mais compacto e imponente, em vez de leve.
- Lyon Text — substituição: Source Serif Pro · esboços 400 · A fonte serifada editorial, reservada para seções específicas do texto principal e introduções de seção, é usada com parcimônia (quatro vezes) para conferir peso literário à tipografia, semelhante a uma citação em um layout de revista. Ela funciona como um acento sistêmico, e não como uma hierarquia paralela.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 8px |
| Raio do botão | 8px |
| Raio do cartão | 12px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80px |
| Largura da página | 1440px |
A IA criará seu site no estilo Notion e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Mollie — Um balcão de cashmere, um livro-razão escuro. Deixe bastante espaço em branco para o design editorial ao redor do texto preto e, em seguida, reforce os pontos relacionados ao produto com tons quentes de creme, marrom expresso e fotos táteis de métodos de pagamento reais.
- Kagi — Uma sala de leitura separada. Crie um espaço branco aberto em torno de um texto em grafite marcante, usando detalhes sutis em roxo e superfícies em tons pastel quentes para quebrar a tranquilidade.
- Milanote — Milanote é um estúdio criativo dedicado. Crie páginas no estilo de galeria editorial usando painéis visuais flutuantes: paredes com molduras escuras, espaço de exibição branco e capturas de tela que parecem objetos reais com uma leve profundidade.
- Co2 — Um atlas climático sob a luz do inverno. Crie páginas como uma paisagem aérea documental, onde títulos com serifa, dados codificados por categorias e imagens gélidas destacam amplas margens brancas.
- GitButler — Turquesa no final do texto. Uma combinação de títulos serifados de alto contraste com sutis grades técnicas, superfícies em tom grafite quente e um discreto toque de turquesa.
- ElevenLabs — Um ensaio fotográfico em tons creme quentes com títulos sutis. Um caderno em estilo Bauhaus — papel cor de casca de ovo, tinta preta e um único detalhe em roxo e laranja para exibição do produto.
- Awesomic — Tela editorial em zinco com marcas de pontuação laranja que lembram confete.
- Monad — revista técnica editorial sobre pergaminho quente
- Dub — Painel de controle de papel de arroz fosco do Link
- Seline Analytics — Uma mesa analítica silenciosa sobre papel quente
- Anthropic — Uma revista científica de campo impressa em pergaminho de tom quente — superfícies de marfim sereno, títulos editoriais com serifa e um único detalhe em tom de barro que aparece apenas quando é necessário dar o que falar.
- Calendly — Tinta azul escura sobre mármore frio