- Basic Guidelines
- Grid
- Logo usage
- Colors
- Gradients
- back
Layout Grid
While your still open to use the 5px grid defined in the WIMP Guidelines , we recommend giving up a strict 5px pixel finegrained grid.
Instead we recommend using the grid system defined in twitter bootstrap:
Usage of the kaba logo
Take into account that for the logo usage the same rules must be applied as in the print guidelines (color usage, proportions and raster usage).
The logos for using in the software come in 3 different sizes:
40px height:
60px height:
80px height:
Usage of color:
Primary colors:
Kaba Blue
#04284D
rgb(4, 40, 77)
rgb(4, 40, 77)
WHITE
Middle Blue
#8D97A6
rgb(141, 151, 166)
rgb(141, 151, 166)
WHITE
Light Blue
#D5DBE0
rgb(213, 219, 224)
rgb(213, 219, 224)
KABA BLUE , DARK GRAY
Gray:
Dark Gray
#4C4C4C
rgb(76, 76, 76)
rgb(76, 76, 76)
WHITE
Text Gray
#808080
rgb(128, 128, 128)
rgb(128, 128, 128)
WHITE
Middle Gray
#CCCCCC
rgb(204, 204, 204)
rgb(204, 204, 204)
KABA BLUE , DARK GRAY
Light Gray
#EEEEEE
rgb(227, 227, 227)
rgb(227, 227, 227)
KABA BLUE , DARK GRAY
Background Gray
#F5F5F5
rgb(245, 245, 245)
rgb(245, 245, 245)
KABA BLUE , DARK GRAY
White
#FFFFFF
rgb(255, 255, 255)
rgb(255, 255, 255)
DARK GRAY , TEXT GRAY
Secondary colors:
Orange
#F2A200
rgb(242, 162, 0)
rgb(242, 162, 0)
WHITE
Green
#72A74B
rgb(114, 167, 75)
rgb(114, 167, 75)
WHITE
Yellow
#FFFBA6
rgb(255, 251, 166)
rgb(255, 251, 166)
DARK GRAY
Red
#F20000
rgb(242, 0, 0)
rgb(242, 0, 0)
WHITE
Usage of gradients:
Primary colors:
Kaba Blue
#003366
#04284D
WHITE
Middle Blue
#8D97A6
#7E8794
WHITE
Light Blue
#D5DBE0
#BDC2C7
KABA BLUE , DARK GRAY
Gray:
Dark Gray
#4C4C4C
#333333
WHITE
Text Gray
#808080
#666666
WHITE
Middle Gray
#CCCCCC
#B3B3B3
KABA BLUE , DARK GRAY
Light Gray
#EEEEEE
#D4D4D4
KABA BLUE , DARK GRAY
Background Gray
#F5F5F5
#E5E5E5
KABA BLUE , DARK GRAY
White
#FFFFFF
#EEEEEE
DARK GRAY , TEXT GRAY
Secondary colors:
Orange
#F2A200
#D99100
WHITE
Green
#8BCC5C
#72A74B
WHITE
Yellow
#FFFCCC
#FFFBA6
DARK GRAY
Red
#F20000
#D20000
WHITE