Notion
Un cuaderno de papel caliente bajo el sol del mediodía.
La interfaz de Notion se asemeja a un querido cuaderno de papel a plena luz del día: un lienzo cálido y cremoso (#f6f5f4) que resulta agradable al tacto en lugar de estéril, una tipografía sans-serif generosa que aporta peso editorial al texto del producto, y el color utilizado como una puntuación sutil: las "píldoras" color melocotón resaltan los verbos, un único azul ancla la acción principal, y una gama rotativa de tonos de acento (coral, ámbar, cielo, medianoche) colorea los fondos de las tarjetas como si fueran pegatinas. Las tarjetas están dispuestas en un lienzo con bordes y esquinas finas —sin sombras ni cromo— como las secciones rayadas de un cuaderno Moleskine. La animación es lúdica y dinámica, con transiciones suaves a 200 ms y animaciones de personajes elásticas que dan vida a la interfaz sin ser decorativas.
Centrado, el ancho máximo está limitado a aproximadamente 1440px. El elemento principal es una pila centrada: una fila de símbolos → un gran titular de dos líneas con una píldora de color incrustada → un subtítulo → una fila con dos botones de llamada a la acción → una maqueta de interfaz de usuario de producto grande. Debajo del elemento principal, las secciones alternan entre cuadrículas de tarjetas blancas y paneles de acento a todo color. El muro de logotipos es una cuadrícula centrada de una sola fila de logotipos de socios en escala de grises. Los bloques de características utilizan un diseño de dos columnas (texto a la izquierda, panel de color a la derecha), alternando de izquierda a derecha entre secciones. La sección "Pregunte a sus asistentes cuando lo necesite" utiliza una cuadrícula de tarjetas de 2x2, donde la tarjeta superior ocupa todo el ancho y la fila inferior se divide en dos columnas iguales. Los márgenes entre secciones son generosos (~80px), creando un ritmo vertical tranquilo. La navegación es una barra superior fija de 64px de altura con elementos de navegación centrados y botones de acción alineados a la derecha.
Las ilustraciones son primordiales, sin fotografías. El lenguaje visual se basa en símbolos planos e ilustrados (bordes redondeados en círculos de 2 px de color), elementos decorativos abstractos (garabatos dibujados a mano, purpurina, flechas, formas florales) y maquetas de la interfaz de usuario del producto. Los símbolos aparecen en la ventana principal como una fila horizontal de siete avatares y se dispersan por la página como puntuación lúdica. Las capturas de pantalla del producto son los únicos elementos visuales "reales": muestran la interfaz real de Notion (tableros Kanban, vistas de documentos, paneles de agentes de IA) con un conjunto completo de elementos y datos reales. La maqueta del producto en la ventana principal es grande, está centrada y proyecta una sola sombra que la separa del lienzo. No hay fotos de estilo de vida, ni imágenes de archivo, ni renders 3D abstractos.
Paleta
Marca
- Notion Blue
#0075de— El elemento principal que rellena el botón de llamada a la acción (CTA), un acento en la navegación activa, los botones de acción rellenos son el único esquema de color en un sistema casi monocromático que está lo suficientemente saturado como para ser percibido como un interruptor.
Neutral
- Paper Warmth
#f6f5f4— El lienzo de la página, el fondo de la ventana principal y el fondo de la sección son todos de colores cálidos, ligeramente beige, que le dan al sistema una sensación táctil y analógica. - Pure White
#ffffff— Superficies de las tarjetas, paneles en relieve, fondo con logotipo, texto contrastante sobre tarjetas oscuras. - Ink Black
#000000— Texto principal, enlaces de navegación, encabezados: se utilizan con diferentes niveles de transparencia (100%, 95%, 90%, 60%, 40%, 20%) para crear jerarquía sin añadir nuevos colores. - Charcoal
#111111— Una opción de texto oscuro para aquellas áreas de la interfaz de usuario donde el negro puro resultaría demasiado intenso. - Stone
#757575— Texto de navegación secundario, texto de ayuda atenuado, etiquetas de botones deshabilitadas: 60 % de transparencia de tinta - Graphite
#615d59— El texto principal tiene un tono cálido, un gris parduzco, que armoniza con el fondo cálido.
Tipografía
de 12 a 96 píxeles · 10 pasos
- NotionInter — reemplazo: Inter · esquemas 400, 500, 600, 700 · La tipografía principal sans-serif es una humanista geométrica con sutiles matices, utilizada en tamaños de 400 para el texto principal, 500 para la navegación/interfaz de usuario y 600-700 para los títulos. La escala de la tipografía utiliza un espaciado negativo pronunciado entre letras en tamaños mayores (-4,6 px a 96 px, -2 px a 72 px), lo que hace que el título se vea más compacto y seguro, en lugar de etéreo.
- Lyon Text — reemplazo: Source Serif Pro · esquemas 400 · La tipografía editorial con serifa, reservada para secciones específicas del texto principal y las introducciones de cada sección, se utiliza con moderación (cuatro veces) para dotar a la tipografía de peso literario, similar al de una cita en el diseño de una revista. Funciona como un acento sistémico más que como una jerarquía paralela.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 8px |
| Radio del botón | 8px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80px |
| Ancho de página | 1440px |
La IA construirá tu sitio web al estilo de Notion y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- ElevenLabs — Un reportaje fotográfico en tonos crema cálidos con titulares sutiles. Un cuaderno de estilo Bauhaus: papel color blanco hueso, tinta negra y un único detalle en morado y naranja para la presentación del producto.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Una mesa analítica tranquila sobre papel tibio
- Anthropic — Una revista científica de campo impresa en papel vitela de tonos cálidos: superficies de marfil sereno, encabezados editoriales con serifa y un único detalle en color arcilla que aparece solo cuando se requiere acción.
- Calendly — Tinta azul oscuro sobre mármol frío
- Augen Pro — La presentación blanca de Apple presenta un azul eléctrico, aséptico y minimalista, como único acento en un espacio monocromático.
- Antimetal — Una crónica editorial en papel color crema: una mañana tranquila en una revista científica, donde la sobriedad transmite confianza y las serifas hacen el trabajo pesado.
- Perk — Lima eléctrica sobre papel pergamino tibio
- Ditto — Un taller bañado por el sol donde se crean muestras de flores silvestres. Superficies de color crema cálido, una base de color amarillo vibrante, tintas azul marino intenso, formas orgánicas de color que florecen tras la pieza.
- Officevibe — Una revista editorial impresa en papel de un cálido color crema. Imagínese un ensayo reflexivo sobre gestión de recursos humanos, presentado como un producto: una tipografía cursiva con serifa que susurra a través de una moderna interfaz azul.