# How to save and apply styles and style variables across your Bubble.io app: Step

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bubble's Styles system lets you create named Element Styles and Style Variables for fonts and colors that apply across your entire app. This tutorial covers creating styles, applying them to elements, updating globally, and using style variables for consistent spacing, typography, and color management throughout your Bubble application.

## Overview: Saving and Applying Styles in Bubble

Bubble's Styles tab provides a design system for your app — create named styles once and apply them to any element. When you update a style, every element using it updates automatically. This tutorial walks through creating Element Styles, setting up Style Variables for colors and fonts, applying styles to elements, and managing your style library. Essential for any builder who wants a consistent, professional-looking app that is easy to maintain.

## Before you start

- A Bubble account with an existing app
- Basic familiarity with Bubble's Design tab and element properties
- A clear idea of your app's color scheme and fonts
- Understanding of basic design properties (font size, colors, borders)

## Step-by-step guide

### 1. Navigate to the Styles tab and understand its sections

Click the Styles tab in the left sidebar of the Bubble editor. You will see three main sections: Element Styles (reusable collections of visual properties for specific element types), Style Variables (font and color variables that can be referenced across styles), and Color Variables (app-wide color definitions). Element Styles are organized by element type — Text styles, Button styles, Input styles, Group styles, etc. Each style stores all visual properties for that element type: font, size, color, background, borders, padding, shadows, and more.

**Expected result:** You understand the Styles tab layout and the difference between Element Styles, Style Variables, and Color Variables.

### 2. Create Color Variables for your app's palette

