When working with Breakdance Elements inside Oxygen, there are two different color systems available. Understanding the difference is important to avoid confusion and inconsistent styling.

This is not a bug or limitation — it’s simply how the two systems are designed.

The two color systems

1. Oxygen Variables (recommended)

Oxygen includes a native system for managing colors using Variables:
https://oxygenbuilder.com/documentation/design/variables/

Color variables:

• Work across the entire site
• Can be used in classes
• Integrate with Oxygen’s design system
• Support overrides and dynamic values

This is the standard and recommended way to manage colors in Oxygen.

2. Breakdance Global Colors (added by the Breakdance Elements extension)

When the Breakdance Elements for Oxygen extension is active, an additional color system appears under: Three dots menu (in the top right of the builder) → Global Settings → Colors

These colors:

• Are only available inside Breakdance Elements
• Cannot be used in Oxygen classes
• Do not integrate with Oxygen Variables

Key limitation

Breakdance Global Colors and Oxygen Variables are separate systems.

This means:

• Colors created in Breakdance Global Settings cannot be used in classes
• They are limited to Breakdance Elements only
• They do not act as a global design system across Oxygen

Recommended approach

To maintain a consistent and scalable design system:

• Define all colors using Oxygen Variables
• Use those variables across your site (classes, elements, layouts)
• Avoid relying on Breakdance Global Colors for core styling

This ensures your colors are:

• Reusable
• Consistent
• Compatible with Oxygen’s class-based workflow

Using Oxygen Variables in Breakdance Elements

If you need to use your Oxygen color variables inside Breakdance Elements, you can reference them using standard CSS variable syntax:

var(--primary)

This allows you to keep a single source of truth for your colors while still styling Breakdance Elements correctly.

Summary

Oxygen and Breakdance Elements use two separate systems for managing colors, and they do not interact with each other.

Oxygen Variables are designed to work across the entire site and integrate fully with classes, making them the correct choice for building a consistent design system. In contrast, colors defined in Breakdance Global Settings are limited to Breakdance Elements and cannot be reused in classes or across Oxygen more broadly.

For this reason, it is recommended to define and manage all colors using Oxygen Variables, and reference those variables wherever needed, including within Breakdance Elements. This ensures consistency, avoids duplication, and aligns with Oxygen’s class-based workflow.