> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/foxify-app/page-management/global-styles.md). # Global styles {% embed url="" %} ## What is Global styles? Global styles is a system of reusable design variables and presets. Instead of styling each element individually, you set your brand's colors, font sizes, and button styles in one place — then apply them across your store with a single click. Any change you make to Global styles is automatically applied everywhere that style is used, keeping your store visually consistent without manual rework.

### What's inside The Global styles panel has three tabs:


Variables	Reusable values — colors, font sizes, borders, spacing, and custom variables.	/pages/yYRPgVEGWZAOwyYKbUHB#variables
Text	Predefined text styles — Mega title, headings, body text, captions, and more.	/pages/yYRPgVEGWZAOwyYKbUHB#text-styles
Buttons	Predefined button styles — Primary, Outline, White, and Link.	/pages/yYRPgVEGWZAOwyYKbUHB#button-styles

## How to open Global styles {% stepper %} {% step %} Open any page in FoxStudio. {% endstep %} {% step %} Click the **paintbrush icon** (

) in the left sidebar {% endstep %} {% step %} The Global styles panel opens with Variables, Text, and Buttons tabs. {% endstep %} {% endstepper %}

### **Variables** Variables are reusable values you define once and apply across your pages. The Variables tab has 5 categories, each with default presets you can edit or extend.

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	Reusable size variables used across text elements
Border	Border width and radius presets for consistent edge styling
Space	Spacing variables for padding and gap — keeps layout rhythm consistent
Custom	Any additional variables your store needs beyond the defaults. Learn more

#### Custom variables Custom variables let you define your own reusable values for design properties that don't fit the default categories. To add a custom variable: {% stepper %} {% step %} **Create** In the **Variables** tab, expand **Custom** → click **+** → **fill name and value > Save.** * Name: How you'll reference the variable. Becomes a CSS variable automatically. * Value type: * **Number** — a numeric value with a unit (px, %, em, etc.) * **String** — any text value {% endstep %} {% step %} **Apply** In the Inspector panel's Design tab, click the variable icon next to any compatible field → search for your custom variable → select it. {% endstep %} {% endstepper %} #### **How to apply a variable** In the Inspector panel's **Design** tab, click the variable icon next to any Color, Space, or Border field to select from your saved variables.

### Text styles Text styles are predefined typographic presets you can apply to any text element with one click. #### Customize a text style Click any style to open its settings panel. Each text style lets you configure:

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. {% hint style="info" %} You can edit Foxify's default text styles but cannot delete them. You can add your own custom styles in addition to the defaults. {% endhint %} #### Apply a text style In the page editor, select a text element → click **Select style** in the toolbar to choose a predefined text style.

### Button styles Foxify includes 4 default button presets: * Primary button : Your main CTA. Solid fill. Used for the most important action on a page. * Outline button: Transparent background with border. Used for secondary actions alongside a primary button. * White button: White fill. Good for use over dark or image backgrounds. * Link button: Text only, no border or fill. Used for low-emphasis actions. Similar to **Variables** and **Text**, you can add and customize your new button styles for later use. #### Customize a button style Click on any button style to open its settings. Each button has two states — **Normal** and **Hover** — and you can configure: Color, Background color, Font family, Font size, Font weight, and more.

{% hint style="info" %} You can edit Foxify's default button styles but cannot delete them. You can add your own custom button styles in addition to the defaults. {% endhint %} #### Apply a button style In the page editor, select a button element → click **Select style** in the toolbar to apply a preset.

***