Notion
Un caderno de papel quente ao sol do mediodía
A interface de Notion semella un querido caderno de papel a plena luz do día: unha lona cálida e cremosa (#f6f5f4) que se sente táctil en lugar de estéril, unha xenerosa tipografía sans-serif que lle dá peso editorial á copia do produto e a cor usada como puntuación escasa (as "pílulas" cor pexego resaltan os verbos, un só azul ancora a acción principal e unha matriz rotatoria de tons de acento (coral, ámbar, ceo, medianoite) colorean os fondos das tarxetas como adhesivos. As tarxetas están dispostas nunha lona con bordos e esquinas finas (sen sombras, sen cromo) como as seccións raiadas dun caderno Moleskine. A animación é lúdica e elástica, con transicións suaves a 200 ms e animacións de personaxes elásticas que dan vida á interface sen ser decorativas.
Centrado, o ancho máximo está limitado a aproximadamente 1440 px. O elemento principal é unha pila centrada: unha fila de símbolos → un título grande de dúas liñas cunha pílula de cor incrustada → un subtítulo → unha fila con dous botóns de chamada á acción → unha maqueta grande da interface de usuario do produto. Debaixo do elemento principal, as seccións alternan entre grellas de tarxetas brancas e paneis de acento a toda cor. O muro do logotipo é unha grella centrada dunha soa fila de logotipos de socios en escala de grises. Os bloques de características usan un deseño de dúas columnas (texto á esquerda, panel de cor á dereita), alternando de esquerda a dereita entre as seccións. A sección "Pregunta aos teus asistentes baixo demanda" usa unha grella de tarxetas de 2x2, onde a tarxeta superior ocupa todo o ancho e a fila inferior está dividida en dúas columnas iguais. Os espazos entre as seccións son xenerosos (~80 px), creando un ritmo vertical tranquilo. A navegación é unha barra superior fixa de 64 px de altura con elementos de navegación centrados e botóns de acción aliñados á dereita.
As ilustracións son primordiais, sen fotos. A linguaxe visual baséase en símbolos planos e ilustrados (bordos redondeados en círculos de cores de 2 px), elementos decorativos abstractos (garabatos debuxados a man, purpurina, frechas, formas de flores) e maquetas da interface de usuario do produto. Os símbolos aparecen na xanela principal como unha fila horizontal de sete avatares e están esparexidos pola páxina como puntuación lúdica. As capturas de pantalla do produto son os únicos elementos visuais "reais": mostran a interface real de Notion (taboleiros Kanban, vistas de documentos, paneis de axentes de IA) cun conxunto completo de elementos e datos reais. A maqueta do produto na xanela principal é grande, está centrada e proxecta unha única sombra que a separa do lenzo. Non hai fotos de estilo de vida, nin imaxes de stock, nin renderizacións 3D abstractas.
Paleta
Marca
- Notion Blue
#0075de— O elemento principal que enche o botón de chamada á acción (CTA), un acento na navegación activa, os botóns de acción cheos son a única combinación de cores nun sistema case monocromático que está o suficientemente saturada como para ser percibida como un interruptor.
Neutro
- Paper Warmth
#f6f5f4— O lenzo da páxina, o fondo da xanela principal e o fondo da sección son cores cálidas e lixeiramente beixes que lle dan ao sistema unha sensación táctil e analóxica. - Pure White
#ffffff— Superficies das tarxetas, paneis en relevo, fondo do logotipo, texto contrastante en tarxetas escuras. - Ink Black
#000000— Texto principal, ligazóns de navegación, títulos: úsanse con diferentes transparencias (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) para crear xerarquía sen engadir novas cores. - Charcoal
#111111— Unha opción de texto escuro para aquelas áreas da IU onde o negro puro se vería demasiado intenso. - Stone
#757575— Texto de navegación secundario, texto auxiliar silenciado, etiquetas de botóns desactivadas: 60 % de tinta alfa - Graphite
#615d59— O texto principal ten un ton cálido - gris parduzco, que harmoniza co fondo cálido.
Tipografía
de 12 a 96 px · 10 pasos
- NotionInter — substitución: Inter · contornos 400, 500, 600, 700 · A fonte principal sans-serif é un humanista xeométrico con matices sutís, empregado en tamaños 400 para o corpo do texto, 500 para a navegación/interface de usuario e 600-700 para os títulos. A escala da fonte usa un espazado entre letras negativo agresivo en tamaños máis grandes (-4,6 px a 96 px, -2 px a 72 px), o que fai que o título pareza máis compacto e seguro, en lugar de lixeiro.
- Lyon Text — substitución: Source Serif Pro · contornos 400 · A fonte editorial serif, reservada para seccións individuais do texto principal e introducións de seccións, úsase con moderación (catro veces) para darlle ao tipo de letra peso literario, semellante a unha cita na maquetación dunha revista. Funciona como un acento sistémico en lugar dunha xerarquía paralela.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 8px |
| Radio do botón | 8px |
| Radio da tarxeta | 12px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 80px |
| Largura da páxina | 1440px |
A IA creará o teu sitio web ao estilo de Notion e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- ElevenLabs — Un ensaio fotográfico en tons crema cálidos con titulares sutís. Un caderno de estilo Bauhaus: papel cor casca de ovo, tinta negra e un único detalle morado e laranxa para a exhibición do produto.
- Awesomic — Malla editorial de zinc con signos de puntuación laranxas que lembran confeti
- Monad — revista técnica editorial en pergamiño quente
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Unha mesa analítica tranquila sobre papel quente
- Anthropic — Unha revista científica de campo sobre pergamiño cálido: superficies de marfil tranquilas, títulos editoriais con serigrafía e un único acento de arxila que só aparece cando é necesario actuar.
- Calendly — Tinta azul escura sobre mármore frío
- Augen Pro — A presentación branca de Apple presenta un azul eléctrico, clínico e lixeiro como único acento nun espazo monocromático.
- Antimetal — Unha crónica editorial en papel cor crema: unha mañá tranquila nunha revista científica, onde a moderación transmite confianza e as serifas fan o traballo pesado
- Perk — Lima eléctrica sobre papel pergamiño quente
- Ditto — Un obradoiro soleado creando mostras de flores silvestres. Superficies crema cálidas, unha cor base amarela vibrante, tintas azul mariño intenso, formas de cor orgánicas que florecen detrás da peza.
- Officevibe — Unha revista editorial en papel de cor crema cálida. Imaxina un ensaio reflexivo sobre a xestión de recursos humanos, presentado como un produto: unha fonte cursiva serif que susurra a través dunha interface azul moderna.