Five Dots / Système de design / v1.0

Reliez les points.
Gardez l’identité.

Une référence pratique pour la direction graphique approuvée : typographie affirmée, point de liaison bleu, récits produit clairs et animations utiles.

Télécharger le PDF designer (anglais) · Lire le guide de style complet (anglais) · Tokens de design · Bannières sociales (anglais)
01 / Identité

Quatre fondations. Un point de liaison.

Five Dots
Five Dots

La géométrie du symbole correspond au favicon. Ces exemples associent le symbole à DM Sans. Les anciens logos SVG complets utilisent encore Arial et nécessitent une version vectorisée validée avant diffusion externe.

Télécharger les logos

Prêts pour votre prochain profil.

Utilisez le PNG carré pour LinkedIn et les images de profil. Les deux exports font 1024 × 1024 px, avec des marges pour un recadrage carré ou rond. Utilisez le SVG pour les travaux vectoriels.

Symboles transparents

Télécharger le symbole pour fonds clairs (SVG)
Télécharger le symbole pour fonds sombres (SVG)

Pour le logo complet, associez le symbole à DM Sans. Les anciens SVG contiennent du texte Arial éditable et ne sont pas les sources recommandées pour de nouveaux usages externes.

Télécharger les bannières sociales (anglais)

Une identité. Tous les canaux.

Bannières prêtes à importer sur les pages entreprise LinkedIn, YouTube et X. Chaque version reprend la phrase anglaise approuvée « Your RevOps consultant in your AI. ». Téléchargez le PNG pour l’import ou le SVG vectorisé pour le design.

Télécharger toutes les bannières (ZIP, anglais)

Les lettres SVG sont vectorisées pour préserver les polices. Vérifiez le recadrage dans l’aperçu de chaque plateforme avant publication. Lire les notes de format et d’import (anglais).

02 / Couleurs

Du bleu et de l’espace.

paper#FAFBFE
ink#202733
muted#526078
accent#3563E9
accentHover#254CBE
accentLight#E8EFFF
line#DDE3ED
white#FFFFFF
inverseText#F5F7FC
inverseAccent#82A5FF

Utilisez le bleu pour les actions, états actifs et cinquième point. Gardez de grandes surfaces claires et du texte sombre. Évitez les accents de marque verts et les boutons principaux orange.

03 / Typographie
Une pensée claire.
Une expression humaine.

DM Sans

Titres principaux, texte et interface. Hiérarchie nette, graisses modérées et interlignage généreux.

Newsreader italique

Accents éditoriaux courts dans les titres.

IBM PLEX MONO

Étapes, libellés de section et petits détails techniques.

Nouveaux composants : corps de texte 16 px, secondaire 14 px, aide essentielle au moins 12 px. Ne reprenez pas les minuscules libellés de démo dans les formulaires.

04 / Composants

Clarifiez la prochaine étape.

Votre consultant RevOps dans votre assistant IA.

Associez une action principale claire à une alternative plus discrète.

Action principale ↗ Action secondaire ↗

Les boutons d’exemple naviguent dans ce guide. Hauteur 50 px · rayon 7 px · texte 13 px. Rayon des cartes : 12–14 px ; des grands panneaux : 18 px.

05 / Rythme et animation

De l’espace pour comprendre.

  • Contenu sur 1240 px ; espacement des sections de 100 px sur ordinateur.
  • Empilez les colonnes sur petit écran ; généralement 55–65 px entre sections sur mobile.
  • Alternez sections ouvertes, claires et sombres pour varier le rythme.
  • L’introduction mène directement au problème.

Des animations utiles.

  • Récit principal : 5 secondes par étape.
  • Logos clients : boucle continue de 25 secondes.
  • Pause au survol ou au focus ; respect du mouvement réduit.
  • Ne cachez jamais une information essentielle derrière une animation.
06 / Réutilisation

Faites évoluer le système délibérément.

Toute recommandation future doit préciser le besoin utilisateur, le modèle réutilisé, le comportement mobile et les implications d’accessibilité. Nouvelles couleurs, polices ou variantes de logo exigent une décision de marque explicite.

Cette référence documente la direction approuvée. Les standards de réutilisation proposés et incohérences CSS ou d’assets figurent dans le guide complet ; ce n’est pas une certification d’accessibilité.