Saltar al contenido principal

Sistema de diseño

Scoutello debe sentirse cálido, capaz y centrado en el producto. El aspecto preferido es claro, generoso, redondeado y editorial: primero el contenido claro, luego el color de marca sutil, superficies suaves y movimiento tranquilo que hace que el producto se sienta receptivo sin convertirse en ruido decorativo.

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

Logo y Activos de Marca​

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

Prefiera la versión SVG para una representación nítida en todos los tamaños de pantalla. Utilice la versión PNG cuando una herramienta o destino no pueda manejar SVG. Mantenga suficiente espacio libre alrededor de la marca, evite estirarla o cambiarle el color, y colóquela sobre superficies blancas, crema cálido u otras superficies tranquilas que conserven el contraste.

Colores de Marca​

Color primario: #ff8d49

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

Color secundario: #145466

Utilice el verde azulado oscuro secundario como color de anclaje. Funciona mejor en degradados con el naranja primario, paneles de llamadas a la acción oscuros, profundidad visual y momentos de marca ocasionales de alta intensidad. No debe reemplazar al naranja primario como color de acción predeterminado.

Colores de apoyo:

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

Estilo Visual​

Prefiera un aspecto limpio y premium de SaaS con suficiente calidez para evitar que se sienta genérico. La página de destino combina fondos de malla crema, tarjetas blancas, capturas de pantalla de productos grandes, esquinas redondeadas y degradados discretos.

Utilice:

  • Tarjetas y paneles redondeados, a menudo 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 en capas en lugar de bloques de color pesados.
  • Sombras sutiles como shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, o sombras personalizadas de baja opacidad.
  • Capturas de pantalla de productos grandes o maquetas de interfaz de usuario como prueba, especialmente para marketing y narración de características.
  • Pequeños momentos de marca como texto resaltado naranja, etiquetas de iconos, anillos, brillos y llamadas a la acción degradadas.

Evite:

  • Fondos naranjas llamativos a página completa.
  • Usar demasiado verde azulado para controles ordinarios.
  • Diseños densos y abarrotados.
  • Sombras duras, rectángulos afilados o paneles monocromáticos fríos.
  • Movimiento decorativo que compite con la lectura o la finalización de tareas.

Tipografía​

El sitio de marketing utiliza:

  • Space Grotesk para titulares de pantalla a través de la clase landing-display.
  • Manrope para el cuerpo del texto de marketing.

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

Guía de titulares:

  • Utilice titulares grandes y equilibrados en las páginas de marketing.
  • Resalte solo la frase importante con naranja primario.
  • Mantenga la longitud de línea controlada con max-w-* y text-balance donde esté disponible.

Guía de cuerpo de texto:

  • Mantenga los párrafos tranquilos y directos.
  • Utilice texto de primer plano atenuado para las descripciones, generalmente text-foreground/70 o text-foreground/75.
  • Prefiera secciones escaneables, 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 receptivo y secciones verticales grandes.

Patrones comunes:

  • Relleno de sección alrededor de py-16, py-20, o más grande para secciones de marketing importantes.
  • Tarjetas dispuestas en cuadrículas receptivas con espacios consistentes.
  • Secciones principales con una sólida columna de contenido a la izquierda y capturas de pantalla del producto o composiciones de dispositivos a la derecha.
  • Encabezados de sección centrados para promesas amplias del producto; encabezados alineados a la izquierda para secciones de historias o flujos de trabajo.
  • Diseños móviles primero que se apilan limpiamente antes de convertirse en varias columnas en pantallas más grandes.

Utilice el espacio en blanco como parte del diseño. Si una sección se siente poco clara, simplifique el contenido y aumente el espacio antes de agregar más decoración.

Componentes y Superficies​

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

  • Botones: pastillas redondeadas para llamadas a la acción de marketing destacadas; botones de producto estándar en otros lugares.
  • Tarjetas: blancas o crema, redondeadas, con bordes y ligeramente elevadas.
  • Iconos: iconos de línea pequeños y simples en etiquetas teñidas de naranja.
  • Estadísticas y elementos de confianza: tarjetas discretas con bordes teñidos de naranja o degradados.
  • Formularios: etiquetas claras, texto de ayuda directo y suficiente espacio para uso móvil.
  • Capturas de pantalla: grandes, nítidas y ligeramente elevadas. Úselas como evidencia concreta del producto.

Al crear la interfaz de usuario del producto, comience con los componentes de interfaz de usuario compartidos y los tokens existentes en lugar de un estilo personalizado único. Al crear la interfaz de usuario de marketing, utilice los primitivos de la página de destino y las clases de la página de destino donde encajen.

Movimiento​

El movimiento debe hacer que la interfaz se sienta pulida, no ocupada. La página de destino utiliza animaciones cortas de revelación, efectos de elevación de dispositivos, efectos de floración de brillo y pequeñas elevaciones al pasar el cursor.

Movimiento preferido:

  • Revelar hacia arriba desde 12-24px con opacidad suave.
  • Tarjetas al pasar el cursor que se levantan solo unos pocos píxeles.
  • Estados de llamada a la acción al pasar el cursor que levantan y profundizan ligeramente la sombra.
  • Entradas de sección escalonadas donde apoyan el escaneo narrativo.

Respete siempre las preferencias de reducción de movimiento. Evite animaciones que puedan ocultar contenido, bloquear la interacción o sentirse necesarias para comprender la página.

Voz y Diseño de Contenido​

El sistema visual funciona mejor con copias directas y concretas. Prefiera el lenguaje que explica lo que una organización puede publicar, administrar o automatizar en Scoutello.

Utilice:

  • Sustantivos específicos del producto: páginas de destino, mosaicos, recorridos, eventos, organizaciones, panel, invitados, códigos QR, traducciones.
  • Descripciones orientadas a resultados que conectan las experiencias de los invitados con los flujos de trabajo de los operadores.
  • Lenguaje neutral en cuanto al género en alemán y otras copias localizadas.

Evite:

  • Lenguaje vago de plataforma sin ejemplos.
  • Jerga empresarial demasiado formal.
  • Párrafos largos donde una sección escaneable funcionaría mejor.

Reglas Prácticas​

  • Utilice #ff8d49 como acento principal de la marca y #145466 como color de anclaje secundario.
  • Prefiera las clases tokenizadas (primary, secondary, foreground, muted, border) sobre los colores codificados en superficies de producto.
  • Mantenga las páginas de marketing cálidas, espaciosas, redondeadas, lideradas por capturas de pantalla y ligeramente animadas.
  • Mantenga las superficies del panel y operativas más tranquilas, densas solo cuando sea necesario y más enfocadas en tareas.
  • Permita que las experiencias de los invitados propiedad del cliente respalden la marca de la organización donde el producto ya expone controles de marca, pero mantenga las superficies propiedad de Scoutello alineadas con este sistema.

Conceptos relacionados: Rutas y superficies, Páginas de destino y mosaicos, Experiencias de invitados basadas en navegador.