In the Styles tab, click on Style Variables, then focus on the Color Variables section. Click to add new color variables for your palette: Primary (#2563EB or your brand color), Primary Light (#DBEAFE), Text Dark (#111827), Text Muted (#6B7280), Background (#FFFFFF), Surface (#F9FAFB), Border (#E5E7EB), Success (#10B981), Warning (#F59E0B), and Danger (#EF4444). Name them clearly so anyone editing the app knows what each color is for. These variables can be referenced in any style or directly on elements.

> Pro tip: Limit your palette to 8-12 color variables maximum — more than that leads to inconsistency and confusion.

**Expected result:** A complete set of named color variables that serve as your app's design palette.

### 3. Create font Style Variables for typography

Still in Style Variables, create font variables for your typography system. Add variables for font families: Font Primary (like Inter or Poppins) and Font Secondary (like your heading font if different). Create size variables if needed, though you will primarily set sizes in Element Styles. Choose a maximum of two font families — one for headings and one for body text. If using a Google Font, make sure it is loaded in your app settings (Settings → SEO/Metatags → Header).

**Expected result:** Font variables defined that you can reference when creating Element Styles for text elements.

### 4. Create Element Styles for your common text levels

In the Element Styles section, click on Text to see existing text styles. Create new styles for each text level in your hierarchy: Heading XL (font: Primary, size: 36px, weight: bold, color: Text Dark), Heading LG (28px, semibold), Heading MD (22px, semibold), Body (16px, regular, Text Dark), Body Small (14px, regular, Text Muted), and Caption (12px, regular, Text Muted). For each style, set the font family from your Style Variables, size, weight, line height (1.5 for body, 1.2 for headings), and color from your Color Variables.

**Expected result:** A complete set of text Element Styles covering all heading levels, body text, and caption styles.

### 5. Create Element Styles for buttons, inputs, and groups

Create Button styles: Button Primary (background: Primary color, text: white, padding: 12px 24px, border-radius: 8px, font: 16px semibold), Button Secondary (background: transparent, border: 1px Primary, text: Primary, same padding and radius), Button Ghost (no background, no border, text: Primary). Create Input styles: Input Default (border: 1px Border color, border-radius: 8px, padding: 10px 16px, font: Body). Create Group styles: Card (background: white, border: 1px Border, border-radius: 12px, padding: 24px) and Section (padding: 48px 24px).

**Expected result:** Reusable styles for buttons, inputs, and groups that match your design system.

### 6. Apply styles to elements across your app

Go to the Design tab and select any Text element. In the Property Editor on the right, look for the Style dropdown at the top of the Appearance section. Click it and select one of your named styles (like Heading LG or Body). The element immediately inherits all the properties from that style. Repeat for all elements on the page. When you apply a style, you can still override individual properties on that specific element — overrides appear as blue highlighted values in the Property Editor. To remove an override and revert to the style's default, click the blue highlight.

> Pro tip: Right-click a styled element and select 'Detach style' to break the connection, or 'Reset style' to remove all overrides and match the style exactly.

**Expected result:** All elements on the page use named styles from your Styles tab, ensuring visual consistency.

### 7. Update styles globally to change your entire app

To see the power of styles, go back to the Styles tab and modify one of your styles — for example, change the Heading LG font size from 28px to 30px, or update the Primary color variable from blue to green. Every element in your app that uses that style or color variable updates immediately across all pages. This is why the Styles system is so powerful: you make one change in one place, and your entire app updates. Use this for rebrands, design tweaks, or A/B testing different visual treatments.

**Expected result:** A single style change in the Styles tab updates every element using that style across all pages simultaneously.

## Complete code example

File: `Workflow summary`

```text
STYLE SYSTEM SUMMARY
=====================

COLOR VARIABLES:
  Primary:       #2563EB
  Primary Light: #DBEAFE
  Text Dark:     #111827
  Text Muted:    #6B7280
  Background:    #FFFFFF
  Surface:       #F9FAFB
  Border:        #E5E7EB
  Success:       #10B981
  Warning:       #F59E0B
  Danger:        #EF4444

FONT VARIABLES:
  Font Primary:   Inter (or your chosen font)
  Font Secondary: Inter (or heading font)

TEXT ELEMENT STYLES:
  Heading XL:  36px / Bold / Text Dark / Line height 1.2
  Heading LG:  28px / Semibold / Text Dark / Line height 1.2
  Heading MD:  22px / Semibold / Text Dark / Line height 1.3
  Body:        16px / Regular / Text Dark / Line height 1.5
  Body Small:  14px / Regular / Text Muted / Line height 1.5
  Caption:     12px / Regular / Text Muted / Line height 1.4

BUTTON ELEMENT STYLES:
  Button Primary:
    Background: Primary | Text: White
    Padding: 12px 24px | Border-radius: 8px
    Font: 16px Semibold
    Hover: Primary darkened 10%

  Button Secondary:
    Background: Transparent | Border: 1px Primary
    Text: Primary | Same padding/radius
    Hover: Primary Light background

  Button Ghost:
    Background: Transparent | No border
    Text: Primary | Same padding
    Hover: Surface background

INPUT ELEMENT STYLES:
  Input Default:
    Border: 1px Border color | Border-radius: 8px
    Padding: 10px 16px | Font: 16px Regular
    Focus: Border Primary color
    Placeholder: Text Muted

GROUP ELEMENT STYLES:
  Card:
    Background: White | Border: 1px Border
    Border-radius: 12px | Padding: 24px

  Section:
    Padding: 48px 24px | No border | No background

APPLICATION PROCESS:
  1. Create Color Variables (palette)
  2. Create Font Variables (families)
  3. Create Element Styles (text, buttons, inputs, groups)
  4. Apply styles to all existing elements via Style dropdown
  5. Use styles for all new elements going forward
  6. Update globally via Styles tab when needed
```

## Common mistakes

- **Setting styles directly on elements instead of using the Styles tab** — Individual element styling creates inconsistency and makes global changes impossible — you have to update every element manually Fix: Always create a named style in the Styles tab first, then apply it to elements using the Style dropdown
- **Creating too many similar styles with minor variations** — Dozens of styles like 'Heading Large Blue', 'Heading Large Green', 'Heading Large Red' defeat the purpose of a style system Fix: Create one style per element type and use Color Variables or per-element overrides for variations
- **Not using Color Variables and hardcoding hex values in styles** — Hardcoded colors cannot be updated globally — if your brand color changes, you must edit every style individually Fix: Always reference Color Variables in your Element Styles so palette changes propagate automatically

## Best practices

- Create all Color Variables before creating any Element Styles
- Limit your color palette to 8-12 named variables
- Use a maximum of two font families across your entire app
- Create Element Styles for every common element type: text, buttons, inputs, groups
- Apply styles via the Style dropdown rather than setting properties individually on elements
- Use per-element overrides sparingly — prefer creating a new style if the variation is significant
- Name styles clearly with their purpose: Heading XL, Button Primary, Input Default, Card

## Frequently asked questions

### What is the difference between Element Styles and Style Variables?

Style Variables are individual values (like a color or font family) that can be referenced across multiple Element Styles. Element Styles are complete collections of visual properties for a specific element type. Think of Style Variables as ingredients and Element Styles as recipes.

### Can I override a style on a specific element?

Yes. After applying a style, you can change individual properties on that element. Overrides appear as blue highlights in the Property Editor. Click the blue highlight to revert the override and match the style.

### Will updating a style change elements that have overrides?

Only the non-overridden properties update. If you override the font size on a specific element, changing the style's font size will not affect that element. Other elements using the style without overrides will update.

### How many styles should I create?

Create the minimum needed for consistency. A typical app needs 5-7 text styles, 2-3 button styles, 1-2 input styles, and 2-3 group styles. That is roughly 12-15 Element Styles total.

### Can I export my styles to use in another Bubble app?

Not directly. However, you can duplicate your app (which copies all styles) or use Bubble templates that include your style system. There is no standalone style export feature.

### Can RapidDev help set up a design system for my Bubble app?

Yes. RapidDev can create a complete design system including Color Variables, typography hierarchy, Element Styles for all component types, and apply them consistently across all pages of your Bubble app.

### Do styles affect app performance?

No. Styles are applied at build time and have no runtime performance impact. Using styles consistently actually improves performance slightly because the browser can cache and reuse shared CSS properties.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/save-apply-styles-style-variables-bubble-app
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/save-apply-styles-style-variables-bubble-app