Logo
Vous trouverez ci-dessous le logo officiel d'Emailable et ses variantes, ainsi que les règles d'utilisation.
-
Principal
La version définitive du logo Emailable. À utiliser sur des fonds clairs.
Expérience souhaitée :
-
-
-
-
Lumière
Variante du logo principal avec un texte blanc. À utiliser sur des fonds sombres.
Expérience souhaitée :
-
Noir
À utiliser sur des fonds clairs dans des situations où l'utilisation de la couleur est limitée. Sinon, utiliser la version principale.
Expérience souhaitée :
-
-
-
-
Blanc
À utiliser sur des fonds sombres dans les situations où l'utilisation des couleurs est limitée. Sinon, utilisez la version claire.
Expérience souhaitée :
Faire :
-
Laisser un espace suffisant entre le logo et les autres éléments ou bords d'un document (la lettre "e" du logo est une distance de sécurité)
-
Utiliser la bonne variante en fonction du contexte (voir ci-dessus)
Ne le faites pas :
-
Modifier le logo de quelque manière que ce soit (changement de couleur, application d'effets, rotation, mise à l'échelle disproportionnée, etc.)
-
Placer le logo sur des fonds où il devient difficile de voir le mot-symbole ou l'une des couleurs de l'icône
Couleurs
-
Primaire
Copié !
50 #ecebffCopié !
100 #dedbffCopié !
200 #c7c2ffCopié !
300 #a899ffCopié !
400 #937affCopié !
500 #7e61ffCopié !
600 #6a4ce1Copié !
700 #5b33c7Copié !
800 #3e238bCopié !
900 #251452Copié !
950 #11082b
-
Ardoise
Copié !
50 #f4f4fbCopié !
100 #e7e7f4Copié !
200 #d9d9edCopié !
300 #c4c4e3Copié !
400 #aeaed6Copié !
500 #9692c4Copié !
600 #8178b0Copié !
700 #655b95Copié !
800 #4b4276Copié !
900 #332b5aCopié !
950 #1d1641
-
Rouge
Copié !
50 #fff1f3Copié !
100 #ffe3e6Copié !
200 #ffccd4Copié !
300 #ffa1b1Copié !
400 #ff708aCopié !
500 #f93a63Copié !
600 #e7174eCopié !
700 #c30d41Copié !
800 #a30e3dCopié !
900 #8b103bCopié !
950 #4e031b
-
Orange
Copié !
50 #fff7edCopié !
100 #ffedd5Copié !
200 #fed7aaCopié !
300 #fdba74Copié !
400 #fb923cCopié !
500 #f97316Copié !
600 #ea580cCopié !
700 #c2410cCopié !
800 #9a3412Copié !
900 #7c2d12Copié !
950 #431407
-
Jaune
Copié !
50 #fff9ebCopié !
100 #fef0c8Copié !
200 #fddd8bCopié !
300 #fccb4fCopié !
400 #fbbd23Copié !
500 #f5af00Copié !
600 #f1a200Copié !
700 #e58e00Copié !
800 #c87200Copié !
900 #9c4f00Copié !
950 #7a3700
-
Vert
Copié !
50 #edfcf5Copié !
100 #d4f7e4Copié !
200 #abedcdCopié !
300 #78ddb3Copié !
400 #3dd198Copié !
500 #1bc58aCopié !
600 #0eb47dCopié !
700 #0d9c71Copié !
800 #0f805eCopié !
900 #0c644bCopié !
950 #085441
-
Cyan
Copié !
50 #ecfeffCopié !
100 #cffafeCopié !
200 #a5f3fcCopié !
300 #67e8f9Copié !
400 #22d3eeCopié !
500 #06b6d4Copié !
600 #0891b2Copié !
700 #0e7490Copié !
800 #155e75Copié !
900 #164e63Copié !
950 #083344
-
Bleu
Copié !
50 #f0f8feCopié !
100 #deeefbCopié !
200 #c4e2f8Copié !
300 #9bd0f3Copié !
400 #6db6edCopié !
500 #549ee7Copié !
600 #4687ddCopié !
700 #3778d2Copié !
800 #2c5ca5Copié !
900 #213e6eCopié !
950 #192e4d
-
Fuchsia
Copié !
50 #fdf4ffCopié !
100 #fae8ffCopié !
200 #f5d0feCopié !
300 #f0abfcCopié !
400 #e879f9Copié !
500 #d946efCopié !
600 #c026d3Copié !
700 #a21cafCopié !
800 #86198fCopié !
900 #701a75Copié !
950 #4a044e
Dégradés
Tous les dégradés sont radiaux et de forme circulaire. Leurs origines sont situées à 20 % des bords supérieur et droit des formes qu'ils contiennent et s'étendent en diagonale jusqu'au coin inférieur gauche (voir ci-dessous).
-
Dégradé foncé
Le gradient principal. Utilisé comme arrière-plan sombre.
Arrêts de couleur :
-
Dégradé plus foncé
Utilisé comme fond sombre supplémentaire pour contraster le dégradé foncé.
Arrêts de couleur :
-
Violet dégradé
Utilisé comme arrière-plan alternatif ou d'accentuation.
Arrêts de couleur :
Typographie
Police de caractères
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:'"|\{}[]
-
Régulière 400
Poids par défaut. Utilisé pour le corps du texte, les descriptions, etc.
-
Moyen 500
Utilisé pour certains liens et étiquettes.
-
Semi-gras 600
Utilisé pour les boutons, les badges, les sous-titres et certains chiffres.
-
Gras 700
Utilisé pour les titres, l'accentuation et les états actifs.
Couleurs des polices
-
Ardoise 900
Couleur de texte par défaut. Elle est utilisée pour les titres, les étiquettes, le texte en évidence et les états actifs. Pour les arrière-plans clairs uniquement.
-
Ardoise 700
Utilisé pour le corps du texte ou le texte de moindre importance. Pour les fonds clairs uniquement.
-
Ardoise 500
Utilisé pour les badges neutres.
-
Ardoise 300
Utilisé pour le texte d'insertion ou les états inactifs.
-
Primaire 500
Utilisée comme couleur d'accentuation pour les liens de texte et certains sous-titres.
-
Primaire 200
Utilisé pour le corps du texte ou le texte de moindre importance. Pour les fonds sombres uniquement.
-
Rouge 500
Utilisé pour les messages de danger/d'erreur et les badges.
-
Jaune 500
Utilisé pour les badges d'avertissement.
-
Vert 500
Utilisé pour les messages de réussite et les badges.
-
Bleu 500
Utilisé pour les badges d'alerte/information.
-
Blanc
Utilisé pour les titres, les étiquettes, le texte en évidence et les états actifs. Pour les arrière-plans foncés uniquement.