Using the Design System in Your Project

Design Systems define your project's colors, typography, spacing, components, and more — all in one place. This guide shows how to view and manage Design System tokens in the Kajoo canvas.

1. Open the Design Systems Panel

Click the Design Systems icon in the left-hand navigation of the canvas.

2. Select a Design System

Choose from your available Design Systems — either the default or another one you've created.

3. Confirm Your Selection

Map your sketch and breakpoints if needed, then click Confirm.

Make sure your responsive settings are mapped correctly.

4. Post-Action Options

After confirming, you’ll have the option to:

Revert Changes – Undo the switch if you change your mind.
Looks Good – Confirm and continue working with the applied Design System.

You can test and revert without losing work.

5. View Design Tokens (Read-Only)

From this section, you can view tokens for:

Colors
Size & Spacing
Radius & Breakpoints
Fonts
Elements
Global Styles

6. Edit Tokens

To make changes:

Click Edit in any token category.
You’ll be taken to the Design System for customization.

Editing is done outside the canvas to keep things organized.