Global Colors (also called Color Variables or Tokens) are one of the most useful features in Framer. They let you define a color once and use it everywhere — so changing your brand color updates your entire site instantly.

What Is a Global Color?

Instead of hardcoding a specific hex value (like #3D5AF1) into every element, you create a named color variable — for example, "Brand/Primary" — and apply that variable to your elements. When you update the variable, every element using it updates automatically.

Finding Global Colors in Your Template

1. Look in the Assets panel (the grid icon in the left sidebar).

2. Click the Colors tab.

3. You'll see all the color variables defined in your template, organized into groups like Brand, Neutral, Background, etc.

How Colors Are Used in the Template

Every color you see in the template — button backgrounds, heading colors, section backgrounds, borders — is tied to a global color variable. This is intentional: it makes re-theming the entire site fast and consistent.

💡 Tip: You can see which variable is applied to an element by selecting it and clicking the color swatch in the right panel. If it shows a variable name (like "Brand/Primary") instead of a raw hex code, it's using a global color.