A7 - Step-by-Step Create Process

Create a Color Palette

1

Configure Base Color

1. Select the Color Square for Base Color, It will open a Color Picker module

2. Replace the placeholder Inutfield “Base Color” with your palette name.

3. Check the preview to make sure it looks right.

2

Select Lightening and Darkneing Color

1. Pick your Lighten and Darken colors using their color squares

2. Tip: for best results, leave these at their defaults.

3. Confirm in the preview.

3

Select Variant Count

1. Use the slider to choose how many variants you want generated from your base color

4

Dark Mode Preview

1. In the Dark Mode preview, adjust the Base Color’s Lightness and Saturation until it feels balanced.

2. Verify the result in the dark mode preview.

5

Palette Layout

1. Choose how the palette frame should look.

2. Include palette for Light Mode.

3. Include palette for Dark Mode.

4. Create palette with components if you want component instances generated.

6

Generate Palette

Click Generate Palette.

7

Verify

1. In Canvas: confirm the palette renders as expected.

2. In your collection Kolibri Sync: confirm the palette was saved.

Demonstration of the create feature