Variables

The Variables feature in Kirki lets you define brand and global styles in one central location, so you can keep your designs consistent without repeating yourself.

Apply a variable anywhere in the editor, and it stays connected to its source: update the value once, and the change applies everywhere it’s used across your site.

What Are the Types of Variables

Click the Variables icon in the left sidebar to open the panel. Variables are grouped into four categories, each showing a count of how many variables it contains:

• Colors
• Numbers
• Font Family
• Text Styles

Select a category to see its variables listed in a table.

Color Variables

You can set color variables for:

• Text colors
• Fill colors including gradient color stops
• Border and text stroke colors

Size Variables

You can set size variables for:

• Layout – grid width, height, min, max
• Size – height and width dimensions (including min and max)
• Typography – font size

Font Variables

You can set font variables for:

• Font family

Any custom fonts (including Google fonts) uploaded/installed to your site or Workspace are available when choosing a font family variable.

Create Variables

How to Create a Color Variable

1. Click the Variables icon in the left sidebar, then select Colors.

2. Click the Add Color button.

3. A new color variable will be created. Click the color swatch next to it to open the color picker.

4. Pick a color visually, or type in a value and set opacity.

5. Optional: Use the eyedropper to sample a color from your screen.

6. Optional: To link this variable to another color variable, select one from the list in the color picker. This ties this variable’s value to another variable’s value instead of a fixed color.

How to Create a Number Variable

1. Click the Variables icon in the left sidebar, then select Numbers.

2. Click the Add Number button.

3. Click the field in the next column and enter your value.

4. You can also directly type in your units along with the value or click on the unit to select one from the dropdown.

5. Optional: To link this variable to another number variable, select Apply Variable from the same dropdown.

How to Create a Font Family Variable

1. Click the Variables icon in the left sidebar, then select Font Family.

2. Click the Add Font Family button.

3. Click the dropdown in the next column to open the font picker.

4. Search for a font, or browse by tab: Installed, Google, or Custom.

5. Select a font. A checkmark marks the currently selected font.

How to Create a Reusable Text Style

Reusable Text Styles let you bundle typography settings (font, size, weight, line height, letter spacing, and responsive values) into a single named style:

1. Click the Variables icon in the left sidebar.

2. Select Text Styles.

3. Then, click Add Text Style to get started.

Learn more about Reusable Text Styles.

Manage Variables

How to Search for a Variable

1. Click the Variables icon in the left sidebar, then select the category containing the variable you want to find.

2. Click the Search variable field at the top of the panel and type your search keyword.

3. The table filters to show only matching variables.

4. Click the cross ( X ) icon to clear search results.

How to Rename a Variable

1. Click the Variables icon in the left sidebar, then select the category containing the variable you want to rename.

2. Click directly on the variable’s name. The field becomes editable in place.

3. Type the new name.

How to Reorder a Variable

1. Click the Variables icon in the left sidebar, then go to the category you want to reorder.

2. Click and hold on the variable’s name (not the editable field itself), then drag it to a new position in the list. A blue line shows where it’ll drop.

3. Release to drop the variable in its new position.

How to Duplicate a Variable

1. Click the Variables icon in the left sidebar, then select the category containing the variable you want to duplicate.

2. Click the ellipsis (…) icon next to the variable.

3. Select Duplicate.

How to Copy a Variable’s CSS

1. Click the Variables icon in the left sidebar, then select the category containing the variable.

2. Click the ellipsis (…) icon next to the variable.

3. Select Copy CSS.

How to Delete a Variable

1. Click the Variables icon in the left sidebar, then select the category containing the variable you want to delete.

2. Click the ellipsis (…) icon next to the variable.

3. Select Delete.

Variable Modes

Variable Modes let you define alternate values for the same variable – for example, a Dark Mode color palette alongside your Default one. Instead of creating separate variables for each scenario, you switch which mode is active, and every variable using that mode updates to its value for it.

How to Create a Variable Mode

