Kilimandjaro’s Style Guide

This is a guide of the components that build Kilimandjaro

Kilimandjaro’s site was built following certain patterns to assure that your site follows your brand across every device. Each of these components have their equivalent on tablet and mobile so you don’t have to worry about finding “a perfect size for mobile devices”.

Kilimandjaro’s Colors :

  • - Main colors
  • - Secondary colors

Typography:

Buttons:

Forms:

Kilimandjaro’s Colors:

You’ll notice that once you modify the colors on the Design Manager, the whole User Interface will automatically change to your brand colors.

Main Colors

  • Primary: Your brand color

  • Secondary: Usually a color that is close to your first color

  • Third: A “popping color. Usually on the opposite side of your brand color (in the color wheel). 

We recommend the triad, but if you want to explore other color combinations you can use Paletton.com 

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

Secondary colors

  • Light: usually close to white
  • Light Main: a light version of your main color
  • Grey: you’ll see it around on cards and icons
  • Dark: The darkest color on your brand’s identity
 
Light
#F5F5F5
 
Light Blue
#F4F6FC
 
Grey
#707070
 
Dark
#272B3F

Typography:

Kilimandjaro has a modular scale of 1.250, which means that every text size will grow proportionally. You can take a look at how modular scales work here. 

H1 Here comes the Sun (turururun)

H2 Here comes the sun and I say

H3 It’s all right

H4 tutururun tutururun tutururun

And this is the size of your paragraphs. Let’s take a look on how it looks with 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.

  • Here goes a bullet point
  • A second bullet point
  • Aaaaaand a third one

Buttons:

Now let’s take a look at your CTAs which are (of course) responsive. 

  • Main conversion (we suggest to use this for THE main conversion of your page)
  • Secondary conversion (a little less important)
  • Third conversion (usually used for “learn more” purposes)

Get this amazing pack!

Get this amazing pack!

Read More


Forms:

Forms are possibly one of the most important elements on an Inbound site. 
You’ll notice that every form has the possibility to display an error message.