Seline Analytics
Unha mesa analítica tranquila sobre papel quente
Seline está situada sobre un fondo de pedra cálido (#fafaf9) cun único toque azul vibrante; todas as demais cores son neutras e extraídas da paleta de cores de pedra Tailwind. Os titulares están representados nunha fonte sans-serif xeométrica deseñada a medida (roobert) cun peso de 400 e un espazado negativo estreito entre letras, o que lle dá ao texto unha confianza pausada, case como un susurro, que contrasta co estilo SaaS tipicamente ruidoso. As superficies da interface de usuario son tarxetas brancas planas, flotando sobre o fondo cálido cun único desenfoque suave de 16 px; os bordos créanse con liñas finas de 1 px en tons pedra, utilizadas xenerosamente como elemento estrutural principal en lugar de divisores ou paneis pesados. O deseño respira: contido de ancho completo centrado nun ritmo vertical xeneroso, con controis interactivos en forma de pílula, unha ilustración de mascota para a personalidade e capturas de pantalla do panel como proba do produto. A impresión xeral é editorialmente analítica: tranquila, monocromática, segura, sendo a chamada á acción azul o elemento máis rechamante da páxina grazas á deliberada moderación de todo o demais.
A páxina ten ancho máximo, centrada a aproximadamente 1200 px con moito espazo vertical. O protagonista é un bloque de texto de dúas liñas aliñado á esquerda cunha única frase destacada ("sinxelo e eficaz") en azul, seguida dunha fila con dúas chamadas á acción (pílula azul + pílula pantasma), despois unha fila de logotipos de socios en escala de grises, despois unha fila de cualificacións de confianza e, finalmente, unha vista previa flotante do panel de control a ancho completo, que se superpón lixeiramente á seguinte sección. Debaixo do pregamento hai filas alternas de testemuños nunha grella dunha soa columna, seguidas de seccións a ancho completo con descricións de funcións, texto aliñado á esquerda e elementos visuais do produto centrados. A navegación é unha barra superior minimalista (logotipo á esquerda, ligazóns de navegación centradas, inicio de sesión + chamada á acción azul á dereita) cun grupo flotante de avatares no medio da navegación que serve como verificación da identidade. Os espazos entre as seccións son amplos (96 px) para crear un ritmo editorial en lugar dunha densa mestura de información.
A linguaxe visual está dominada por capturas de pantalla da interface de usuario do produto: a vista previa do panel de control é unha fotografía renderizada cun filtro de contraste en escala de grises (1) (0,94), que silencia as cores dos datos a un ton monocromático. A única figura humana é unha pegatina de mascota lineal (un personaxe con capucha), debuxada en estilo SVG con só contornos, colocada unha vez por sección como contrapunto lúdico ao contido analítico, cunha sombra suave para crear un efecto de profundidade similar a unha pegatina. O logotipo e os glifos da marca son pequenas faíscas/chamas negras. Non hai fotografías, nin fotos de estilo de vida, nin fotos de equipos, nin imaxes ambientais. O obxecto (o panel de control) é o protagonista. Todas as iconas decorativas teñen un estilo de contorno de 1 px en #0c0a09 ou #3ba6f1, nunca están cheas.
Paleta
Marca
- Cyan Signal
#3ba6f1— A chamada á acción principal, as ligazóns activas e o contorno das iconas da marca son os únicos acentos de cor na páxina, usados con moderación para chamar a atención sobre a acción. - Cyan Edge
#3398e1— O azul úsase para destacar os contornos das accións, as etiquetas das ligazóns e os elementos interactivos. Non se debe usar como cor principal para as chamadas á acción.
Neutro
- Ink Black
#0c0a09— Os títulos principais, o texto destacado e as iconas expresivas están nunha cor cálida, case negra. - Stone Canvas
#fafaf9— O fondo da páxina é dun ton cálido e cremoso que parece máis papel que o branco dunha pantalla. - Pure White
#ffffff— As superficies do mapa, os paneis sobresaíntes e os recheos dos campos de entrada son planos e sen sombras por defecto. - Stone Border
#e8e6e5— Os bordos finos das tarxetas, a navegación e os campos de entrada son o elemento estrutural principal, non os separadores. - Stone Muted
#d6d3d1— Marcos adicionais, tons de fondo sutís, divisores decorativos. - Ash Gray
#a8a29e— Texto de axuda, contornos de iconas, estados desactivados: lexibles pero inactivos.
Tipografía
de 10 a 52 px · 5 pasos
- Roobert — substitución: Inter Tight or Satoshi · contornos 400, 500 · A fonte para os títulos e a disposición do texto é unha sans-serif xeométrica única con espazo entre letras negativo mínimo (-0,025 em a 32 px, -0,021 em a 52 px). O grosor de 400 x 52 px é a sinatura da fonte: pouco convencional, sutil, pero autoritaria, pero discreta. Os títulos ocupan o seu lugar sen ser abafantes.
- Inter — substitución: Inter · contornos 400, 500, 600 · A fonte principal para o texto do corpo, a navegación, a IU e os títulos é unha fonte neutra e universal para todo o texto fóra da pantalla. 14 px cun peso de 400 e un interlineado de 1,64 é o tamaño predominante para o texto do corpo (frecuencia 1174). O espazado positivo entre letras (0,004 em) en tamaños pequenos garante a lexibilidade dunha IU densa.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | espazoso |
| Paso básico | 8px |
| Radio do botón | 9999px |
| Radio da tarxeta | 10px |
| Sombras | sombras suaves |
| Entre seccións | 96px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Seline Analytics 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
- Mollie — Un mostrador de cachemira, un libro maior escuro. Deixa amplo espazo en branco para o deseño editorial arredor do texto negro e, a seguir, reforza os puntos relacionados co produto con cremas cálidas, cafés expreso e fotos táctiles de métodos de pago reais.
- Kagi — Unha sala de lectura independente. Crea un espazo branco aberto arredor de texto en grafito con cores intensas, usando sutís detalles morados e superficies pastel cálidas para romper a tranquilidade.
- Milanote — Milanote é un estudo creativo dedicado. Crea páxinas de estilo galería editorial usando paneis visuais flotantes: paredes con marcos escuros, espazo de visualización branco e capturas de pantalla que parecen obxectos reais cunha profundidade suave.
- Co2 — Un atlas climático á luz do inverno. Crea páxinas como unha paisaxe aérea de documentos, onde os títulos con serifas, os datos codificados por categorías e as imaxes xeadas destacan as amplas marxes brancas.
- GitButler — Turquesa ao final do texto. Unha combinación de titulares con serifas de alto contraste con cuadrículas técnicas sutís, superficies de grafito cálidas e un discreto acento turquesa.
- 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
- Notion — Un caderno de papel quente ao sol do mediodía
- 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