Monad
Revista técnica editorial en pergamino cálido
Monad muestra toda su interfaz en un lienzo de pergamino cálido (#f6f3f1), lo que la distingue inmediatamente de la típica plantilla blanca pura de SaaS. Los titulares tienen un peso editorial y están escritos en Untitled Serif, una fuente de 400 puntos (nunca en negrita), mientras que todo el texto, la navegación y los elementos de la interfaz de usuario están escritos en ABC Diatype Mono, lo que le da al sitio la textura de un manual técnico tipografiado para una revista literaria. Un único azul brillante (Lake) proporciona el único acento cromático para las acciones clave; todo lo demás se mantiene en una paleta de grises cálidos, por lo que la superficie de la tarjeta color bígaro (#cfdaf5) y las suaves transiciones de degradado pastel (coral, azul cielo, menta, dorado) se sienten más como una puntuación intencional que como ruido. Los componentes se basan en bordes sutiles y contenedores de píldoras en lugar de sombras, y el ritmo se mantiene tranquilo y espacioso gracias a las sangrías tipo tarjeta y al amplio espacio vertical entre secciones.
El lenguaje visual se basa en un diagrama de canalización de datos desarrollado: nodos con forma de píldora delineados por finas líneas curvas, con pequeños iconos dentro de cada nodo que representan fuentes de datos (cualquier fuente, registros en la nube, vulnerabilidades) y destinos (SIEM, almacenamiento en la nube, lago de datos). El diagrama utiliza un suave resplandor radial verde en el centro para enfatizar la normalización de datos. Tonos atmosféricos degradados (coral → azul cielo, azul cielo → menta) con fuertes filtros de desenfoque crean suaves halos de color detrás del contenido principal y funcional. Los logotipos de los socios se muestran en una sola fila, enfatizando el impacto social. La tarjeta "Transformaciones de datos en curso" presenta una gran ilustración degradada con formas geométricas translúcidas superpuestas. No se utilizan fotografías; la marca comunica la información únicamente a través de tipografía, diagramas y esquemas de color.
Paleta
Marca
- Parchment
#f6f3f1— El lienzo de la página y gran parte del relleno de la superficie —este tono cálido y cremoso— es el color distintivo de la marca, lo que diferencia inmediatamente el sitio de las plantillas SaaS que son completamente blancas. - Lake Blue
#2b59d1— El morado se usa para resaltar fondos, franjas decorativas y como un sutil acento detrás del contenido. No debe usarse como color principal para las llamadas a la acción.
Neutral
- Off-Black
#242424— Relleno neutro de alto contraste para botones principales en superficies claras. - Periwinkle Mist
#cfdaf5— Una interfaz sobria para controles deshabilitados, paneles de baja prioridad y bloques de marcador de posición. - Sky Blue
#a0b5eb— Tope de gradiente decorativo: aparece en rellenos atmosféricos y líneas de flujo en el diagrama de tuberías, nunca se utiliza como relleno de la interfaz de usuario. - Mint
#a7fccd— Una paleta de colores secundaria para pequeños detalles decorativos cuando la paleta de colores principal necesita contraste. - Coral
#ff9473— Una paleta de colores secundaria para pequeños detalles decorativos cuando la paleta de colores principal necesita contraste. - Gold
#ecda98— Un punto decorativo con degradado es un toque cálido en las transiciones de degradado, que nunca se utiliza en interfaces de usuario funcionales.
Tipografía
De 12 a 80 píxeles · 10 pasos
- ABC Diatype Mono — reemplazo: JetBrains Mono · esquemas 400, 500 · Texto principal, navegación, botones, iconos, etiquetas y TODO el texto de la interfaz de usuario. Una fuente monoespaciada en todos los elementos funcionales le da a la interfaz la apariencia de un manual técnico; el texto principal de 16-20 px se percibe como datos, no como información de marketing. Las etiquetas de navegación y los iconos usan una fuente de 18 px con un espaciado entre letras más preciso; las fuentes más pequeñas y el metatexto usan una fuente de 12 px en mayúsculas. Se reserva un tamaño de fuente de 500 px para los elementos más destacados de la interfaz de usuario.
- Untitled Serif — reemplazo: Times New Roman · esquemas 400 · Solo para títulos y subtítulos: se utilizan con un grosor de 80 px (texto principal), 48 px (sección), 40 px y 32 px (subsecciones) y 24 px (títulos de tarjetas de descripción). El grosor de la fuente es fijo en 400 para todos los tamaños; el contraste natural de la fuente con serifa y el espaciado entre letras de -0,02 em proporcionan el foco principal en lugar de la negrita. Este es el estilo editorial: los títulos susurran con sofisticación tipográfica en lugar de gritar con fuerza.
- Untitled Sans — reemplazo: Inter · esquemas 400 · Fuente sans-serif sin título: encontrada en los datos extraídos pero no descrita por la IA.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 16px |
| Radio del botón | 100px |
| Radio de la tarjeta | 40px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64px |
| Ancho de página | 1432px |
La IA construirá tu sitio web al estilo de Monad 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
- Mollie — Un mostrador de cachemir, un libro de contabilidad oscuro. Deja amplio espacio en blanco para el diseño editorial alrededor del texto negro y refuerza los puntos relacionados con el producto con cremas cálidas, marrones espresso y fotos táctiles de métodos de pago reales.
- Kagi — Una sala de lectura independiente. Crea un espacio blanco abierto alrededor de un texto en grafito llamativo, utilizando sutiles toques de color púrpura y superficies en tonos pastel cálidos para romper la tranquilidad.
- Milanote — Milanote es un estudio creativo especializado. Crea páginas editoriales con estilo de galería utilizando paneles visuales flotantes: paredes con marcos oscuros, espacio de visualización en blanco y capturas de pantalla que parecen objetos reales con una sutil profundidad.
- Co2 — Un atlas climático a la luz del invierno. Crea páginas que evocan un paisaje aéreo, donde los títulos con serifa, los datos codificados por categorías y las imágenes heladas resaltan los amplios márgenes blancos.
- GitButler — El color turquesa se aprecia al final del texto. Una combinación de titulares con serifa de alto contraste, sutiles cuadrículas técnicas, superficies de grafito cálido y un discreto toque turquesa.
- 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.
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Una mesa analítica tranquila sobre papel tibio
- Notion — Un cuaderno de papel caliente bajo el sol del mediodía.
- 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