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
- 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
- Augen Pro — A apresentação branca da Apple destaca um azul elétrico, clínico e leve, como único elemento de destaque em um espaço monocromático.
- Antimetal — Uma crônica editorial em papel creme — uma manhã tranquila em uma revista científica, onde a sobriedade transmite confiança e as serifas desempenham um papel fundamental.
- Perk — Cal elétrica em papel pergaminho quente
- Ditto — Uma oficina ensolarada criando amostras de flores silvestres. Superfícies em tons creme quentes, uma vibrante cor de base amarela, tintas em um profundo azul marinho, formas orgânicas de cores desabrochando ao fundo da obra.
- Officevibe — Uma revista editorial impressa em papel creme de tom quente. Imagine um ensaio instigante sobre gestão de RH, apresentado como um produto — uma fonte cursiva serifada que sussurra através de uma interface azul moderna.