Helloo
Ici, t'as TOUT ce qu'il faut pour faire un visuel ou un texte qui me ressemble : mes couleurs, mes typos, mes logos, mes composants et ma façon d'écrire. Pioche dedans, n'invente rien à côté 😊
Let's goLes fondations
— la base de tout
Mes couleurs
5 teintes, 3 nuances chacune
Par ordre d'usage : le mauve d'abord, puis le rose, le turquoise, le jaune et l'orange. Le foncé pour les accents et les ombres, le moyen et le clair pour les fonds. Clique sur une couleur pour copier son code 🤓
Quel texte sur quel fond ?
Sur le foncé, du texte blanc ; sur le moyen et le clair, du texte gris foncé. Le chiffre, c'est le contraste mesuré : plus il est haut, plus c'est lisible (4.5 minimum pour du texte courant).
Le titre ton sur ton
Sur le site et dans les sections comme ici, le titre peut prendre la même couleur que le fond, dans une nuance plus foncée : titre en foncé sur un fond clair (ou moyen) de la même teinte. Ça fait un bloc harmonieux, ton sur ton. À réserver aux grands titres : le contraste est trop faible pour du texte courant, qui reste en gris foncé. Le jaune est le plus pâle : vérifie qu'il se lit bien.
Mes typos
Trois polices, trois rôles
Chacune a son job. On ne les échange jamais, promis juré.
Sigmar One. Épaisse, ronde, joyeuse. Jamais pour un paragraphe, elle crie un peu trop pour ça.
Open Sans. Choisie pour sa lisibilité. C'est elle qui porte les explications, les mails, les pages.
Dreaming Outloud. Une bulle, une annotation, une accroche. Jamais plus d'une ligne, sinon ça devient illisible.
L'échelle complète
À faire
- Sigmar One pour les titres et le nom de la marque.
- Open Sans pour tout le texte courant, les boutons, les formulaires.
- Dreaming Outloud pour une bulle ou une accroche d'une ligne.
À éviter
- Un paragraphe en Sigmar One ou en Dreaming Outloud.
- Un libellé de bouton en Sigmar One.
- Une autre police « pour changer ».
Mes logos
Toujours les fichiers d'origine
Jamais redessinés, jamais modifiés. Trois versions, quatre formats. Les fichiers à télécharger arrivent bientôt sur Google Drive.
Version couleur · Par défaut, partout.
Version noir · Monochrome, impression noir et blanc, petites tailles.
Version blanc · Uniquement sur fond sombre.
Zone de protection et tailles
- Zone de protection : tout autour du logo, un espace vide égal à la largeur du « i » de Wiki.
- Taille minimum : 33 mm pour le logo complet, 15 mm pour le logo court. En dessous, passe au logo court ou à la mascotte.
- Fond : toujours un fond bien contrasté. Version blanche uniquement sur fond sombre.
À ne jamais faire
Espaces & arrondis
Tout en multiples de 3
Les espacements et les arrondis viennent toujours de ces échelles, jamais de valeurs au hasard. Les barres sont dessinées 4 fois plus grandes pour qu'on les voie bien.
space-13pxspace-26pxspace-39pxspace-412pxspace-518pxspace-624pxspace-736pxspace-848pxLes arrondis
radius-sm9px · Petits éléments
radius-md15px · Boutons, champs
radius-lg24px · Cartes, blocs
radius-pillrond plein · Étiquettes uniquement
Mes ombres
Une ombre nette, jamais floue
Contour gris foncé de 2px et ombre plate décalée de 3px. Jamais de dégradé, jamais de flou, sauf pour la carte douce.
Pour tous les boutons.
Pour les cadres de texte et les cartes : ombre dans la nuance foncée de la couleur autour.
Sans contour, grise et légère. Uniquement pour la carte douce.
Mise en page
Largeurs, marges et téléphone
Les mêmes règles sur toutes mes pages, pour que tout respire pareil. Les tailles d'écran suivent les normes du web, pas les multiples de 3.
| Ordi | Tablette | Téléphone | |
|---|---|---|---|
| Écran | 1024px et + | 768 à 1023px | jusqu'à 767px |
| Marges côtés | 48px | 24px | 18px |
| Entre sections | 96px | 96px | 60px |
| Grand titre | 48px | 48px | 36px |
| Titre de section | 33 à 42px | 33px | 27px |
| Barre du haut | 96px | 96px | 72px |
Largeur max du contenu : 1080px. Texte long (article de blog) : 720px max, pour des lignes faciles à lire.
Sur téléphone
- Une seule colonne. Les petits éléments (pastilles de couleur, logos) restent sur 2 colonnes.
- La barre du haut descend à 72px, la disquette reste, les liens défilent sur le côté.
- Le bouton d'action principal prend toute la largeur.
- Tout ce qui se touche fait au moins 48px de haut : boutons, champs, cases.
- Texte courant toujours en 16px, petit texte en 14px.
Les espacements dans une section
| Étiquette → titre de section | 12px |
| Titre → texte d'intro | 12px |
| Texte d'intro → contenu de la section | 36px |
| Entre deux paragraphes | 18px |
| Entre deux cartes ou cadres côte à côte | 24px |
| Sous-titre dans une section | 48px au-dessus, 18px en dessous |
| Intérieur d'une carte ou d'un cadre | 24px (36px pour un grand cadre, comme un formulaire) |
| Libellé → son champ | 6px |
| Entre deux champs de formulaire | 18px |
Les composants
— les briques de mes pages
Mes boutons
Contour, coins ronds, ombre noire
Fond en nuance moyenne, texte gris foncé en gras, ombre plate gris foncé. Au survol, le bouton se soulève un peu ; au clic, il s'enfonce.
À faire
- Un verbe à la première personne : « Je réserve ma place », « Je candidate ».
- Le mauve pour l'action principale de la page.
- La version compacte quand le bouton est collé à un bloc.
À éviter
- Un bouton en pilule (rond plein) : c'est réservé aux étiquettes.
- Une ombre de couleur ou floue sur un bouton.
- Plusieurs boutons principaux côte à côte.
Désactivé
Fond blanc cassé, contour gris clair, texte gris moyen, aucune ombre. Pour une action pas encore possible (inscriptions pas ouvertes, formulaire incomplet).
Sur téléphone
Le bouton d'action principal prend toute la largeur de l'écran, pour être facile à toucher avec le pouce. Tous les boutons font au moins 48px de haut.
Mes étiquettes
Une info courte, en pilule
Un ou deux mots maximum. C'est le seul endroit où le rond plein est utilisé. Ce n'est jamais un bouton.
Mes cartes
Un bloc de contenu
Pour un article, une offre, un module. Contour gris foncé, coins de 24px, ombre dans la couleur de ton choix. L'accroche manuscrite au-dessus du titre est optionnelle.
ombre mauve
Automatiser sans se prendre la tête
On structure ton business étape par étape, sans jargon 🫶🏻
ombre rose
Automatiser sans se prendre la tête
On structure ton business étape par étape, sans jargon 🫶🏻
ombre turquoise
Automatiser sans se prendre la tête
On structure ton business étape par étape, sans jargon 🫶🏻
ombre jaune
Automatiser sans se prendre la tête
On structure ton business étape par étape, sans jargon 🫶🏻
ombre orange
Automatiser sans se prendre la tête
On structure ton business étape par étape, sans jargon 🫶🏻
carte douce
CTRL + Help
Sans contour, ombre grise légère. Pour un bloc plus calme.
Mes formulaires
Des champs clairs et tutoyés
Toujours un libellé au-dessus du champ, jamais seulement un texte grisé à l'intérieur. Au clic, l'ombre de couleur apparaît.
Repos
Focus
Erreur
Oups, il manque le @ dans ton adresse.
Désactivé
Liste déroulante
Repos
Désactivé
Cases à cocher et choix unique
Carré (ou rond) de 24px, contour gris foncé, coins de 9px. Coché : fond mauve moyen, coche ou point gris foncé, petite ombre nette de 2px. Le libellé est toujours à droite, en 16px, et on peut cliquer dessus.
Navigation & pied de page
Le haut et le bas de mes pages
La barre de navigation est mauve foncé, avec tout en blanc : la mascotte en version blanche (un clic ramène en haut de la page) et les liens. Le pied de page est aussi mauve foncé, avec le logo blanc et la signature au centre en Sigmar One.
Barre de navigation
Pied de page
fait avec 💜 par Camille
Page de référence interne · The Wiki Queen
Entre deux grandes parties de page, une bande rose foncé avec le titre en blanc et une petite phrase manuscrite précédée d'un tiret long. Le blanc sur mauve ou rose foncé est un choix assumé.
Ma voix
— comment j'écris
Ma voix
Comme à une amie
J'écris comme si je parlais à quelqu'un en face de moi : tutoiement systématique, ton chaud, enthousiaste et pédagogique, jamais commercial ou corporate.
À faire
- Tutoyer, toujours.
- Des phrases naturelles, des paragraphes courts et aérés.
- Les tics de l'oral : « Bah », « du coup », « en fait », « t'as », « y'a ».
- Des voyelles qui s'étirent pour l'enthousiasme : « troooop contente », « Wahouuuuu ».
- Des MAJUSCULES pour souligner un mot : « RIEN », « TOUT ».
- Les apartés entre parenthèses en italique : « (ou voir carrément geek) ».
- Des emojis pour rythmer, sans excès : 🥹 😊 🤓 🫠 🤭 🫣 🙌🏻 🫶🏻 ✌🏻 💜 🎵 🩷
- Montrer plutôt que juste décrire, et expliquer la logique avant l'outil.
À éviter
- Le ton commercial, corporate ou le jargon marketing.
- La pression à la vente, la manipulation.
- Le tiret long (tiret cadratin), banni partout.
- Compliquer une explication technique.
- Les analogies couture : c'est ma passion perso, pas mon métier.
« J'ai envie de travailler avec des meufs marrantes, qui savent rigoler, qui ont cette petite envie de mieux comprendre la technique (ou voir carrément geek). »
Le portrait de ma cliente idéale, par l'ambiance.
« Oups, ok je me suis un peu emballée. C'est pas la fin du monde mais... »
L'autodérision après une exagération volontaire.
« Et comme je suis un peu cuite après tous ces emails, j'ai demandé à Claude de me résumer toutes les questions que tu pourrais te poser (...) (et j'ai même laissé les tirets cadratins qu'il met partout et que ça m'exaspère, alors que je les utilise aussi, mais pas pareil !) »
La transparence complice sur mes coulisses, même l'IA.
« Wahouuuuu », « adoréééééé », « Boooon », « jeudiiii »
Les élongations, plus variées qu'un simple « trooop ».
Le test avant de publier
- Est-ce que je tutoie et je parle comme à une amie ?
- Est-ce que ça sonne comme une conversation plutôt qu'un pitch ?
- Est-ce que j'explique la logique plutôt que de juste donner l'instruction ?
Et on vérifie qu'il n'y a aucun tiret long.