*Variables are named, reusable values you define once and apply throughout your project. Instead of manually typing the same color code or number in dozens of places, you set up a variable with a meaningful name and reference it wherever you need it. When you update the variable, every place that references it updates automatically.* --- ## **Why Use Variables?** Presets handle consistent styling within a single hotspot type, but variables go a level above that. If your brand color appears across multiple different presets (a callout preset, a menu preset, a tooltip preset), updating one variable updates all of them at once without touching each preset individually. And at the craftspace level, a single variable change can ripple across every project in your craftspace simultaneously. --- ## **Variable Types** 360Crafter supports three types of variables: ### **Color** Stores a hex color value (e.g. `#3B82F6`). Color variables are the most commonly used type. Apply them to backgrounds, text, borders, icon tints, and any other color property in the editor. ### **Number** Stores a measurement or rotation value, such as `20px` or `50%`, or a number of degrees. Use number variables for consistent spacing, border radius, font sizes, rotation, or any other measurement that repeats across your project. ### **Icon** Stores a reference to an icon. This can be a URL, an uploaded image, or a built-in Lucide icon using the format `lucide:icon-name`. Icon variables let you swap out a symbol globally across all hotspots that reference it. --- ## **Scopes: Craftspace vs. Project** Variables exist at two levels: **Craftspace variables** are shared across all projects in your craftspace. They are ideal for brand-wide values like your main brand colors, your company icon, and your standard sizing. Everyone working in the craftspace can use them. **Project variables** are local to a single project. They are perfect for values specific to one experience, such as a scene-specific color palette, a unique icon set for that tour, or sizing that differs from the craftspace defaults. When a project variable and a craftspace variable share the same name, the **project variable takes priority**. This lets you override a craftspace default for a specific project without affecting anything else. --- ## **Managing Variables** ### **Craftspace Variables** Open the Craftspace settings to manage variables shared across all your projects. Here you can create, edit, and delete colors, numbers, and icons at the craftspace level. ### **Project Variables** Open the **Variables** page within a project to manage that project’s local variables. You will also see a read-only view of craftspace variables here, so you can see everything available to your project in one place. --- ## **Using Variables in Properties** When editing a hotspot or other element in the Properties Panel, you will see variable options in color pickers and numeric fields. * **Color fields** show a list of your color variables. Click one to apply it. The field stores a reference to the variable rather than the raw color value, so if you update the variable later the element updates too. * **Numeric fields** show a variable picker when variables of the matching type are available. Select a variable to link the field to that value. --- ## **A Built-in Variable: `circle`** 360Crafter includes one built-in variable available to all projects: `circle`. It stores the value `999px`, which produces a fully circular border radius when applied to an element. You will see it appear in border radius fields alongside your own variables. --- ## **Tips** * **Name variables for intent, not appearance.** `brand-primary` is better than `blue-500`. If you rebrand to a different color, the name still makes sense. * **Use craftspace variables for anything brand-wide.** Reserve project variables for one-off overrides or project-specific values. * **Project variables override craftspace variables by name.** To customise a craftspace default for one project, create a project variable with the exact same name. * **Variables are live.** Editing a variable value immediately updates every place it is referenced in your project. You do not need to re-apply it manually.