# Apply global styles across your store
Set your brand colors, text styles, and buttons in one place, so every page looks consistent. When you change a style, every element using it updates automatically, with no restyling page by page.
## When to use
Best fits for:
* **Setting up your brand before building pages**, so every section you add already uses your colors and fonts.
* **Rebranding or refreshing your store**, like changing your accent color, and having it update everywhere at once.
* **Keeping a team consistent**, so everyone uses the same heading sizes and button styles instead of picking their own.
## Quick setup: set up your brand
Open any page in FoxStudio, then select **Global styles** (paintbrush icon) in the left sidebar.
1. In the **Variables** tab, open **Color**.
2. Update the main colors first:
* **Accent 1:** your main brand color.
* **Background 1:** your main page background.
* **Heading text** and **Body text:** the colors of your headings and paragraphs.
3. Save your changes.
1. In the **Text** tab, select each heading style you use most, like **Heading 1** and **Heading 2**, and set its font, size, and weight.
2. Select **Body text** and set a comfortable reading size, usually 16 px.
3. Select **Update**.
To use your own font, see [How do I add a custom font?](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-custom-font)
1. In the **Buttons** tab, select **Primary button**.
2. Set its colors for both **Normal** and **Hover** states.
3. Repeat for **Outline button** if you use secondary buttons.
## Variables
Variables are single reusable values, like a color or a spacing size. Apply them to any element, and update them in one place.
| Category | What it controls |
| ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Color** | Brand colors: Accent 1 & 2, Background 1 & 2, Body text, Heading text, Border, Light grey, Dark grey, Hot color, and more |
| **Font size** | Consistent text sizes across elements |
| **Border** | Border width and corner radius, so cards and boxes match |
| **Space** | Padding and gaps, so spacing between sections feels even |
| **Custom** | Any other value your store needs. See below. |
### Apply a variable to an element
Select an element. In the Inspector's **Design** tab, select the variable icon next to a Color, Space, or Border field, then choose a variable.
You can also pick color variables from the **Variables** tab in any color picker, for example when changing a section's background.
_nd9XTRTf.gif)
### Create a custom variable
1. In the **Variables** tab, expand **Custom**, then select **+**.
2. Enter a name and value, then select **Save**.
* **Number:** a value with a unit, like `24px`, `50%`, or `1.5em`.
* **String:** any text value.
## Text styles
Text styles are ready-made combinations of font, size, color, and spacing. Apply one to any text element in one click.
### Customize a text style
Select a style in the **Text** tab to edit it:
| Setting | What it controls |
| ------------------- | --------------------------------------------------- |
| **Style name** | The label shown in the text styles list |
| **Color** | Text color — can be linked to a Color variable |
| **Font family** | Typeface for this style |
| **Font size** | Size in px — can be linked to a Font size variable |
| **Line height** | Vertical spacing between lines in px |
| **Font weight** | Thickness of the text (Regular, Medium, Bold, etc.) |
| **Letter spacing** | Horizontal spacing between characters in px |
| **Text transform** | AA (uppercase), Aa (capitalize), aa (lowercase) |
| **Text decoration** | Underline, strikethrough, or none |
Click **Update** when done.
### Apply a text style
Select a text element, then select **Select style** in its toolbar and choose a style.
_3CtONyhj.gif)
## Button styles
Choose the button style that matches how important the action is:
| Style | When to use |
| ------------------ | --------------------------------------------------------------------------------------------- |
| **Primary button** | The most important action on the page, like "Shop now" or "Add to cart". Use one per section. |
| **Outline button** | A second action next to a primary button, like "Learn more". |
| **White button** | Buttons on dark backgrounds or images. |
| **Link button** | Low-priority actions, like "View all", shown as text only. |
### Customize a button style
Select a button style to edit it. Set the **Normal** and **Hover** states separately, including colors, background, and font. Make the hover state clearly different, so shoppers know the button is clickable.
### Apply a button style
Select a button element, then select **Select style** in its toolbar and choose a style.
_lPijD2En.gif)
You can edit Foxify's default text and button styles, but you can't delete them. Add your own custom styles alongside the defaults instead.
## FAQs
#### What's the difference between Variables and Text/Button styles?
Variables are raw reusable values — a color, a size, a spacing amount. Text and Button styles are ready-to-apply presets built on top of those variables (a text style's Color or Font size setting can link to a Color or Font size variable, for example).
#### If I update a Global style later, does it change pages that already use it?
Yes — any change to a Global style is applied automatically everywhere that style is used, across your store.
#### Where can I apply a custom variable?
Anywhere the Inspector panel's Design tab shows a variable icon next to a compatible field — typically Color, Space, and Border fields.
## Related articles
Add and edit elements
Editor tools
Add custom code to your page