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.
Palette
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.
Usage
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.
Blue ($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.
Weights
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.
Theming
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.
