Design System
Règles d’interface Squared pour construire des produits cohérents, lisibles, premium et accessibles sans uniformiser artificiellement chaque produit.
Principes
- Clarté avant décoration.
- Hiérarchie avant densité.
- Cohérence avant nouveauté.
- Une action principale par contexte.
- La couleur communique un état avant d’être décorative.
Typographie
Space Grotesk est la référence principale des interfaces Squared lorsque le produit utilise la DA actuelle. Limiter les niveaux de texte et utiliser taille, graisse et espace avant de multiplier les styles.
Display → Heading → Subheading → Body → Label → Microcopy
Couleur
Le Help Center et Squared Workspace utilisent #7BE84E comme accent fonctionnel. Le vert sert le focus, la sélection, l’état positif et quelques actions clés ; il ne doit pas devenir le fond universel du produit.
Les surfaces reposent d’abord sur des neutres clairs/sombres. Les produits Squared peuvent posséder leur propre accent lorsque leur identité l’exige.
Light / Dark
Le thème clair du Help Center est le défaut documentaire. Le thème sombre reste une alternative complète, jamais une inversion approximative. Les tokens sémantiques — texte, surface, ligne, muted, accent, danger — doivent fonctionner dans les deux thèmes.
Dot grid
Le dot grid est une signature graphique, pas une texture obligatoire. L’utiliser sur les zones de marque ou d’entrée — hero, login, empty state choisi — et l’éviter derrière les longs contenus, tableaux ou zones à forte densité.
Iconographie
Les icônes fonctionnelles utilisent Iconly v2 Essential.
- Outline : navigation et action par défaut.
- Regular : sous-navigation et information secondaire.
- Fill / Bold : sélection, actif ou état important.
Pas d’emoji, de sigle ou d’un deuxième pack d’icônes pour remplacer une icône fonctionnelle. Les emojis restent possibles comme contenu communautaire.
Composants
Le système standardise ce qui revient réellement : boutons, inputs, navigation, modales, cards, callouts, statuts et empty states. Tout contenu n’a pas besoin d’une carte : les séparateurs et l’espace sont souvent plus premium qu’une succession de rectangles.
Motion
Les interactions simples utilisent des transitions courtes, généralement autour de 150–200 ms. Le mouvement explique une continuité ou un changement d’état ; il ne doit pas ralentir l’action. Respecter prefers-reduced-motion.
Accessibilité
Focus visible, contraste, clavier, ordre de lecture, labels, alternatives textuelles et cibles tactiles font partie du composant dès sa conception. Sur mobile, viser au moins ~44 px de zone interactive lorsque l’espace le permet.