Guide de marque
Boulio.
Une identité chaleureuse pour rendre la comptabilité plus accessible. Voici les repères et les fichiers pour donner à chaque support le même esprit, la même lisibilité et la même précision.
La comptabilité qui vous comprend.
La comptabilité avec un peu de douceur.
Boulio donne aux chiffres un visage accueillant. Son nom évoque le boulier : on remet les choses en ordre, une petite boule à la fois. Sa personnalité associe chaleur, clarté et rigueur.
Pour qui
Les personnes autonomes, les petites entreprises et les petites équipes qui prennent en charge leurs comptes. La présentation respecte aussi les habitudes des responsables des finances et des comptables.
Ce que Boulio incarne
Une comptabilité plus facile à aborder. La douceur facilite le premier contact; la précision donne confiance. Chaque message aide à comprendre avant d’agir.
La comptabilité qui vous comprend.
Le descripteur Logiciel de comptabilité accompagne la première présentation du nom. La signature exprime la personnalité de Boulio.
Un signe attachant, un nom lisible.
Le logo horizontal est la signature principale. Le boulier abricot et le nom Boulio forment un seul ensemble : ils restent toujours liés, avec leur taille et leur écartement d’origine. Les contours doux l’inscrivent dans la famille Funo et Jasette.
Règle de composition : ne jamais utiliser la mascotte seule ou le nom seul comme logo. Choisir la composition complète horizontale ou verticale, y compris pour les avatars et les icônes.
Écrire Boulio dans les textes, avec une majuscule initiale. Le logo est fourni en tracés : ne jamais le recomposer avec une police approchante.
La bonne version pour chaque fond.
Vertical
Pour une composition centrée ou un format carré.
Fond sombre
La version dédiée préserve les couleurs et la lisibilité.
Monochrome
Pour une reproduction en une seule couleur.
Blanc
Pour un fond uni foncé et une impression inversée.
Format compact
Conserver le symbole et le nom ensemble, avec les proportions du fichier maître.
Application
La composition verticale complète, centrée dans son cadre.
Laisser respirer le logo.
X correspond à la largeur d’une perle du symbole, soit 20 unités dans le dessin maître. Garder au moins X d’espace libre autour du logo, sans texte, bordure ni autre signe. Calculer X selon l’échelle du logo : pour le fichier horizontal de 930 unités affiché à 465 px, X vaut 10 px.
| Version | Taille minimale | Usage |
|---|---|---|
| Logo horizontal | 180 px ou 35 mm de largeur | Présentation et documents |
| Logo vertical | 120 px de largeur | Composition centrée |
| Icône d’application complète | 120 px de largeur pour les supports publics | Avatar et répertoire d’applications |
| Favicon complet simplifié | 32 px et plus | Onglet et petits repères techniques |
Ne pas dissocier le boulier du nom, étirer, incliner, recadrer, recolorer ou ajouter d’ombre au logo. Sur une image chargée, utiliser une surface unie. Dans les petits emplacements techniques, employer le favicon fourni, qui conserve lui aussi les deux éléments.
De la chaleur, avec un ancrage bleu.
Le dégradé abricot #FFCE9B → #ED914C appartient à la mascotte et aux illustrations. Le bleu encre porte les textes et les actions principales. Le crème et le bleu doux créent des surfaces calmes.
Les couleurs décoratives ne transmettent aucune information comptable seules. Les états utilisent leurs couleurs dédiées avec un libellé explicite.
| Combinaison autorisée | Contraste | Usage |
|---|---|---|
| Encre sur crème | 10.73:1 | Texte courant |
| Blanc sur encre | 11.32:1 | Texte courant |
| Texte secondaire sur blanc | 5.94:1 | Texte courant |
| Encre sur abricot clair | 7.84:1 | Texte courant |
| Encre sur bleu perle | 5.92:1 | Texte courant |
| Succès sur son fond | 6.34:1 | Texte courant |
| Erreur sur son fond | 5.85:1 | Texte courant |
| Attention sur son fond | 6.24:1 | Texte courant |
Ratios calculés à partir des couleurs sRGB du kit. Réserver l’abricot et le bleu perle aux surfaces et aux éléments décoratifs; éviter le texte blanc sur ces teintes.
Une lecture claire, jusque dans les chiffres.
Inter, auto-hébergée, compose l’interface et les communications. Utiliser les graisses 400 pour le texte, 500 pour les libellés, 600 pour les titres et 700 pour une emphase ponctuelle. Repli : system-ui, Arial, sans-serif.
La comptabilité qui vous comprend.
1 250,00 $ · 850,00 $ · 400,00 $
Éé Àà Çç Œœ · 400 Regular · 500 Medium · 600 SemiBold · 700 Bold
| Rôle | Taille et interligne | Graisse |
|---|---|---|
| Titre de page | 48 / 54 px · 36 / 42 px sur mobile | 600 |
| Titre de section | 32 / 38 px | 600 |
| Intertitre | 24 / 30 px | 600 |
| Texte courant | 16 / 27 px | 400 |
| Tableau et légende | 14 / 22 px | 400 ou 500 |
Texte courant : 16 px minimum et interligne confortable. Activer les chiffres tabulaires dans les tableaux, aligner les montants à droite et conserver les unités visibles. Le lettrage du logo reste indépendant d’Inter.
Bienveillant, précis, jamais infantilisant.
Boulio vouvoie. Les phrases sont courtes et les verbes concrets. Les explications sensibles restent sobres. Éviter le jargon inutile, les surnoms et les plaisanteries dans les erreurs financières.
| Situation illustrative | Expression Boulio |
|---|---|
| Accueil | Bonjour Alex. Voici vos chiffres du mois. |
| Action | Créer une facture |
| Confirmation | Vos modifications sont enregistrées. |
| Montant manquant | Ajoutez un montant supérieur à 0,00 $. |
| Erreur | Les modifications n’ont pas été enregistrées. Réessayez. |
En français canadien, écrire 1 250,00 $ et préciser $ CA si plusieurs devises coexistent. Préférer une date explicite : « 2 novembre 2026 ». Les exemples de ce guide illustrent le langage, sans définir les fonctions disponibles.
À privilégier
« Le montant est manquant. Ajoutez-le pour continuer. »
Le problème est nommé et la correction est concrète.
À éviter
« Oupsie! Vos petits sous se sont perdus! »
Le ton enfantin et la plaisanterie brouillent une information financière.
Des repères constants à chaque étape.
Construction
Grille de 4 px. Espacements : 8, 12, 16, 24, 32, 48 et 64 px. Rayons : champs 8 px, cartes 12 px, boutons 999 px. Hauteur minimale des boutons : 44 px.
Interactions
Action principale #203B60, survol #142D4D. Focus visible de 3 px #2867AD, décalé de 3 px. Navigation au clavier et libellés explicites.
| Rôle | Couleur | Règle |
|---|---|---|
| Texte secondaire | #566579 | Contexte et précisions |
| Bordure | #D6DFE8 | Séparation des surfaces |
| Succès | #216149 | Confirmation accompagnée de texte |
| Erreur | #9B3A2B | Problème et correction possible |
| Attention | #76521A | Conséquence à comprendre avant d’agir |
Viser 4,5:1 pour le texte courant et 3:1 pour les grands caractères et repères indispensables. Ne jamais dépendre de la couleur seule. Respecter le mouvement réduit, conserver la saisie après une erreur quand c’est possible et annoncer clairement les résultats d’action.
Les bordures pâles séparent les surfaces; elles ne suffisent pas à délimiter un champ interactif. Pour les champs, employer une bordure #566579. Afficher une explication près d’une action désactivée et conserver un signe moins pour les montants négatifs.
Des formes douces, une composition ordonnée.
Employer des icônes aux extrémités arrondies, sur une grille commune et avec une épaisseur régulière. Ajouter un libellé aux actions ambiguës. Les formes rondes, perles et petits regroupements prolongent l’univers du boulier.
Le logo complet accompagne les moments de découverte et les communications. Le boulier n’est jamais extrait du logo pour devenir une illustration indépendante. Les motifs décoratifs utilisent des perles ou des rangées abstraites, avec une alternative vide; le logo complet porte l’alternative « Boulio ».
Icônes : grille de 24 × 24 px, trait de 2 px et terminaisons rondes. Photographies : lumière naturelle, gestes de travail et cadrages simples; placer le logo sur un cartouche uni. Animation : apparition ou transition de 150 à 200 ms, sans rebond des chiffres ni mouvement continu. Désactiver ces transitions lorsque le mouvement réduit est demandé.
Une identité utile dans les vrais formats.
Application et communication
Utiliser la composition complète verticale dans l’icône. Pour un visuel public : une idée, un message court et le logo complet. Toute maquette de produit est identifiée comme une illustration.
Réseaux et documents
Visuel social carré : 1 080 × 1 080 px, marge de 64 px, une signature et un message court. Document A4 ou lettre : marge de 16 mm minimum, encre sur fond blanc, logo horizontal de 35 mm minimum.
Exemple fictifMaquette, sans calcul fiscal
Aperçu d’un document comptable
Atelier Démo · dossier EXEMPLE-001 · 2 novembre 2026
Sur une facture réelle, les renseignements de l’émetteur et les montants priment sur la décoration. L’exemple ci-dessus montre la hiérarchie graphique et l’alignement des chiffres.
Une application Harmonixus.
Sur un support Boulio, son logo domine et la mention « Une application Harmonixus » reste secondaire. Garder au moins 1,5 X entre les signatures Boulio et Harmonixus.
Dans le répertoire d’applications, Funo, Jasette et Boulio partagent une structure de présentation et un poids visuel équilibré. Chaque marque conserve sa couleur, son symbole et ses proportions.
Un ensemble prêt à réutiliser.
Utiliser les SVG pour le Web et les compositions redimensionnables, les PNG pour les outils qui demandent une image, et le favicon complet simplifié pour les petites tailles techniques. Tous les fichiers officiels gardent le boulier et le nom Boulio ensemble. Les fichiers de couleurs assurent la cohérence des interfaces.
Les fichiers sont en sRGB. Pour l’impression, faire convertir les couleurs avec le profil de l’imprimeur et vérifier une épreuve. Inter est distribuée avec sa licence SIL OFL dans le kit.
Conserver la même version du guide, des logos et des jetons de style. Toute évolution doit être répercutée dans l’ensemble distribué. Ne pas extraire un logo d’une capture d’écran.