> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/variables-and-styles.md). # Variables and styles ## 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.
Data dashboard using styles for light mode and dark mode

Using variables and styles you can quickly change the entire look and feel of your app.

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. ### Why variables and styles matter 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.
Three differently styled button elements.

Using styles, you can create very different designs and apply them to elements across your app quickly.

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. ## What's in this section The *Variables and styles* section covers four related tools: ### Color variables 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](/help-guides/design/variables-and-styles/color-variables.md) ### Font 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](/help-guides/design/variables-and-styles/font-variables.md) ### Styles 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](/help-guides/design/variables-and-styles/styles.md) ### Custom fonts 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](/help-guides/design/variables-and-styles/using-custom-fonts.md) ## How they fit together 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: * **Custom fonts** load your brand's typography into the app. * **Font variables** define named text styles like *Heading 1*, *Body*, and *Caption*, each based on your custom fonts. * **Color variables** define your brand palette, background colors, and text colors. * **Styles** combine these variables with other properties, such as padding, borders, and hover states, to define reusable component styles like *Primary button* or *Card*. 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.