Breakdance organizes its design system around a central Settings panel where colors, typography, and spacing are defined globally. The colors you set here propagate to every element and component, making the initial palette setup the single most impactful configuration step.
Breakdance's Color Architecture
In Breakdance, navigate to Settings, then Design System, then Colors. Each color gets an ID, a label, and a value. Breakdance generates CSS variables automatically from these definitions using the --bde-global- prefix. Every element in the builder can reference these global colors.
The system supports unlimited colors, but a focused palette of 6 to 10 colors performs best. Too many colors create decision fatigue when building pages.
Exporting from PaletteRx
Select Breakdance from the WP Page Builders section in PaletteRx's export step. The output includes three formats: a hex reference card with role labels, CSS variables using the --bde-global- prefix that Breakdance expects, and a JSON structure you can use for settings import.
The role-based labels (Primary, Secondary 1, Secondary 2, Light Base, Dark Base) translate directly to Breakdance's label field, giving you semantically named presets instead of generic Color 1, Color 2 labels.
Manual Setup vs. CSS Import
For the visual approach, open Breakdance Settings, go to Design System and Colors, and add each color manually using the hex values from PaletteRx. Name each one according to its role.
For the code approach, paste the CSS variables block into your site's global stylesheet or Breakdance's custom CSS panel. The --bde-global- prefix ensures Breakdance recognizes the variables as part of its global system.
Maintaining Consistency
When you need to update your palette, rebuild it in PaletteRx, re-export for Breakdance, and update the values in your Design System panel. The global nature of Breakdance's color system means the change cascades everywhere automatically.