A strong color palette is the heart of any consistent and visually engaging UI. With Kajoo, you can easily create and manage color palettes that reflect your brand identity and streamline your design workflow across all components and projects.

🌈 Why Use Color Palettes?

Color palettes allow you to:

• Maintain visual consistency across your entire product.
• Organize colors logically with shades, tints, and modes.
• Speed up design and development by using predefined, reusable color tokens.
• Adapt branding effortlessly by updating colors in one place.

✅ Adding a Color Palette in Kajoo

In this section, you will learn how to add a color palette to your design system.

Go to app.kajoo.ai

1. Open the Colors Section

Open the design system you want to edit and access the colors section. This is where all color-related configuration happens.

2. Click "Add Color Palette"

On the Colors page, click the “Add Color Palette” button to begin creating a new palette.

✅

Benefit: Color palettes allow you to organize your brand colors into logical groupings — such as primary, secondary, neutrals, or accessibility-focused sets.

3. Enter Palette Name

Give your palette a meaningful name (e.g. “Red Primary Color”, “Dark Theme”, “Accent Palette”) and description. Naming helps organize your system and makes it easy for teams to find the right colors quickly.

🎯

Best Practice: Use clear, functional names that describe how or where the palette will be used.

4. Select Mode

Kajoo allows you to add color modes like Tints, Shades, or Default. These modes help define how a base color changes in brightness or darkness. You can add up to 10 colors in your palette and later add more.

✅

Benefit: Color modes make it easier to design for depth, states (hover/pressed), or themes like light/dark mode — all within the same palette.

5. Add Color Palette

Once you've named your palette and chosen a mode, click “Add Color Palette” to confirm. Your new palette will now appear in your Design System.

🎨 Adding Colors to Your Palette

After creating the palette, it’s time to fill it with your brand colors.

6. Add a Single Color

Within the palette, click “Add Color” to begin defining a new color in your palette.

7. Enter Color Name

Give each color a specific name (e.g. Primary Blue, Success Green 600, Neutral-100). Good naming helps with token referencing and team collaboration.

8. Select and Add Color

Use Kajoo’s color picker or paste a HEX/RGB value to choose the exact color you want.

🎯

Benefit: Choosing precise color values ensures visual accuracy across platforms.

Once you're happy with the color and name, click “Add” to finalize adding it to your palette. Repeat this process to build out the full set of colors.

🔧 Managing Color Palettes & Colors

After creating a palette, you can:

• Edit the palette name and description.

• Add new colors to the palette as your design evolves.

• Edit existing colors if you need to tweak values or rename tokens.

• Delete individual colors that are no longer needed.

• Delete the entire palette. If the palette is used across a project, the values will become static in all linked projects.