Les éléments graphiques sont décoratifs.
Ils peuvent apporter du rythme et de la personnalité à l’interface, tout en soutenant l’identité visuelle du Design System de l’Autonomie. Ils doivent rester secondaires et ne jamais entrer en concurrence avec :
- le contenu,
- la navigation,
- ou les composants interactifs.
Comportement général
Les éléments graphiques peuvent être utilisés pour :
- décorer une bannière ou une section
- accompagner visuellement une card ou un bloc éditorial,
- structurer une page de manière non fonctionnelle (séparateurs visuels, fonds décoratifs).
Ils ne doivent jamais être utilisés comme signifiants :
- icône d’action,
- pictogramme informatif,
- repère de navigation,
✅ Usage correct :
- Modération : employer avec parcimonie, pour créer de la respiration visuelle ou soutenir l’identité graphique.
- Placement : privilégier les marges, les séparateurs visuels.
- Neutralité fonctionnelle : ne doivent pas interférer avec les composants interactifs (boutons, formulaires, menus, liens).
🚫 Usage incorrect :
- Superposition : ne jamais placer de texte, pictogrammes ou de composant au-dessus d’un élément graphique.
- Ne pas mélanger plusieurs versions colorées (blanc, violet, vert) sur un même viewport (écran).
- Concurrence visuelle : placer un élément graphique trop proche d’un titre, d’un bouton ou d’une image principale, au risque de détourner l’attention.
- Surcharge : multiplier les éléments décoratifs au point de nuire à la hiérarchie et à la lisibilité.
- Utilisation hors contexte : employer un élément décoratif comme icône, logo, pictogramme ou illustration informative.
- Taille disproportionnée : agrandir au point qu’un élément domine le contenu au lieu de le soutenir.
- Mauvais placement : insertion dans une zone fonctionnelle (ex. bloc de formulaire, menu, navigation).