Charte de marque · v2
Prisme
Une lumière entre, trois faisceaux sortent. Le nom porte déjà l’idée ; cette identité se contente de la rendre visible, et de la rendre applicable partout, sans interprétation.
Ce que l’agence promet
Une identité ne commence pas par un logo. Elle commence par une phrase que l’agence peut tenir, et que ses clients peuvent vérifier.
Raison d’être
Faire exister des produits numériques qui tiennent la route, et qui continuent de tenir une fois l’agence partie.
Promesse
Stratégie, design et code sous un même toit. Un seul interlocuteur, du premier atelier à la mise en production.
Preuve
Huit ans d’exercice, plus de 100 projets livrés, 30 clients accompagnés, trois pôles internes. Des chiffres, pas des adjectifs.
Territoire
Cotonou, Bénin. Une agence africaine qui travaille aux standards internationaux, et qui ne s’en excuse pas.
Une lumière, trois faisceaux
Assu + light. Le nom contient déjà la matière : la lumière. Le logo contient déjà la démonstration : un disque azur, magenta, solaire. Le concept les relie : le prisme.
Une lumière blanche entre dans le verre et en ressort décomposée. C’est exactement ce que fait l’agence : un besoin unique entre, et trois métiers en sortent, distincts mais issus du même faisceau.
Azur, le développement
La structure. Ce qui tient, ce qui dure, ce qui se maintient.
Magenta, le design
La décision. Ce qui tranche, hiérarchise, rend une interface lisible.
Solaire, le motion et le graphisme
L’élan. Ce qui appelle, anime, fait passer à l’action.
Quatre versions, pas une de plus
Le logotype couleur est la version par défaut. Les monochromes existent pour les contraintes réelles : gravure, tampon, sérigraphie une couleur, fond photographique chargé.
Principal · fond sombrepar défaut
Principal · fond clairpar défaut
Monochrome blanccontrainte
Monochrome encrecontrainte
Monogramme couleuravatar, favicon
Monogramme blanccontrainte
Zone de protection
Aucun élément (texte, image, bord de page) n’entre dans la zone
égale à la hauteur du disque (notée x) autour du logotype.
Taille minimale écran
24 px de hauteur totale. En dessous, le disque perd ses trois couleurs.
Taille minimale print
12 mm de hauteur totale, quel que soit le procédé d’impression.
Format de référence
SVG. Le PNG n’est produit que pour les plateformes qui refusent le vectoriel.
Ce qu’on ne fait jamais au logo
Quatre interdits, et ils suffisent. Une charte qui en liste vingt n’est jamais lue.
Trois couleurs et beaucoup de silence
Les trois teintes du prisme sont des signaux, pas des fonds. Elles ne prennent jamais plus d’un dixième d’une surface.
Azur
#1B98D6 · RVB 27 152 214
Action, lien, navigation. La couleur qui se clique.
Magenta
#E4368C · RVB 228 54 140
Sélection, ponctuation, projet mis en avant. La couleur qui désigne.
Solaire
#FBE824 · RVB 251 232 36
Appel à l’action principal. Une seule occurrence par écran.
Les neutres portent la page
Répartition 60 / 30 / 10
Le dernier dixième est le seul territoire du prisme. Dès qu’il déborde, la marque perd son signal. C’était le défaut du site d’origine, où le dégradé habillait à la fois les fonds, les titres et les cartes.
Lisibilité : la règle à ne jamais contourner
Aucune des trois teintes ne passe le seuil AA en texte sur fond blanc. Pour écrire, on utilise leurs variantes foncées.
| Teinte | Sur blanc | Texte | Variante texte | Contraste |
|---|---|---|---|---|
| Azur #1B98D6 | 2,9:1 | échec | #0B6591 | 5,9:1 ✓ |
| Magenta #E4368C | 3,6:1 | échec | #A8145C | 6,4:1 ✓ |
| Solaire #FBE824 | 1,2:1 | échec | #A08F00 | 4,7:1 ✓ |
Sur fond sombre, ce sont les variantes claires qui prennent le relais :
#7FCBF0, #F79BC8, #FDF06B.
Une seule famille, toute son amplitude
Aa
Gilroy · geometric sans · 300 → 900
Gilroy porte l’ensemble de la marque. Une famille, neuf graisses, aucune fonte d’appoint. Le contraste éditorial ne vient pas d’une seconde police mais du monospace système, réservé aux surtitres, index, étiquettes et chiffres.
Interlettrage
Les titres sont resserrés à -0,035 em. Plus c’est gros, plus c’est serré.
Longueur de ligne
66 caractères au maximum. Au-delà, l’œil perd la ligne suivante.
Alignement
À gauche, toujours. Le centré est réservé aux bandeaux d’appel à l’action.
La grille n’est pas un décor, c’est la règle
Tout se pose sur une grille de cases carrées, visible en fond de page. Les blocs n’y flottent pas : leurs bords tombent sur ses lignes. C’est ce qui donne à la marque son air de plan d’architecte.
Une page, vue de près
1. Une case, un pas
Tout se mesure en cases : largeurs, hauteurs, marges, écarts. On ne place rien « à l’œil ».
2. 24 cases de contenu
Douze sous 992 px. Les colonnes d’un groupe en sont des diviseurs : 2, 3, 4, 6, 8 ou 12 cases.
3. Une case de marge
De chaque côté du contenu, entre les deux rails. Sur téléphone, le contenu va jusqu’au bord.
4. Bord à bord
Les pièces d’un groupe se touchent, sans espace : un seul filet les sépare, exactement sur une ligne.
5. Opaque
Une pièce cache la grille. On ne la laisse jamais transparaître à travers un bloc à demi transparent.
6. Une ligne au centre
La grille part du milieu de la page : la composition reste symétrique à toutes les largeurs.
La case selon l’écran
| Largeur d’écran | Case | Contenu | Marge |
|---|---|---|---|
| Moins de 576 px | 32 px | Toute la largeur, par paires de cases | Aucune |
| 576 à 767 px | 38 px | 12 cases | 1 case |
| 768 à 991 px | 48 px | 12 cases | 1 case |
| 992 à 1199 px | 36 px | 24 cases | 1 case |
| 1200 à 1399 px | 44 px | 24 cases | 1 case |
| 1400 px et plus | 50 px | 24 cases | 1 case |
Hors écran : affiches, présentations, documents
Un support fixe se découpe en 12 modules sur sa largeur, et la marge vaut un module. Une publication carrée de 1080 px a donc des modules de 90 px et une zone utile de 900 px. Les titres s’alignent sur un module, le logo se pose dans l’angle bas gauche de la zone utile. Le chapitre Réseaux sociaux applique cette règle à chaque format.
Huit éléments, pas un de plus
Le prisme ne se dessine jamais littéralement hors du logo. Il se décline en quelques éléments graphiques, tous tirés du plan : ce sont eux qui signent une surface, bien plus que la couleur.
Le vrai travail, pas des illustrations
Ce qu’on montre
Des captures de produits réellement livrés, cadrées large, avec leur interface lisible. L’équipe en situation, en lumière naturelle.
Ce qu’on ne montre pas
Aucune illustration 3D de banque d’images, aucune photo de bureau générique, aucun rendu de code décoratif. Ils disent d’une agence exactement ce que tous ses concurrents disent aussi.
Traitement
Désaturation de 35 % au repos, couleur pleine au survol. L’image s’active quand on s’y intéresse.
Quand il n’y a pas d’image
On dessine un spécimen géométrique aux jetons de la marque plutôt que d’emprunter une illustration. C’est ce que fait la page Services.
Le mouvement révèle, il ne décore pas
Une seule courbe
cubic-bezier(0.16, 1, 0.30, 1) : départ vif, arrivée posée.
Elle sert à tout : apparitions, ouvertures, déplacements. Aucun rebond,
aucun élastique : la marque est sérieuse, elle ne fait pas de gag.
La signature interactive
Le curseur suiveur est fusionné avec la page
(mix-blend-mode: difference) : là où le disque recouvre un élément,
les couleurs se soustraient au lieu de le masquer. On voit toujours ce qu’on vise.
C’est la traduction interactive du prisme : deux lumières qui se croisent
produisent une troisième couleur.
| Variante | Fond du disque | Texte du libellé | Usage |
|---|---|---|---|
| Magenta | #E4368C | #FBE824 | Cartes projet, projet suivant |
| Azur | #1B98D6 | #F4F6F9 | Boutons, liens, navigation |
| Solaire | #FBE824 | #0B0D11 | Appel à l’action principal |
Ces trois paires sont figées. On ne mélange pas le fond d’une ligne avec le texte d’une autre.
Direct, chiffré, sans superlatif
La marque parle comme un artisan qui connaît son métier : elle annonce ce qu’elle fait, en combien de temps, et ce qu’il en coûte. Elle vouvoie. Elle fait des phrases courtes.
On dit
- « Réponse chiffrée sous 48 heures. »
- « 100 % du code source vous appartient. »
- « Sprints de deux semaines, recette continue. »
- « Trois mois de garantie après mise en ligne. »
- « Si une prestation manque à votre besoin, dites-le nous. »
On ne dit pas
- « Des solutions innovantes et sur-mesure »
- « Votre partenaire de confiance à 360° »
- « Nous sublimons votre présence digitale »
- « Une équipe passionnée et dynamique »
- « N’hésitez pas à nous contacter »
Personne
« Nous » pour l’agence, « vous » pour le client. Jamais « on », jamais la troisième personne.
Chiffres
Chaque promesse porte un nombre ou une échéance. Sinon, on ne la fait pas.
Boutons
Un verbe et son résultat : « Démarrer un projet », « Remplir le brief ». Jamais « En savoir plus ».
Une affiche, une idée
Sur les réseaux, la marque a une seconde pour être reconnue. Elle y arrive avec les mêmes moyens que sur le site : un fond plein, la grille en filigrane, un titre en Gilroy Black, un seul accent.
Formats et grille
| Format | Pixels | Grille | Pour |
|---|---|---|---|
| Carré | 1080 × 1080 | 12 × 12 modules de 90 px | Instagram, Facebook, LinkedIn |
| Portrait | 1080 × 1350 | 12 × 15 modules de 90 px | Étude de cas, carrousel |
| Story | 1080 × 1920 | 12 modules, 250 px réservés en haut et en bas | Stories, Reels, statut WhatsApp |
| Lien partagé | 1200 × 630 | 12 modules de 100 px | Aperçu d’un lien vers le site |
| Bannière | 1584 × 396 | Texte sur la moitié droite : la photo de profil couvre la gauche | Couverture LinkedIn |
Cinq règles de composition
Une idée par affiche
Un chiffre, une phrase ou un projet. Si deux idées se disputent l’affiche, on en fait deux.
Un module de marge
Rien ne touche le bord : texte, logo et visuel restent dans la zone utile, un module à l’intérieur.
Le logo en bas à gauche
Logotype complet, ou monogramme quand la place manque. L’adresse du site lui répond en bas à droite.
Un seul accent
Le filet prisme, un mot souligné ou un fond solaire. Jamais les trois à la fois.
Pas d’effet
Aucun halo, aucune lueur, aucun dégradé de fond, aucune photo de banque d’images. Des aplats et des vraies captures.
Les modèles
48 h
pour recevoir une réponse chiffrée à votre brief.
assulight.com
Le code source vous appartient. À 100 %.
assulight.com
Un site qui tient sur une grille.
Design, développement, mise en ligne.
Lire l’étude →
En ligne cette semaine.
Lien en bio
Le carrousel : trois affiches, un seul filet
Trois erreurs qui coûtent cher à un site vitrine.
Faites glisser →
Aucun prix, aucun délai : le visiteur part comparer ailleurs.
Faites glisser →
Votre brief en cinq minutes. Réponse sous 48 h.
assulight.com
La bannière
Design, développement et animation. Depuis Cotonou, aux standards internationaux.
Une maison, trois pôles
AssuLight signe seule. Les pôles ne sont pas des marques : ce sont des faisceaux, désignés par leur couleur, jamais par un logo distinct.
| Niveau | Nom | Signature | Couleur |
|---|---|---|---|
| Maison | AssuLight | Logotype complet | Prisme entier |
| Pôle | AssuLight Dev | Logotype + mention | #1B98D6 |
| Pôle | AssuLight Design | Logotype + mention | #E4368C |
| Pôle | AssuLight Motion | Logotype + mention | #FBE824 |
Assu, une main tendue
Le personnage de la marque est l’icône elle-même, devenue une main. Il guide les visiteurs du site, une section à la fois, et se range au premier signe. Il ne porte aucune pièce que le logo n’ait pas déjà.
Les doigts
Les trois traits de lumière, détachés de la paume comme dans le logo. Ils saluent, désignent, comptent jusqu’à trois.
La paume
Le « a » et son disque. Le visage y vit : deux yeux qui suivent le visiteur, une bouche qui change avec l’humeur.
Le bras
La barre du « a », à sa longueur d’origine. Avec le bas de l’anneau, elle forme ses deux appuis au sol.
Ses huit poses
Il fait
- Une bulle par section, une seule fois par visite.
- Il se tait pendant la saisie, et parle entre les étapes du brief.
- Au premier clic, il se range et s’en souvient à la visite suivante.
- Il vouvoie, fait des phrases courtes, ne cite que des chiffres publiés.
- Il garde les couleurs, l’épaisseur et les proportions du logo.
Il ne fait jamais
- Couvrir un bouton, un lien ou un champ.
- Répéter un message déjà dit.
- Promettre ce que le site ne dit pas.
- Porter un accessoire, un costume ou une autre couleur.
- Apparaître sur un devis, une facture ou un contrat.
La marque, posée sur des objets
Carte de visite · 85 × 55 mm
+229 96 02 24 15
assulight.com · Cotonou, Bénin
Signature e-mail
Avatar & tampon · monogramme
Fichiers livrés
Tout ce que décrit cette charte existe en fichier, dans le
dossier brand/ du projet.
| Fichier | Format | Pour |
|---|---|---|
| Logotypes | brand/logo/*.svg | Quatre déclinaisons + monogramme, dérivées du même tracé |
| Palette | assulight.ase | Illustrator, Photoshop, InDesign, Figma, Affinity |
| Palette | assulight.gpl | GIMP, Inkscape, Krita |
| Palette | palette.css | Variables CSS prêtes à coller |
| Jetons | jetons/assulight.json | Couleur, typographie, mouvement, curseur. Lisible par un outil de build |
| Règles | brand/README.md | Le mode d’emploi des fichiers |
#1D97D5 et #E0398C, là où les jetons du site portent
#1B98D6 et #E4368C. L’écart est invisible à l’œil mais
réel en impression. Les fichiers livrés conservent les valeurs du logo : il
n’appartient pas à la refonte de modifier l’artwork. Le détail des deux
résolutions possibles est dans brand/README.md.