Variables and styles

Variables and styles are the tools you use to keep your app’s design consistent, flexible, and easy to update. Instead of styling every element individually, you define colors, fonts, and shared visual properties once, then reference them wherever they’re needed.

This approach saves time as you build, and makes it much easier to update your app’s look and feel later. Changing a color or font in one place updates everywhere it’s used, so you can iterate on your design without hunting down every element that needs to change.

Design consistency is one of the hardest things to maintain in a growing app. Without a shared system, small differences pile up: two shades of blue that should have been the same, three slightly different heading fonts, buttons that don’t quite match each other.

Variables and styles solve this by giving you a single place to experiment with and save design decisions. Every element that uses a variable or style reflects the current definition, so your app stays consistent as it grows.

They also make design changes much less painful. Want to switch to a new brand color? Update the color variable. Want to change your body font? Update the font variable. The change flows through your entire app automatically.

The Variables and styles section covers four related tools:

Color variables let you save named colors and reuse them across your app. Common examples include brand colors, background colors, text colors, and status colors like success and error. When you update a color variable, every element that uses it updates too.

Article:Color variables

Font variables let you save named fonts and reuse them across your app. Each variable holds a font family, weight, and style, so you can reference Body, Heading, or Caption directly instead of configuring the same font settings on every element.

Article:Font variables

Styles bundle multiple visual properties together into a reusable definition. Instead of setting each property separately, you can apply a style like Primary button or Body text to instantly configure the element with the right combination of properties. Changing the style updates every element that uses it.

Article:Styles

Custom fonts let you upload your own font files to use in your app. This is useful when your app needs a specific font that isn’t included in Bubble’s built-in library, such as a custom brand font or a font licensed from a foundry.

Article:Custom fonts

Variables and styles work best as a system. Color and font variables are the foundation. Styles combine those variables with other visual properties into named, reusable definitions. Custom fonts extend what’s available to use in the first place.

A typical setup might look like this:

When you build with this system, adjusting your app’s design becomes a matter of updating a handful of definitions instead of touching every element on every page.