As you customize your template, you might want to add a new color that isn't already defined — like a secondary brand color or a specific background for a new section. Here's how to add it as a proper global variable.

Creating a New Color Variable

1. Open the Assets panel → Colors tab.

2. Click the "+" button at the top right of the Colors list.

3. A new color appears with a default name like "Color 1".

4. Double-click its name to rename it (e.g., "Brand/Secondary").

5. Double-click the color swatch to choose your color value.

Applying the New Color to Elements

1. Select any element on the canvas.

2. In the right panel, click the fill or color swatch.

3. In the color picker, click the Variables icon (looks like a token/badge).

4. Your new color variable appears in the list. Click it to apply.

💡 Tip: Organize your colors into groups using slashes in the name: Brand/Primary, Brand/Secondary, Background/Section. Framer will automatically group them in the panel.