Saltar al contenido principal

Sistema de diseño

Scoutello debe transmitir calidez, capacidad y orientación al producto. La estética preferida es clara, espaciosa, redondeada y editorial: primero, contenido claro; después, color de marca sutil, superficies suaves y animaciones discretas que hagan que el producto parezca receptivo sin convertirse en ruido decorativo.

La página de destino de marketing es la referencia pública más clara de la dirección visual actual. Las superficies del producto deben reutilizar los tokens de diseño compartidos siempre que sea posible y expresarse más únicamente cuando la superficie esté orientada explícitamente a la marca o al marketing.

Logotipo y activos de marca​

Usa el logotipo de Scoutello desde la URL pública del recurso de documentación cuando un agente, una integración o una página generada necesite un elemento de marca reutilizable:

Da preferencia a la versión SVG para obtener una renderización nítida en todos los tamaños de pantalla. Usa la versión PNG cuando una herramienta o destino no admita SVG. Deja suficiente espacio libre alrededor del símbolo, evita estirarlo o cambiarle el color y colócalo sobre superficies blancas, crema cálida u otras superficies tranquilas que mantengan el contraste.

Colores de marca​

Color primario: #ff8d49

Usa el naranja primario como color de acento de Scoutello: llamadas a la acción principales, estados enfocados, navegación activa, fondos de iconos pequeños, texto resaltado, brillos suaves y degradados cálidos. En el código del producto, corresponde a --primary: 24 100% 64% y a clases de Tailwind como bg-primary, text-primary, border-primary/15 y shadow-primary/10.

Color secundario: #145466

Usa el verde azulado oscuro secundario como color de base. Funciona mejor en degradados con el naranja primario, paneles oscuros de llamadas a la acción, profundidad visual y momentos de marca ocasionales con gran énfasis. No debe sustituir al naranja primario como color de acción predeterminado.

Colores complementarios:

  • Fondos crema cálida: #fff8f1, #fff4ea, #fcf6f1 y superficies suaves orange-50 / amber-50.
  • Neutros del producto: tarjetas blancas, texto oscuro en primer plano, texto atenuado con una opacidad aproximada del 70-75 % y bordes claros.
  • Azul terciario: hsl(205 100% 51%) está disponible como token complementario, pero debe usarse con moderación para que el naranja y el verde azulado sigan siendo reconocibles como el dúo de marca.

Estilo visual​

Da preferencia a una estética SaaS limpia y sofisticada, con suficiente calidez para evitar una sensación genérica. La página de destino combina fondos de malla en tonos crema, tarjetas blancas, capturas de producto grandes, esquinas redondeadas y degradados discretos.

Usa:

  • Tarjetas y paneles redondeados, normalmente desde rounded-2xl hasta rounded-[2rem].
  • Bordes suaves como border-primary/10, border-primary/15, ring-black/5 y bordes neutros claros.
  • Superficies blancas o crema superpuestas en lugar de bloques de color intensos.
  • Sombras sutiles como shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 o sombras personalizadas de baja opacidad.
  • Capturas de producto grandes o maquetas de interfaz como prueba, especialmente en marketing y en la presentación de funcionalidades.
  • Pequeños elementos de marca, como texto resaltado en naranja, chips de iconos, anillos, brillos y llamadas a la acción con degradado.

Evita:

  • Fondos naranjas intensos en toda la página.
  • Usar demasiado el verde azulado en controles habituales.
  • Diseños densos y saturados.
  • Sombras marcadas, rectángulos angulosos o paneles monocromáticos fríos.
  • Animaciones decorativas que compitan con la lectura o la finalización de tareas.

Tipografía​

El sitio de marketing utiliza:

  • Space Grotesk para los titulares destacados mediante la clase landing-display.
  • Manrope para el texto del cuerpo de marketing.

Las superficies compartidas de la aplicación y la documentación utilizan una tipografía de interfaz alineada con el sistema, actualmente más cercana a Inter. El objetivo estilístico es coherente en todas las superficies: encabezados seguros, espaciado ajustado en los titulares, texto de cuerpo legible y una altura de línea generosa.

Pautas para titulares:

  • Usa titulares grandes y equilibrados en las páginas de marketing.
  • Resalta únicamente la frase importante con el naranja primario.
  • Mantén controlada la longitud de línea con max-w-* y text-balance cuando estén disponibles.

Pautas para el texto del cuerpo:

  • Mantén los párrafos claros y directos.
  • Usa texto atenuado en primer plano para las descripciones, normalmente text-foreground/70 o text-foreground/75.
  • Da preferencia a secciones fáciles de escanear, párrafos cortos y etiquetas claras.

