Aller au contenu principal

Système de design

Scoutello doit évoquer la chaleur, la maîtrise et l’orientation produit. L’apparence privilégiée est claire, aérée, arrondie et éditoriale : le contenu reste prioritaire, accompagné de touches de couleur discrètes, de surfaces douces et d’animations apaisées qui rendent le produit réactif sans ajouter de bruit décoratif.

La landing page marketing constitue la référence publique la plus claire de la direction visuelle actuelle. Les surfaces produit doivent réutiliser autant que possible les tokens de design partagés et gagner en expressivité uniquement lorsqu’elles sont explicitement orientées marque ou marketing.

Logo et éléments de marque​

Utilisez le logo Scoutello depuis l’URL publique de l’asset de documentation lorsqu’un agent, une intégration ou une page générée a besoin d’un élément de marque réutilisable :

Privilégiez la version SVG pour un rendu net sur toutes les tailles d’écran. Utilisez la version PNG lorsqu’un outil ou une destination ne prend pas en charge le SVG. Laissez suffisamment d’espace libre autour du logo, évitez de l’étirer ou de le recolorer, et placez-le sur des surfaces blanches, crème ou autrement apaisées qui préservent le contraste.

Couleurs de marque​

Couleur principale : #ff8d49

Utilisez l’orange principal comme couleur d’accent de Scoutello : appels à l’action principaux, états de focus, navigation active, arrière-plans de petites icônes, texte mis en évidence, halos doux et dégradés chaleureux. Dans le code 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 particulièrement bien dans les dégradés avec l’orange principal, les panneaux d’appel à l’action sombres, la profondeur visuelle et certaines mises en avant fortes de la marque. Il ne doit pas remplacer l’orange principal comme couleur d’action par défaut.

Couleurs complémentaires :

  • Arrière-plans crème chaleureux : #fff8f1, #fff4ea, #fcf6f1, ainsi que des surfaces douces orange-50 / amber-50.
  • Neutres produit : cartes blanches, texte sombre au premier plan, texte atténué avec une opacité d’environ 70 à 75 %, et bordures claires.
  • Bleu tertiaire : hsl(205 100% 51%) est disponible comme token complémentaire, mais doit être utilisé avec parcimonie afin que l’orange et le bleu sarcelle restent identifiables comme duo de marque.

Style visuel​

Privilégiez une esthétique SaaS épurée et premium, avec suffisamment de chaleur pour éviter un rendu générique. La landing page associe des arrière-plans crème en maille, des cartes blanches, de grandes captures d’écran du produit, des angles arrondis et des dégradés maîtrisés.

À privilégier :

  • 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 plutôt que des blocs fortement colorés.
  • Ombres discrètes telles que shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ou des ombres personnalisées à faible opacité.
  • Grandes captures d’écran du produit ou maquettes d’interface comme preuves, notamment pour le marketing et la présentation des fonctionnalités.
  • Touches de marque ponctuelles comme du texte orange mis en évidence, des pastilles d’icônes, des anneaux, des halos et des appels à l’action en dégradé.

À éviter :

  • Les arrière-plans orange sur toute la page.
  • L’utilisation excessive du bleu sarcelle pour les contrôles ordinaires.
  • Les mises en page denses et étriquées.
  • Les ombres marquées, les rectangles anguleux ou les tableaux de bord monochromes et froids.
  • Les animations décoratives qui perturbent la lecture ou l’exécution des tâches.

Typographie​

Le site marketing utilise :

  • Space Grotesk pour les titres d’affichage via la classe landing-display.
  • Manrope pour le texte courant marketing.

Les surfaces partagées de l’application et de la documentation utilisent une typographie d’interface alignée sur les systèmes, actuellement plus proche d’Inter. L’objectif stylistique reste cohérent sur toutes les surfaces : titres affirmés, interlettrage resserré pour les titres, texte courant lisible et interlignage généreux.

Principes pour les titres :

  • Utilisez des titres grands et équilibrés sur les pages marketing.
  • Mettez en évidence uniquement l’expression importante avec l’orange principal.
  • Limitez la longueur des lignes avec max-w-* et text-balance lorsque ces classes sont disponibles.

Principes pour le texte courant :

  • Gardez des paragraphes apaisés et directs.
  • Utilisez une couleur de premier plan atténuée pour les descriptions, généralement text-foreground/70 ou text-foreground/75.
  • Privilégiez des sections faciles à parcourir, des paragraphes courts et des libellés explicites.

