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

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.

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.

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).

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.

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).

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.

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.