Tout en minuscules
Un ton simple et accessible, sans majuscule d’autorité. On écrit « Atypikoo » dans un texte, mais le logo reste en minuscules.
Charte graphique
Le logo Atypikoo, mode d’emploi.
Les versions du logo, ses couleurs, ses typographies et ses règles d’usage, avec tous les fichiers à télécharger.
01
Deux o, deux cercles.
Le nom s’écrit en minuscules, en Ubuntu Bold. Les deux o sont dessinés comme deux cercles qui se rejoignent en montant : deux personnes qui se trouvent, et un lien qui tient. Ce sont les seuls éléments en couleur du logo.
Deux o qui se rejoignent
Les deux cercles se soudent sans se confondre. Chacun garde sa forme : c’est la rencontre, pas la fusion.
Un axe qui monte
Le second o s’élève de 21°. Le logo se lit de gauche à droite comme un mouvement vers le haut.
02
Une construction exacte
Tout part du rayon R d’un o. Le diamètre d’un o est égal à la hauteur d’x d’Ubuntu Bold : les cercles ont la taille des lettres. Ne redessinez jamais le logo : utilisez les fichiers fournis.
RRayon extérieur d’un o, unité de mesure du logo
0,526 RRayon du trou de chaque o
1,724 RDistance entre les centres des deux o
20,95°Inclinaison de l’axe qui relie les deux o
2 RDiamètre d’un o, égal à la hauteur d’x d’Ubuntu Bold
0,1 RÉcart entre les boîtes du k et du premier o ; le premier o repose sur la ligne de base
03
Six versions du logo
Choisissez la version selon le fond. En cas de doute, la version principale sur fond blanc est toujours la bonne réponse.
04
Le pictogramme
Les deux o, seuls. Ils signent Atypikoo dans les petits formats : avatars, favicon, icône d’application. Le pictogramme ne remplace pas le logo lors d’une première présentation : le nom doit apparaître à proximité.
Construction de la pastille
rRayon de la pastille, unité de mesure
R = 0,423 rRayon d’un o, soit 42 % du rayon du disque
0,526 RRayon du trou, comme dans le logo
1,724 R · 21°Entraxe et inclinaison, comme dans le logo
Centre communLe milieu des deux o est au centre exact du disque : la forme est symétrique
0,107 DMarge la plus courte, dans l’axe : l’épaisseur d’un anneau (0,1 D)
Versions
05
Le logo animé
Les lettres apparaissent, puis les deux o surgissent en fondu et glissent l’un vers l’autre jusqu’à se rejoindre. L’animation dure moins d’une seconde et demie et se joue une seule fois.
- Les lettres montent« atypik » apparaît lettre par lettre, de gauche à droite.
- Les deux o apparaissentIls surgissent en fondu, chacun de son côté de l’axe à 21°.
- Ils se rejoignentIls glissent l’un vers l’autre et se soudent à leur place définitive.
Pictogramme en boucle, version A. Les deux o s’écartent puis se retrouvent : à utiliser comme indicateur de chargement.
Pictogramme en boucle, version B : le clin d’œil. Les deux o restent fixes, leurs trous clignent deux fois de suite, comme des yeux, puis marquent une pause.
Fichiers SVG autonomes, lisibles par tous les navigateurs. Si l’utilisateur a demandé à réduire les animations, le logo s’affiche directement dans sa forme finale.
06
Zone de protection et tailles minimales
Autour du logo, gardez une marge au moins égale au diamètre d’un o. Aucun texte, image ou bord de page ne doit y entrer.
200 px
Lisible
120 px
Lisible
80 px
Minimum
56 px
Trop petit
32 px
Pastille
16 px
Pastille, minimum
12 px
Trop petit
À l’impression : logo complet de 20 mm de large au minimum, pastille de 5 mm. En dessous, utilisez la pastille plutôt que le logo complet.
07
Couleurs
Le logo n’utilise que trois couleurs : l’orange Atypikoo, le noir et le blanc. Les couleurs secondaires viennent du site et accompagnent le logo sans jamais le recolorer.
Orange Atypikoo
- HEX
- #E7604D
- RVB
- 231 96 77
- CMJN
- 0 58 67 9
- Contraste
- blanc 3,4:1 · noir 6,2:1
La couleur du logo : les deux o, les aplats, les accents. Pour un texte orange sur fond clair, utiliser l’orange texte.
Noir
- HEX
- #000000
- RVB
- 0 0 0
- CMJN
- 0 0 0 100
- Contraste
- blanc 21:1 · noir —
Le texte du logo sur fond clair.
Blanc
- HEX
- #FFFFFF
- RVB
- 255 255 255
- CMJN
- 0 0 0 0
- Contraste
- blanc — · noir 21:1
Le fond de référence, et le texte du logo sur fond sombre.
Couleurs secondaires
Bleu Atypikoo
- HEX
- RVB
- 24 110 154
- CMJN
- 84 29 0 40
- Contraste
- 5,6:1
Boutons, liens et bandeaux du site. Texte blanc lisible dessus.
Orange texte
- HEX
- RVB
- 199 68 53
- CMJN
- 0 66 73 22
- Contraste
- 4,9:1
L’orange accessible pour un texte ou une icône sur fond clair.
Orange sur sombre
- HEX
- RVB
- 238 144 131
- CMJN
- 0 39 45 7
- Contraste
- noir 8,9:1
Remplace l’orange pour un texte sur fond sombre.
Beige
- HEX
- RVB
- 252 249 243
- CMJN
- 0 1 4 1
- Contraste
- —
Fond doux des sections éditoriales.
Vert
- HEX
- RVB
- 10 135 109
- CMJN
- 93 0 19 47
- Contraste
- 4,47:1
Réservé aux confirmations et aux états de réussite.
Valeurs CMJN indicatives, calculées depuis le RVB. Pour une impression soignée, faites valider la teinte par l’imprimeur sur épreuve. Contrastes calculés selon les WCAG : 3:1 suffit pour un logo, 4,5:1 est nécessaire pour un texte courant.
08
Typographies
Trois familles, trois rôles. Elles sont toutes gratuites et sous licence libre.
atypik
abcdefghijklmnopqrstuvwxyz 0123456789
Aa Bb 123
Regular 400SemiBold 600ExtraBold 800
Ici, la différence est la norme.
Être différent
est la norme
est la norme
09
Le bon logo pour chaque fond
Le logo doit toujours ressortir nettement. Sur une photo, choisissez une zone sombre et calme, sans détail derrière les lettres.
Fond blancVersion principale
Fond beigeVersion principale
Fond noirVersion inversée
Fond orangeBlanc intégral
Fond bleuBlanc intégral
Photo sombre et calmeBlanc intégral
10
À éviter
Le logo s’utilise tel quel. Ces modifications, même légères, abîment sa reconnaissance.
Déformer
Toujours redimensionner en gardant les proportions.
Changer les couleurs
Seules les six versions proposées sont autorisées.
Faire pivoter
Le logo reste horizontal : l’élan est déjà dans les deux o.
Ajouter des effets
Pas d’ombre, de contour, de dégradé ni de relief.
Déplacer les o
Les deux o ne se détachent pas du nom et ne changent pas d’angle.
Réécrire le nom
Ne composez jamais le logo au clavier, dans aucune police.
Manquer de contraste
Sur un fond coloré, passez en blanc intégral.
Poser sur un fond chargé
Motif, texture ou photo détaillée brouillent la lecture.
11
En situation
Quelques exemples d’application, pour voir quelle version choisir selon le support. Les noms et coordonnées sont fictifs.
12
Téléchargements
Privilégiez le SVG : il reste net à toutes les tailles. Les PNG ont un fond transparent et mesurent 2400 px de large pour le logo, 1200 px pour le pictogramme.
Le kit complet
Toutes les versions en SVG et PNG, les fichiers animés et un mémo des règles essentielles.
| Aperçu | Version | Usage | Fichiers |
|---|---|---|---|
| Version principale | Sur fond blanc ou clair. C’est la version à utiliser en priorité. | SVGPNG | |
| Version inversée | Sur fond noir ou très sombre : le texte passe en blanc, les o restent orange. | SVGPNG | |
| Logotype sur fond orange | Le logo en blanc sur l’aplat orange, marge de protection comprise. Bannières, couvertures, écrans de partage. | SVGPNG | |
| Noir intégral | Impression en une couleur, gravure, tampon, documents administratifs. | SVGPNG | |
| Blanc intégral | Sur photo, sur fond orange ou bleu, en marquage textile ou en sérigraphie. | SVGPNG | |
| Orange intégral | Monochrome orange, sur fond blanc uniquement : objets, signalétique, goodies. | SVGPNG | |
| Pictogramme | Les deux o seuls, quand le nom Atypikoo est déjà lisible à proximité. | SVGPNG | |
| Pictogramme noir | Pour les impressions en une couleur. | SVGPNG | |
| Pictogramme blanc | Sur fond sombre, orange ou photo. | SVGPNG | |
| Pastille orange | Avatar de réseau social, favicon, tampon, autocollant. | SVGPNG | |
| Pastille blanche | La même pastille, à poser sur un fond orange ou sombre. | SVGPNG | |
| Icône d’application | Carré plein, sans arrondi : le système applique lui-même la forme de l’icône. | SVGPNG | |
| Logo animé | Lecture unique, sur fond clair. | SVG animé | |
| Logo animé, fond sombre | Lecture unique, sur fond noir. | SVG animé | |
| Pictogramme en boucle A | Indicateur de chargement : les o s’écartent puis se retrouvent. | SVG animé | |
| Pictogramme en boucle B | Indicateur de chargement : les trous clignent deux fois, comme des yeux. | SVG animé |
Un format manquant, une question ?
Écrivez-nous, nous vous répondons avec le bon fichier.
Charte mise à jour le 1er octobre 2026 · Dossier de presse