Diseño y espaciado​

Los diseños deben sentirse espaciosos y estables. La página de destino utiliza un contenedor max-w-7xl con relleno horizontal adaptable y secciones verticales amplias.

Patrones habituales:

  • Relleno de sección de aproximadamente py-16, py-20 o superior en las secciones principales de marketing.
  • Tarjetas organizadas en cuadrículas adaptables con espacios uniformes.
  • Secciones principales con una columna de contenido destacada a la izquierda y capturas de producto o composiciones de dispositivos a la derecha.
  • Encabezados de sección centrados para propuestas generales del producto; encabezados alineados a la izquierda para secciones narrativas o de flujo de trabajo.
  • Diseños con prioridad móvil que se apilan correctamente antes de convertirse en varias columnas en pantallas grandes.

Usa el espacio en blanco como parte del diseño. Si una sección no resulta clara, simplifica el contenido y aumenta el espacio disponible antes de añadir más elementos decorativos.

Componentes y superficies​

Las superficies de Scoutello deben sentirse táctiles, pero ligeras:

  • Botones: píldoras redondeadas para las llamadas a la acción destacadas de marketing; botones de producto estándar en el resto de casos.
  • Tarjetas: blancas o crema, redondeadas, con bordes y una elevación ligera.
  • Iconos: iconos lineales pequeños y sencillos en chips con matices naranjas.
  • Estadísticas y elementos de confianza: tarjetas discretas con bordes o degradados en tonos naranjas.
  • Formularios: etiquetas claras, texto de ayuda directo y espacio suficiente para su uso en dispositivos móviles.
  • Capturas de pantalla: grandes, nítidas y ligeramente elevadas. Úsalas como evidencia concreta del producto.

Al crear la interfaz de un producto, parte de los componentes y tokens de UI compartidos existentes en lugar de aplicar estilos personalizados para casos puntuales. Al crear la interfaz de marketing, utiliza las primitivas y clases de landing cuando encajen.

Movimiento​

El movimiento debe hacer que la interfaz se sienta pulida, no recargada. La landing page utiliza animaciones breves de aparición, efectos de elevación de dispositivos, efectos de expansión del resplandor y pequeños levantamientos al pasar el cursor.

Movimiento recomendado:

  • Aparición desde 12-24 px con una opacidad suave.
  • Tarjetas que se elevan solo unos píxeles al pasar el cursor.
  • Estados hover de las CTA que se elevan ligeramente y acentúan la sombra.
  • Entradas escalonadas de secciones cuando favorezcan la lectura narrativa.

Respeta siempre las preferencias de movimiento reducido. Evita las animaciones que puedan ocultar contenido, bloquear la interacción o parecer necesarias para comprender la página.

Voz y diseño de contenidos​

El sistema visual funciona mejor con textos directos y concretos. Prioriza un lenguaje que explique qué puede publicar, gestionar o automatizar una organización en Scoutello.

Utiliza:

  • Sustantivos específicos del producto: landing pages, mosaicos, tours, eventos, organizaciones, panel de control, personas invitadas, códigos QR y traducciones.
  • Descripciones orientadas a resultados que conecten las experiencias de las personas invitadas con los flujos de trabajo operativos.
  • Lenguaje neutral en cuanto al género en alemán y en otros contenidos localizados.

Evita:

  • Lenguaje vago sobre la plataforma sin ejemplos.
  • Jerga empresarial excesivamente formal.
  • Párrafos largos cuando una sección fácil de escanear funcionaría mejor.

Reglas prácticas​

  • Utiliza #ff8d49 como acento principal de marca y #145466 como color secundario de apoyo.
  • Prioriza las clases basadas en tokens (primary, secondary, foreground, muted, border) frente a los colores codificados directamente en las superficies del producto.
  • Mantén las páginas de marketing cálidas, espaciosas, redondeadas, centradas en capturas de pantalla y con animaciones sutiles.
  • Mantén el panel de control y las superficies operativas más sobrios, más densos solo cuando sea necesario y centrados en las tareas.
  • Permite que las experiencias de las personas invitadas, propiedad de cada cliente, incorporen la identidad de la organización cuando el producto ya ofrezca controles de marca, pero mantén las superficies propiedad de Scoutello alineadas con este sistema.

Conceptos relacionados: Rutas y superficies, Landing pages y mosaicos, Experiencias de personas invitadas centradas en el navegador.