Un socle commun
Bleu marine, bleu principal, succès/erreur, rayons, espacements et anneaux de focus sont harmonisés, reconnaissables dans le CRM et sur le site.
Marque · Produit · Site web
Deux systèmes.
Deux systèmes.
Une marque.
AgenticUltimate partage un socle de marque commun, décliné en deux systèmes de design : l'un pour l'interface produit de l'extension, l'autre pour AgenticUltimate.
Pourquoi deux systèmes de design ?
Le produit et le marketing remplissent des rôles différents. Un socle commun préserve l'identité de la marque ; des couches de tokens distinctes évitent que le CRM ressemble à une page marketing ou le site à un panneau d'administration.
Des rôles distincts
L'extension optimise la densité et l'utilisation. Le site optimise la clarté, la conversion et l'image premium, avec des accents mesurés.
Évolutif
Les nouveaux modules et les nouvelles pages utilisent des tokens et composants documentés : moins d'exceptions visuelles et une réalisation plus rapide.
AgenticUltimate UI 1.0
Système de design produit (extension)
Pour l'interface de SuiteCRM : formulaires, tableaux, dialogues, assistants et espaces de travail denses. Fonctionnel, clair et adapté aux entreprises.
| Domaine | Contenu |
|---|---|
| Couleurs | Bleu marine (#001631), principal (#165DCC), couleurs sémantiques de statut, surfaces pour les espaces de travail clairs |
| Typographie | Échelle compacte pour les libellés, tableaux et formulaires : lisibilité avec une forte densité d'informations |
| Espacement et rayon | Base 4/8/12/16/24/32 ; rayons sm–lg pour les champs, cartes et dialogues |
| Composants | Boutons, champs, listes, dialogues, onglets, tableaux, étapes d'assistant, badges de statut |
| Densité | Affichage compact facultatif pour les vues d'administration et les listes |
Les administrateurs et utilisateurs avancés du CRM constituent le public cible. Chaque décision répond à une question : facilite-t-elle une modification plus rapide et plus sûre des données ?
AgenticUltimate Web 1.0
Système de design du site (marketing)
Pour AgenticUltimate : bannière principale, cartes de fonctionnalités, réassurance, mégamenu, mode sombre. Premium, technique, avec du cyan et du violet maîtrisés.
Principes
La clarté avant les effets – 1 à 2 dégradés maximum par écran.
Une couleur dominante – la couleur principale guide, le cyan et le violet soutiennent.
Les cartes expriment les bénéfices – ombres douces, bordures fines, survol discret.
Éléments
Typographie de titre, badges introductifs, cartes de fonctionnalités, barres de réassurance, visuels produit, appels à l'action finaux, mégamenu. Modes clair et sombre issus d'une même source de tokens.
| Famille de tokens | Exemples |
|---|---|
| Socle de marque | --su-navy, --su-primary, --su-ink |
| Accents | --su-cyan, --su-violet (avec mesure) |
| Surfaces | Plate · Rehaussée · Surélevée · Principale |
| Ombres | De --su-shadow-sm à --su-shadow-lg, survol sans anneau néon |
| Mouvement | Transitions courtes, respect de prefers-reduced-motion |
Passerelle produit
Ce qui est partagé et ce qui reste délibérément distinct.
Partagé
Bleu marine et bleu principal · Succès/danger · Rayons sm–lg · Base d'espacement · Anneau de focus principal · Nom de marque et langage des icônes
Site uniquement
Accents et dégradés cyan/violet · Arrière-plans aurores · Grands titres · Bandeau défilant et ombres marketing · Verre avec mesure (en-tête)
Pour les équipes et la réalisation
Utiliser les systèmes au quotidien.
Développer le produit
AgenticUltimate UI 1.0 comme référence pour les nouveaux écrans de l'extension. Privilégier les composants existants avant de créer des variantes.
Enrichir le site
AgenticUltimate Web 1.0 et les tokens de site.css. Structurer les nouvelles sections selon les modèles : présentation → réassurance → fonctionnalités → appel à l'action.
Garantir la qualité
Vérifier les contrastes, le clavier et les mouvements réduits. PageSpeed et l'accessibilité restent des critères de livraison.
Explorer les systèmes de design en direct
Le système de design interactif du site présente tokens, composants et mode sombre. L'interface produit reste la référence pour l'extension dans SuiteCRM.