1. Click Add Mode at the top right of the table. This adds a new column, e.g., “New Mode.”

2. By default, the new mode starts with the same values as Default. Set a value for each variable in the new column.

How to Rename a Variable Mode

1. Click the ellipsis (…) icon on the mode’s column header.

2. Select Rename.

3. Type the new name.

How to Set a Variable Mode as Default

1. Click the ellipsis (…) icon on the mode’s column header.

2. Select Set as Default.

How to Delete a Variable Mode

1. Click the ellipsis (…) icon on the mode’s column header.

2. Select Delete. This removes the mode and its values.

Link Variables

Now that your variables are set up, you can link them to elements. Once linked, that property will no longer hold a fixed value – it will point to the variable instead. This means updating the variable updates every element it’s linked to.

How to Link a Color Variable

1. On the page, select the element you want to style.

2. Go to the Right Panel, find the Color property you want to set – Fill, Text, Border, Shadow Color, etc – and click its color swatch to open the color picker.

3. Scroll to the bottom of the color picker to see the list of Color Variables.

4. Search for a variable by name, or select one directly from the list to apply it.

Tip: You can also click the plus (+) icon next to Search to create a new variable without leaving the picker.

How to Link a Number Variable

1. Select the element, then in the Right Panel, find the numeric property you want to set, such as height, width, font size, and more.

2. Click the unit next to the value to open the dropdown.

3. From here, select Apply Variable. This opens the Numbers panel, listing all your Number Variables.

4. Search for a variable by name, or select one directly from the list to apply it.

How to Link a Font Family Variable

1. Select any text element.

2. In Typography on the Right Panel, click the Font dropdown.

3. Click the variable icon at the top of the panel (next to the close button) to switch from the font list to the list of Font Family Variables.

4. Search for a variable by name, or select one directly from the list to apply it.

How to Unlink Variables

1. Select the element with the linked property.

2. Find the property with the applied variable – it’s highlighted to show it’s linked.

3. Click the unlink icon next to it.

Switch Variable Modes

How to Switch a Variable Mode for a Section

1. Select the section or div from the Layers panel or on the canvas.

2. In the Right Panel, click the variable mode icon next to the element’s name located at the top.

3. From the dropdown, select Inherit to follow whatever mode is set upstream, or select a mode you defined to apply it explicitly.

How to Switch a Variable Mode for the Whole Page

1. From the Layers section in Pages, select Page. This represents the entire page body.

2. Click the variable mode icon next to the layer name.

3. From the dropdown, select Inherit to follow whatever mode is set upstream, or select a mode you defined to apply it explicitly.

📝 Note: If a section further down has its own mode set, that section keeps its own value. To have the page-wide mode take effect there too, set that section’s mode to Inherit.

How to Switch a Variable Mode with an Interaction

You can also use Interaction to let visitors switch modes themselves on the site. This could be a Dark Mode toggle, a theme color change on a personal dashboard, and so on.

1. Select the element that triggers the switch (such as a toggle button), then go to the Interaction tab on the right.

2. Under Triggers, choose Click (tap). This will be the interaction that triggers the Variable Mode switching.

3. Select 1st Click to start building your custom interaction, and give it a name, such as “Dark Mode“.

4. Select the element you want to animate as the target, either from the Canvas or the Layers panel. For this purpose, it’s the wrapper that holds the entire page’s contents.

5. Once the target’s selected, it’ll appear in the Interaction Timeline Editor. Click the space next to it on the timeline to add a property to animate, then select Variable Mode from the list of property types.

6. On the right side of the timeline editor, you’ll see the property’s settings. Click the Variable Mode dropdown and select the mode you want this action to switch to.

7. From here, you can also set the Duration, Delay, and Easing for the transition.

8. Back on the Interaction tab, click the ellipsis icon on this response and select Duplicate to 2nd Click.

Select the 2nd Click response, give it a name, and switch the Variable Mode value back to its original setting.