Aller au contenu principal

Système de conception

Scoutello doit sembler chaleureux, compétent et axé sur le produit. L'aspect préféré est clair, généreux, arrondi et éditorial : le contenu clair d'abord, puis une couleur de marque subtile, des surfaces douces et un mouvement calme qui donne l'impression que le produit est réactif sans devenir un bruit décoratif.

La page de destination marketing est la référence publique la plus claire pour l'orientation visuelle actuelle. Les surfaces du produit doivent réutiliser les jetons de conception partagés autant que possible et ne devenir plus expressives que lorsque la surface est explicitement axée sur la marque ou le marketing.

Logo et actifs de la marque​

Utilisez le logo Scoutello à partir de l'URL des actifs de documentation publique lorsqu'un agent, une intégration ou une page générée nécessite une marque réutilisable :

Préférez la version SVG pour un rendu net sur différentes tailles d'écran. Utilisez la version PNG lorsqu'un outil ou une destination ne peut pas gérer le SVG. Gardez suffisamment d'espace libre autour de la marque, évitez de l'étirer ou de la recolorer, et placez-la sur des surfaces blanches, crème chaudes ou autres surfaces calmes qui préservent le contraste.

Couleurs de la marque​

Couleur principale : #ff8d49

Utilisez l'orange principal comme couleur d'accentuation de Scoutello : appels à l'action principaux, états focalisés, navigation active, arrière-plans de petites icônes, texte de surlignage, lueurs douces et dégradés chauds. Dans le code du produit, cela correspond à --primary: 24 100% 64% et à des classes Tailwind telles que bg-primary, text-primary, border-primary/15 et shadow-primary/10.

Couleur secondaire : #145466

Utilisez le bleu sarcelle profond secondaire comme couleur d'ancrage. Il fonctionne mieux dans les dégradés avec l'orange principal, les panneaux d'appel à l'action sombres, la profondeur visuelle et les moments de marque occasionnels à fort impact. Il ne doit pas remplacer l'orange principal comme couleur d'action par défaut.

Couleurs de soutien :

  • Arrière-plans crème chauds : #fff8f1, #fff4ea, #fcf6f1, et surfaces douces orange-50 / amber-50.
  • Neutres du produit : cartes blanches, texte de premier plan sombre, texte estompé à environ 70-75 % d'opacité, et bordures claires.
  • Bleu tertiaire : hsl(205 100% 51%) est disponible en tant que jeton de soutien, mais doit être utilisé avec parcimonie afin que l'orange et le bleu sarcelle restent reconnaissables comme la paire de la marque.

Style visuel​

Préférez un look SaaS propre et haut de gamme avec suffisamment de chaleur pour éviter de paraître générique. La page de destination combine des arrière-plans en maille crème, des cartes blanches, de grandes captures d'écran de produits, des coins arrondis et des dégradés sobres.

Utiliser :

  • Cartes et panneaux arrondis, souvent de rounded-2xl à rounded-[2rem].
  • Bordures douces telles que border-primary/10, border-primary/15, ring-black/5, et des bordures neutres claires.
  • Surfaces blanches ou crème superposées au lieu de blocs de couleur foncée.
  • Ombres subtiles comme shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, ou des ombres personnalisées à faible opacité.
  • Grandes captures d'écran de produits ou maquettes d'interface utilisateur comme preuve, en particulier pour le marketing et la narration des fonctionnalités.
  • Petits moments de marque tels que le texte de surlignage orange, les puces d'icônes, les anneaux, les lueurs et les appels à l'action dégradés.

Éviter :

  • Arrière-plans orange bruyants sur toute la page.
  • Utilisation excessive du bleu sarcelle pour les contrôles ordinaires.
  • Mises en page denses et encombrées.
  • Ombres dures, rectangles tranchants ou tableaux de bord monochromes froids.
  • Mouvements décoratifs qui concurrencent la lecture ou l'achèvement des tâches.

Typographie​

Le site marketing utilise :

  • Space Grotesk pour les titres d'affichage via la classe landing-display.
  • Manrope pour le corps du texte marketing.

Les surfaces communes de l'application et de la documentation utilisent la typographie de l'interface utilisateur alignée sur le système, actuellement plus proche d'Inter. L'objectif stylistique est cohérent sur toutes les surfaces : titres confiants, suivi serré des titres, corps de texte lisible et interligne généreux.

Conseils pour les titres :

  • Utilisez des titres grands et équilibrés sur les pages marketing.
  • Surlignez uniquement la phrase importante avec l'orange principal.
  • Gardez la longueur de ligne contrôlée avec max-w-* et text-balance lorsque cela est disponible.

