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%.

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.

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.
• Darkgray: neutral color.
• Lightgray: neutral color.

Dark text on light background

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

• Default text should be Darkgray-500.
• Secondary text, which is lower in the visual hierarchy, uses Darkgray-400.
• Disabled / hint text should be Darkgray-300.

Light text on dark background

Similar to light text, there are three different types:

• Default text should be Lightgray-300.
• Secondary text uses Lightgray-400.
• Disabled / hint text should be Lightgray-500.

Light text on color background

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

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

• If icon is supplementary to default text: Icon color should be Darkgray-300.
• If icon has color background: Icon color is White.
• If text has color or status: Icon color should math to its text.