Seline Analytics
Una mesa analítica tranquila sobre papel tibio
Seline se presenta sobre un fondo de piedra cálida (#fafaf9) con un único acento azul vibrante; todos los demás colores son neutros y provienen de la paleta de colores piedra de Tailwind. Los titulares se muestran en una fuente sans-serif geométrica de diseño personalizado (roobert) con un grosor de 400 y un espaciado entre letras negativo estrecho, lo que le confiere al texto una confianza pausada, casi susurrante, que contrasta con el estilo SaaS típicamente llamativo. Las superficies de la interfaz de usuario son tarjetas blancas planas que flotan sobre el fondo cálido con un único y suave desenfoque de 16 px; los bordes se crean con líneas finas de 1 px en tono piedra, utilizadas generosamente como elemento estructural principal en lugar de divisores o paneles pesados. El diseño es fluido: contenido de ancho completo centrado en un generoso ritmo vertical, con controles interactivos en forma de píldora, una ilustración de mascota para darle personalidad y capturas de pantalla del panel de control como prueba del producto. La impresión general es editorialmente analítica: tranquila, monocromática, segura, con la llamada a la acción azul como el elemento más llamativo de la página gracias a la sobriedad deliberada de todo lo demás.
La página tiene el ancho máximo, centrada a aproximadamente 1200 px con amplio espacio vertical. El encabezado es un bloque de texto de dos líneas, alineado a la izquierda, con una sola frase resaltada ("simple y eficaz") en azul, seguida de una fila con dos llamadas a la acción (píldora azul + píldora fantasma), luego una fila de logotipos de socios en escala de grises, luego una fila de calificaciones de confianza y, finalmente, una vista previa flotante del panel de control de ancho completo, que se superpone ligeramente a la siguiente sección. Debajo del pliegue hay filas alternas de testimonios en una cuadrícula de una sola columna, seguidas de secciones de ancho completo con descripciones de características, texto alineado a la izquierda e imágenes de productos centradas. La navegación es una barra superior minimalista: logotipo a la izquierda, enlaces de navegación centrados, inicio de sesión + llamada a la acción azul a la derecha, con un grupo flotante de avatares en el centro de la navegación que sirve como verificación de identidad. Los espacios entre secciones son amplios (96 px) para crear un ritmo editorial en lugar de una densa maraña de información.
El lenguaje visual está dominado por capturas de pantalla de la interfaz de usuario del producto: la vista previa del panel es una fotografía renderizada con un filtro de contraste en escala de grises (1) (0,94), que atenúa los colores de los datos a un tono monocromático. La única figura humana es una pegatina lineal de mascota (un personaje encapuchado), dibujada en estilo SVG con solo contornos, colocada una vez por sección como un contrapunto lúdico al contenido analítico, con una sombra suave para crear un efecto de profundidad similar al de una pegatina. El logotipo de la marca y los glifos son pequeñas chispas/llamas negras. No hay fotografías: ni fotos de estilo de vida, ni fotos del equipo, ni imágenes del entorno. El objeto (el panel) es el protagonista. Todos los iconos decorativos son de estilo de contorno de 1px en #0c0a09 o #3ba6f1, nunca rellenos.
Paleta
Marca
- Cyan Signal
#3ba6f1— La llamada a la acción principal, los enlaces activos y el contorno de los iconos de la marca son los únicos toques de color en la página, utilizados con moderación para llamar la atención sobre la acción. - Cyan Edge
#3398e1— El azul se utiliza para resaltar los contornos de las acciones, las etiquetas de los enlaces y los elementos interactivos. No debe utilizarse como color principal para las llamadas a la acción.
Neutral
- Ink Black
#0c0a09— Los títulos principales, el texto resaltado y los iconos expresivos están en un color cálido, casi negro. - Stone Canvas
#fafaf9— El fondo de la página es de un tono cálido y cremoso que recuerda al papel, en lugar del blanco de una pantalla. - Pure White
#ffffff— Las superficies del mapa, los paneles sobresalientes y los rellenos de los campos de entrada son planos y sin sombras por defecto. - Stone Border
#e8e6e5— Los bordes finos de las tarjetas, la navegación y los campos de entrada son el elemento estructural principal, no los separadores. - Stone Muted
#d6d3d1— Marcos adicionales, sutiles tonos de fondo, separadores decorativos. - Ash Gray
#a8a29e— Texto de ayuda, contornos de iconos, estados deshabilitados: legibles pero inactivos.
Tipografía
de 10 a 52 píxeles · 5 pasos
- Roobert — reemplazo: Inter Tight or Satoshi · esquemas 400, 500 · La tipografía para los títulos y el diseño del texto es una sans-serif geométrica única con un espaciado negativo mínimo entre letras (-0,025em a 32px, -0,021em a 52px). Su grosor de 400 x 52px es su sello distintivo: poco convencional, sutil, a la vez que imponente y discreto. Los títulos se integran perfectamente sin resultar recargados.
- Inter — reemplazo: Inter · esquemas 400, 500, 600 · La fuente principal para el texto principal, la navegación, la interfaz de usuario y los encabezados es una fuente neutra y universal para todo el texto fuera de pantalla. El tamaño predominante para el texto principal es de 14 píxeles con un grosor de 400 y un interlineado de 1,64 (frecuencia 1174). El espaciado positivo entre letras (0,004em) en tamaños pequeños garantiza la legibilidad de la interfaz de usuario densa.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | espacioso |
| Paso básico | 8px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 10px |
| Oscuridad | sombras suaves |
| Entre secciones | 96px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Seline Analytics 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.
- Monad — Revista técnica editorial en pergamino cálido
- Dub — Panel de control de papel de arroz mate de Link
- 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