Conseils pour le corps du texte :

  • Gardez les paragraphes calmes et directs.
  • Utilisez un texte de premier plan estompé pour les descriptions, généralement text-foreground/70 ou text-foreground/75.
  • Préférez les sections faciles à parcourir, les paragraphes courts et les étiquettes claires.

Mise en page et espacement​

Les mises en page doivent sembler spacieuses et stables. La page de destination utilise un conteneur max-w-7xl avec un rembourrage horizontal réactif et de grandes sections verticales.

Modèles courants :

  • Rembourrage de section autour de py-16, py-20, ou plus grand pour les sections marketing majeures.
  • Cartes disposées en grilles réactives avec des écarts constants.
  • Sections héro avec une colonne de contenu forte à gauche et des captures d'écran de produits ou des compositions d'appareils à droite.
  • En-têtes de section centrés pour des promesses de produit larges ; en-têtes alignés à gauche pour les sections d'histoire ou de flux de travail.
  • Mises en page "mobile-first" qui s'empilent proprement avant de devenir multicolonnes sur les écrans plus grands.

Utilisez l'espace blanc comme partie intégrante de la conception. Si une section semble peu claire, simplifiez le contenu et augmentez l'espace avant d'ajouter plus de décoration.

Composants et surfaces​

Les surfaces Scoutello doivent sembler tactiles mais légères :

  • Boutons : pilules arrondies pour les appels à l'action marketing importants ; boutons de produit standard ailleurs.
  • Cartes : blanches ou crème, arrondies, bordées et légèrement surélevées.
  • Icônes : petites icônes linéaires simples dans des puces teintées d'orange.
  • Statistiques et éléments de confiance : cartes sobres avec des bordures ou des dégradés teintés d'orange.
  • Formulaires : étiquettes claires, texte d'aide direct et suffisamment d'espace pour une utilisation mobile.
  • Captures d'écran : grandes, nettes et légèrement surélevées. Utilisez-les comme preuve concrète du produit.

Lors de la création de l'interface utilisateur du produit, partez des composants d'interface utilisateur partagés et des jetons existants plutôt que d'un style personnalisé unique. Lors de la création de l'interface utilisateur marketing, utilisez les primitives de page de destination et les classes de page de destination lorsque cela convient.

Mouvement​

Le mouvement doit rendre l'interface polie, pas chargée. La page de destination utilise de courtes animations de révélation, des effets de montée d'appareil, des effets de floraison lumineuse et de petits effets de levage au survol.

Mouvement préféré :

  • Révélation vers le haut de 12 à 24 pixels avec une opacité douce.
  • Cartes au survol qui se soulèvent de quelques pixels seulement.
  • États de survol des appels à l'action qui soulèvent et approfondissent légèrement l'ombre.
  • Entrées de section décalées lorsqu'elles soutiennent le balayage narratif.

Respectez toujours les préférences de mouvement réduit. Évitez les animations qui peuvent masquer du contenu, bloquer l'interaction ou sembler nécessaires à la compréhension de la page.

Voix et conception de contenu​

Le système visuel fonctionne mieux avec une copie directe et concrète. Préférez un langage qui explique ce qu'une organisation peut publier, gérer ou automatiser dans Scoutello.

Utiliser :

  • Noms de produits spécifiques : pages de destination, vignettes, visites, événements, organisations, tableau de bord, invités, codes QR, traductions.
  • Descriptions axées sur les résultats qui relient les expériences des invités aux flux de travail des opérateurs.
  • Langage neutre en termes de genre en allemand et dans d'autres copies localisées.

Éviter :

  • Langage de plateforme vague sans exemples.
  • Jargon d'entreprise trop formel.
  • Longs paragraphes là où une section facile à parcourir fonctionnerait mieux.

Règles pratiques​

  • Utilisez #ff8d49 comme accent de marque principal et #145466 comme couleur d'ancrage secondaire.
  • Préférez les classes tokenisées (primary, secondary, foreground, muted, border) aux couleurs codées en dur dans les surfaces du produit.
  • Gardez les pages marketing chaudes, spacieuses, arrondies, axées sur les captures d'écran et légèrement animées.
  • Gardez les tableaux de bord et les surfaces opérationnelles plus calmes, plus denses uniquement si nécessaire, et plus axés sur les tâches.
  • Laissez les expériences d'invités appartenant aux clients soutenir la marque de l'organisation là où le produit expose déjà des contrôles de marque, mais gardez les surfaces appartenant à Scoutello alignées sur ce système.

Concepts associés : Routes et surfaces, Pages de destination et vignettes, Expériences d'invités basées sur le navigateur.