Design System
Fondations visuelles et règles d’interface communes à la documentation et aux produits Squared : typographie, couleur, layout, composants, motion et accessibilité.
Principes
Le design Squared privilégie la clarté, la hiérarchie et la précision. Les interfaces doivent être immédiatement lisibles avant d’être décoratives.
- Une action principale clairement identifiable.
- Des niveaux de texte cohérents et peu nombreux.
- Des espacements réguliers plutôt que des ajustements locaux.
- Un contraste suffisant dans les thèmes clair et sombre.
Typographie
Space Grotesk est la police de référence de la documentation. Utiliser le poids et la taille pour créer la hiérarchie ; ne pas multiplier les styles arbitraires.
font-family: "Space Grotesk", sans-serif;
Couleur
Dans le Squared Help Center, le vert #7BE84E sert d’accent fonctionnel : focus, statut positif, navigation active et actions clés. Il ne doit pas devenir un fond omniprésent.
La couleur ne doit jamais être le seul signal d’un état. Toujours compléter avec texte, icône, label ou structure.
Layout & espace
Construire avec des containers, stacks et grids. Les paddings et gaps doivent venir d’une échelle cohérente. Éviter les marges négatives et les déplacements au pixel utilisés comme correctifs permanents.
Composants
- Boutons : primaire, secondaire, texte/icône.
- Cards : contenu, statut, action, métadonnée.
- Callouts : information, avertissement, danger.
- Inputs : label persistant, état focus visible, erreur explicite.
- Navigation : position active toujours identifiable.
Motion
Une animation doit clarifier un changement d’état, guider l’attention ou améliorer la continuité. Éviter les mouvements gratuits, les longues durées et les effets qui décalent la mise en page.
Accessibilité
Vérifier contraste, focus clavier, ordre de lecture, alternatives textuelles, tailles tactiles et fonctionnement sans dépendre uniquement du hover.