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
- 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
- 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.