Colors

Primary Color

Kotti uses Primary Blue as the main design color which also match the 3YOURMIND brand color. We don't recommend against using multiple colors in one page, but they should be limited to less than 20%.

Color Palettes

Naming convention

The colors in each palette have the same hue but different saturation and lightness. Palettes start with a primary color, then continue in the spectrum to create a complete and usable set of colors. An example color name is ColorName-number. ColorName represents the hue, and number represents the lightness. A smaller number means lighter, and a greater number means darker.

Palettes

Primary Blue

primary-05

#F3F8FF

primary-10

#E7F0FF

primary-20

#C7DAF9

primary-30

#99BDF7

primary-40

#689CF1

primary-50

#3173DE

primary-60

#2E65BF

primary-70

#2757A6

primary-80

#1A4488

primary-90

#0F2F62

Red

red-05

#FEF2F2

red-10

#FFE1E1

red-20

#FFC8C8

red-30

#FFA2A2

red-40

#FC6D6D

red-50

#F53E3E

red-60

#E22020

red-70

#BF1717

red-80

#9D1717

red-90

#821A1A

Green

green-05

#E5FFE1

green-10

#CBFCC5

green-20

#A2F298

green-30

#7BE46E

green-40

#58C74A

green-50

#40B032

green-60

#359928

green-70

#217B15

green-80

#19670F

green-90

#105008

Yellow

yellow-05

#FEFEE8

yellow-10

#FFFEC2

yellow-20

#FFFA87

yellow-30

#FFF043

yellow-40

#FFDE03

yellow-50

#EFC703

yellow-60

#CE9A00

yellow-70

#A46E04

yellow-80

#88560B

yellow-90

#734610

Violet

violet-05

#FCF3F9

violet-10

#F9EAF4

violet-20

#F5D5E9

violet-30

#EEAFD6

violet-40

#E383BC

violet-50

#D75DA2

violet-60

#C43E84

violet-70

#A92D6A

violet-80

#8C2858

violet-90

#75264C

Mint

mint-05

#E5FAF5

mint-10

#C7FDF1

mint-20

#83FAE2

mint-30

#40F5D4

mint-40

#25E9CC

mint-50

#01CBB1

mint-60

#00A491

mint-70

#038275

mint-80

#08675F

mint-90

#0C554E

Purple

purple-05

#FAF6FD

purple-10

#F4ECFB

purple-20

#E9D9F5

purple-30

#D8BAED

purple-40

#C291E1

purple-50

#A766CF

purple-60

#8443A8

purple-70

#753893

purple-80

#613078

purple-90

#532B64

Orange

orange-05

#FFF7ED

orange-10

#FFEED4

orange-20

#FFD9A8

orange-30

#FFBD71

orange-40

#FF9333

orange-50

#FE7711

orange-60

#EF5C07

orange-70

#C64308

orange-80

#9D360F

orange-90

#7E2E10

Gray

gray-05

#F8F8F8

gray-10

#F3F3F3

gray-20

#E3E3E3

gray-30

#BABABA

gray-40

#9D9D9D

gray-50

#848484

gray-60

#696969

gray-70

#4F4F4F

gray-80

#3A3A3A

gray-90

#282828

Slate

slate-05

#F6F6F9

slate-10

#EDEDF1

slate-20

#D6D6E1

slate-30

#B2B3C7

slate-40

#898CA7

slate-50

#6A6D8D

slate-60

#555674

slate-70

#46485E

slate-80

#3C3D50

slate-90

#353545

Color Usage

Meaning

Primary Blue: A primary color/brand color, which delivers brand value.
Green: Success or progress, which gives positive feedback.
Red: signals attention or danger.
Gray: neutral color.
Slate: neutral color.

Dark text on light background

Default text var(--gray-80)

Secondary text var(--gray-60)

Disabled / hint text var(--gray-30)

Depends on text meaning and hierarchy, there are three different types:

Default text should be var(--gray-80).
Secondary text, which is lower in the visual hierarchy, uses var(--gray-60).
Disabled / hint text should be var(--gray-30).

Light text on dark background

Default text var(--gray-05)

Secondary text var(--gray-20)

Disabled / hint text var(--gray-40)

Similar to light text, there are three different types:

Default text should be var(--gray-05).
Secondary text uses var(--gray-20).
Disabled / hint text should be var(--gray-40).

Light text on color background

Default text White, Opacity: 100%

Secondary text White, Opacity: 68%

Disabled / hint text White, Opacity: 46%

Same as light text, there are three different types:

Default text should be white color with opacity 100%.
Secondary text uses white color with opacity 68%.
Disabled / hint text should be white color with opacity 46%.

Icon color

file file_name.pdf

announce Announce new icons.

print Print invoice.

Depends on the meaning and visual hierarchy, icon should match the following rules:

If icon is supplementary to default text: Icon color should be var(--gray-40).
If icon has color background: Icon color is White.
If text has color or status: Icon color should match to its text.

Colors & Tokens