Kilimandjaro Style Guide

Ceci est un guide des composants à partir desquels Kilimandjaro est construit.

Le site Kilimandjaro a été construit selon certains modèles pour garantir que votre site suit votre marque sur tous les appareils. Chacun de ses composants a son équivalent sur tablette et mobile, vous n'avez donc pas à vous soucier de trouver « la taille parfaite pour les appareils mobiles ».

Kilimandjaro Couleurs :

  • - Couleurs principales
  • - Couleurs secondaires

Typographie:

Boutons:

Formulaires:

Les couleurs de Kilimandjaro :

Vous remarquerez que lorsque vous changez les couleurs sur le « Design Manager », l’ensemble de l’Interface Utilisateur se modifiera avec les couleurs de votre marque. 

Couleurs principales

  • Primaire (Primary) : La couleur de votre marque

  • Secondaires (Secondary) : Généralement une couleur proche de la première

  • Tertiaire (Third) : Une couleur « éclatante ». Généralement opposée à la couleur de votre marque (dans la roue chromatique). 

    Nous recommandons d’utiliser la « triade », mais si vous voulez explorer d’autres combinaisons de couleurs, vous pouvez utiliser Paletton.com 

 

 
Primary
#7731FF
 
Secondary
#125BFF
 
Third
#0DB2BA

Couleurs secondaires

  • Clair (Light) : Généralement proche du blanc
  • Clair principal (Light Main) : Une version claire de votre couleur principale 
  • Gris (Grey) : Vous le verrez sur les cartes et les icônes
  • Sombre (Dark) : La couleur la plus sombre de l’identité de votre marque
 
Light
#F5F5F5
 
Light Main
#F4F6FC
 
Grey
#707070
 
Dark
#272B3F

Typographie :

Le Kilimandjaro a une échelle modulaire de 1.250, ce qui signifie que chaque taille de texte augmentera proportionnellement. Vous pouvez voir comment fonctionnent les échelles modulaires ici. 

H1 Voici le soleil (turururun)

H2 Voici venir le soleil et je dis

H3 C'est bon

H4 tutururun tutururun tutururun

C'est la taille de vos paragraphes. Voyons à quoi cela ressemble avec le Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ex turpis, malesuada mollis felis commodo non. Phasellus finibus aliquet ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a feugiat sapien. Nam at ligula nec sapien gravida sagittis. Sed eu sapien quis arcu fringilla viverra. Vivamus hendrerit enim vitae vulputate pulvinar.

  • Voici une puce  
  • Une deuxième puce  
  • ET voilà la troisième 

Boutons :

Maintenant, regardons vos CTAs (Call to action) qui sont (évidemment) adaptés selon la plateforme. 

  • Conversion principale (nous suggérons d’utiliser cela pour LA conversion principale de votre page) 

  • Conversion secondaire (un peu moins importante) 

  • Troisième conversion (généralement utilisé pour le « en savoir plus ») 

Avoir ce super pack!

Avoir ce super pack!

En savoir plus


Formulaires :

Les formulaires sont sûrement les éléments les plus importants d’un site Inbound. 
Vous remarquerez qu’il est possible d’afficher un message d’erreur sur chaque formulaire.