Color is an essential part of our brand. In order to stand out, we need to communicate with colors that reflect ourselves, our values and our ambitions.
Within the palette itself, color usage should be as free as possible to let us communicate creatively, freely, accurately.
A proprietary theming system lets us build experiences without manually controlling color – ensuring scalability on a whole new level.
A strong but simple color palettes will accomplish two things: it will make us stand out, and communicate what we stand for. Empathetic color is recognizing how users perceive colors. The palette should act on accessibility, inclusiveness and intuitive patterns. Our color palette enables us to form our visual language, which combines information, color, design and purpose.
By giving each color in our palette meaning, we are able to use them for various intent. Depending on the situation, green, yellow and red are to be used to indicate success, a warning or failure. These colors should be used sparingly.
($color-palette-blue-50) is our primary call to action (CTA) color and should be used with good purpose and intent. It adds contrast and can in most cases serve the purpose on its own without any accent color added.
Our gray colors consist of warm and cold tints. In most cases we use gray to add depth to compositions. For example we can use
$color-palette-gray-warm-20 instead of white, to add a warmer and more human touch to a composition.
The warmer tints acts as a gateway for inclusiveness, contrasting against the colder accents which resembles technology in our modern world. This enables us to create meaningful palettes for different purposes.
In general we use black and white to deliver information with typography. Depending on the composition this may vary. Read more about blackness and contrast on typography here.
To enrichen the experience of our black color, we use techblack, i.e slightly brighter than the full black. This helps us to deliver an experience with just the right contrast for a better readability across digital screens, however it also makes sure that pitch black won't be used in compositions.
White is untouched, meaning its value will always be pure. The lighter tints of gray can be used instead of white if its important. In some occasions for example
$color-palette-gray-cold-20 can be used for typography as well as a background section.
Together this color system forms a great addition and adds value to Kisi brand. It should be used creatively, but accuratly.
Depending on the scenario, palette colors should take up different amount of space. We call those distributions color weights. Here are some examples of usages of our palette in use.
The color palette alone does not give any information about how colors achieve harmonious color combinations from our color palette and should be used on the website. Our Laika Theming System allows us to assign those automatically.
25, 25, 25
234, 234, 255
201, 203, 255
124, 131, 255
74, 82, 255
51, 57, 197
34, 38, 71
240, 242, 245
219, 220, 225
201, 203, 209
103, 104, 110
57, 58, 63
41, 42, 46
245, 244, 243
230, 228, 225
199, 197, 195
113, 112, 110
58, 57, 55
41, 42, 46
150, 230, 151
97, 217, 99
76, 173, 77
237, 98, 79
242, 70, 32
186, 53, 23
255, 255, 255
255, 252, 184
255, 251, 148
255, 243, 134
255, 237, 74
212, 197, 62