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.

Principles

Expression

Within the palette itself, color usage should be as free as possible to let us communicate creatively, freely, accurately.

Scalability

A proprietary theming system lets us build experiences without manually controlling color – ensuring scalability on a whole new level.

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.

#292a2e

#393a3f

#67686e

#c9cbd1

#dbdce1

#f0f2f5

#292a2e

#3a3937

#71706e

#c7c5c3

#e6e4e1

#f5f4f3

#222647

#3339c5

#4a52ff

#7c83ff

#c9cbff

#eaeaff

#d4c53e

#ffed4a

#fff386

#fffb94

#fffcb8

#ffffff

#4cad4d

#61d963

#96e697

#ba3517

#f24620

#ed624f

#191919

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.

blue cta section

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.

gray palette

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.

color weights

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.

Learn more about theming

theming maps purpose tokens to palette tokens

Tokens

Token

Value

Example

$color-palette-black-tech

#191919

$color-palette-black-tech-rgb

25, 25, 25

$color-palette-blue-10

#eaeaff

$color-palette-blue-10-rgb

234, 234, 255

$color-palette-blue-20

#c9cbff

$color-palette-blue-20-rgb

201, 203, 255

$color-palette-blue-30

#7c83ff

$color-palette-blue-30-rgb

124, 131, 255

$color-palette-blue-50

#4a52ff

$color-palette-blue-50-rgb

74, 82, 255

$color-palette-blue-60

#3339c5

$color-palette-blue-60-rgb

51, 57, 197

$color-palette-blue-80

#222647

$color-palette-blue-80-rgb

34, 38, 71

$color-palette-gray-cold-20

#f0f2f5

$color-palette-gray-cold-20-rgb

240, 242, 245

$color-palette-gray-cold-30

#dbdce1

$color-palette-gray-cold-30-rgb

219, 220, 225

$color-palette-gray-cold-40

#c9cbd1

$color-palette-gray-cold-40-rgb

201, 203, 209

$color-palette-gray-cold-50

#67686e

$color-palette-gray-cold-50-rgb

103, 104, 110

$color-palette-gray-cold-60

#393a3f

$color-palette-gray-cold-60-rgb

57, 58, 63

$color-palette-gray-cold-70

#292a2e

$color-palette-gray-cold-70-rgb

41, 42, 46

$color-palette-gray-warm-20

#f5f4f3

$color-palette-gray-warm-20-rgb

245, 244, 243

$color-palette-gray-warm-30

#e6e4e1

$color-palette-gray-warm-30-rgb

230, 228, 225

$color-palette-gray-warm-40

#c7c5c3

$color-palette-gray-warm-40-rgb

199, 197, 195

$color-palette-gray-warm-50

#71706e

$color-palette-gray-warm-50-rgb

113, 112, 110

$color-palette-gray-warm-60

#3a3937

$color-palette-gray-warm-60-rgb

58, 57, 55

$color-palette-gray-warm-70

#292a2e

$color-palette-gray-warm-70-rgb

41, 42, 46

$color-palette-green-10

#96e697

$color-palette-green-10-rgb

150, 230, 151

$color-palette-green-50

#61d963

$color-palette-green-50-rgb

97, 217, 99

$color-palette-green-80

#4cad4d

$color-palette-green-80-rgb

76, 173, 77

$color-palette-red-10

#ed624f

$color-palette-red-10-rgb

237, 98, 79

$color-palette-red-50

#f24620

$color-palette-red-50-rgb

242, 70, 32

$color-palette-red-80

#ba3517

$color-palette-red-80-rgb

186, 53, 23

$color-palette-white-pure

#ffffff

$color-palette-white-pure-rgb

255, 255, 255

$color-palette-yellow-10

#fffcb8

$color-palette-yellow-10-rgb

255, 252, 184

$color-palette-yellow-20

#fffb94

$color-palette-yellow-20-rgb

255, 251, 148

$color-palette-yellow-30

#fff386

$color-palette-yellow-30-rgb

255, 243, 134

$color-palette-yellow-50

#ffed4a

$color-palette-yellow-50-rgb

255, 237, 74

$color-palette-yellow-80

#d4c53e

$color-palette-yellow-80-rgb

212, 197, 62

About Laika Design System

Kisi Inc.

45 Main Street

11201 Brooklyn

USA

Kisi wordmark

Laika is Kisi’s design system for getkisi.com. Together with the new visual language of Kisi, this system activates the first milestone of the new brand together with working code, design tools and guidelines for getkisi.com.