Mise en page et espacement​

Les mises en page doivent sembler aérées et stables. La landing page utilise un conteneur max-w-7xl avec un padding horizontal adaptatif et de grandes sections verticales.

Schémas courants :

  • Un padding de section autour de py-16, py-20 ou davantage pour les grandes sections marketing.
  • Des cartes disposées dans des grilles adaptatives avec des espacements réguliers.
  • Des sections hero avec une colonne de contenu forte à gauche et des captures d’écran du produit ou des compositions d’appareils à droite.
  • Des en-têtes de section centrés pour les promesses produit générales ; des en-têtes alignés à gauche pour les sections narratives ou consacrées aux workflows.
  • Des mises en page mobile-first qui s’empilent proprement avant de passer à plusieurs colonnes sur les écrans plus larges.

Utilisez l’espace blanc comme un élément du design. Si une section manque de clarté, simplifiez le contenu et augmentez l’espace avant d’ajouter davantage de décoration.

Composants et surfaces​

Les surfaces Scoutello doivent sembler tactiles tout en restant légères :

  • Boutons : pastilles arrondies pour les appels à l’action marketing importants ; boutons produit standards 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 pastilles aux teintes orangées.
  • Statistiques et éléments de réassurance : cartes sobres avec des bordures ou des dégradés teintés d’orange.
  • Formulaires : libellés clairs, texte d’aide direct et espacement suffisant pour une utilisation mobile.
  • Captures d’écran : grandes, nettes et légèrement surélevées. Utilisez-les comme preuves concrètes du produit.

Lors de la création de l’interface produit, partez des composants et des tokens d’interface partagés existants plutôt que de créer des styles personnalisés ponctuels. Pour l’interface marketing, utilisez les primitives et les classes de landing page lorsqu’elles conviennent.

Animation​

Les animations doivent donner une impression de finition à l’interface, sans la surcharger. La landing page utilise de courtes animations d’apparition, des effets de montée des appareils, des effets de halo lumineux et de légers déplacements au survol.

Animations recommandées :

  • Apparition vers le haut depuis 12 à 24 px, avec une opacité progressive.
  • Cartes qui se soulèvent de quelques pixels seulement au survol.
  • États de survol des CTA qui les soulèvent légèrement et renforcent l’ombre.
  • Apparitions échelonnées des sections lorsqu’elles facilitent le parcours narratif.

Respectez toujours les préférences de réduction des animations. Évitez les animations susceptibles de masquer du contenu, de bloquer les interactions ou de sembler indispensables à la compréhension de la page.

Ton et conception du contenu​

Le système visuel fonctionne mieux avec un texte direct et concret. Privilégiez un langage qui explique ce qu’une organisation peut publier, gérer ou automatiser dans Scoutello.

À utiliser :

  • Des noms spécifiques au produit : landing pages, tuiles, visites guidées, événements, organisations, tableau de bord, invités, codes QR, traductions.
  • Des descriptions axées sur les résultats, qui relient les expériences des invités aux flux de travail des équipes opérationnelles.
  • Un langage neutre du point de vue du genre en allemand et dans les autres contenus localisés.

À éviter :

  • Un langage vague sur la plateforme, sans exemples.
  • Le jargon d’entreprise excessivement formel.
  • Les longs paragraphes lorsqu’une section facile à parcourir serait plus adaptée.

Règles pratiques​

  • Utilisez #ff8d49 comme accent principal de la marque et #145466 comme couleur secondaire d’ancrage.
  • Privilégiez les classes basées sur des tokens (primary, secondary, foreground, muted, border) aux couleurs codées en dur dans les surfaces produit.
  • Gardez les pages marketing chaleureuses, aérées, arrondies, centrées sur les captures d’écran et légèrement animées.
  • Gardez les surfaces du tableau de bord et des opérations plus sobres, plus denses uniquement lorsque cela est nécessaire, et davantage axées sur les tâches.
  • Laissez les expériences destinées aux invités et gérées par les clients reprendre l’image de marque de l’organisation lorsque le produit propose déjà des options de personnalisation, tout en maintenant les surfaces gérées par Scoutello conformément à ce système.

Concepts associés : Routes et surfaces, Landing pages et tuiles, Expériences destinées aux invités dans le navigateur.