Color Palette System

The BreakMade Color Palette System provides a comprehensive, structured approach to managing colors in your Breakdance projects. It automatically generates CSS variables, shade variations, and alpha values for complete design flexibility.

Overview

The color system includes:

• 5 Main Colors: Primary, Secondary, Tertiary, Accent, and Neutral
• 11 Shade Variations: Per color for different use cases
• Alpha Variations: 10% to 90% opacity for each color
• Automatic CSS Variables: Generated and exported for use anywhere
• Breakdance Sync: Optional automatic synchronization with Breakdance global colors

Color Structure

Main Colors

Each main color serves a specific purpose in your design:

Shade Variations

Each color includes 11 shades optimized for specific use cases:

CSS Variables

Color Variables

BreakMade generates CSS variables for every color and shade:

/* Primary color shades */
--primary-base: #6366f1;
--primary-bg: #eef2ff;
--primary-dark: #4338ca;
--primary-surface: #e0e7ff;
--primary-heading: #312e81;
--primary-subtle: #c7d2fe;
--primary-active: #4f46e5;
--primary-border: #a5b4fc;
--primary-text: #4338ca;
--primary-muted: #6366f1;
--primary-hover: #4f46e5;

RGB Variables

For each color, RGB values are also generated for use with rgba():

--primary-base-rgb: 99, 102, 241;
--secondary-base-rgb: 16, 185, 129;

/* Usage in your CSS */
background: rgba(var(--primary-base-rgb), 0.5);

Alpha Variations

10% to 90% opacity variations are automatically generated:

--primary-base-10: rgba(99, 102, 241, 0.1);
--primary-base-20: rgba(99, 102, 241, 0.2);
--primary-base-30: rgba(99, 102, 241, 0.3);
/* ... through 90 */

Using Colors in Breakdance

Global Colors

When synchronized, BreakMade colors appear in Breakdance’s color picker under Global Colors:

1. Open any element’s color setting
2. Click the color picker
3. Look for the “Global Colors” section
4. Select your BreakMade color

CSS Variables in Custom CSS

Use variables directly in Breakdance’s custom CSS:

.my-element {
  background-color: var(--primary-surface);
  color: var(--primary-heading);
  border: 1px solid var(--primary-border);
}

.my-element:hover {
  background-color: var(--primary-active);
}

In Spacing/Size Fields

Some Breakdance fields accept CSS variables:

var(--primary-base)

Customizing Colors

Using the Color Picker

1. Navigate to BreakMade in your WordPress admin
2. Find the color you want to change
3. Click the color swatch to open the picker
4. Select your new color or enter a hex value
5. Click Save Palette

Bulk Updates

When you save the palette:

• All shade variations are automatically recalculated
• Alpha variations are regenerated
• CSS file is updated
• Breakdance colors sync (if enabled)

Alt-Shade System

The alt-shade system provides automatic color inversion for contrast sections.

How It Works

Add the .alt-shade class to any element:

<section class="alt-shade">
  <!-- Child elements automatically use inverted colors -->
</section>

Use Cases

• Dark sections on light pages
• Light sections on dark pages
• Alternating content blocks
• Card highlights

Nested Alt-Shades

Double nesting returns to original colors:

<section class="alt-shade">
  <!-- Inverted colors -->
  <div class="alt-shade">
    <!-- Back to original colors -->
  </div>
</section>

Sync Settings

Enabling Sync

By default, BreakMade syncs colors to Breakdance. This means:

• Color changes immediately appear in Breakdance
• Global colors stay consistent
• No manual updates needed

Disabling Sync

To manage colors independently:

1. Go to BreakMade settings
2. Enable Do Not Sync Colors
3. BreakMade and Breakdance colors are now independent

When to Disable Sync

• Working on an existing site with established colors
• Testing color schemes without affecting live site
• Team members using different color setups

Generated CSS File

BreakMade generates a CSS file at:

/wp-content/uploads/breakmade/breakmade-variables.css

This file contains all color variables and is automatically enqueued on your site.

Regenerating the File

The file regenerates when you:

• Save the color palette
• Install the default palette
• Change HeadSpinUI integration settings

Best Practices

Consistent Color Usage

• Use base for primary actions
• Use surface for card/panel backgrounds
• Use text and muted for typography
• Use border for all borders
• Use hover for interactive states

Accessibility

The shade system is designed with contrast in mind:

• heading on bg provides high contrast
• text on surface is readable
• muted should only be used for non-essential text

Performance

• Colors are served from a single CSS file
• Variables are calculated once, used everywhere
• No JavaScript required for color application

Troubleshooting

Colors Not Appearing

1. Ensure BreakMade is activated
2. Check that CSS output is enabled in settings
3. Clear any caching plugins
4. Refresh the Breakdance editor

Sync Not Working

1. Verify Do Not Sync Colors is disabled
2. Save the palette again
3. Check for JavaScript errors in console
4. Ensure Breakdance is active

Wrong Shades

If shades don’t look right:

1. Re-save the palette to regenerate shades
2. Check your base color isn’t too light/dark
3. Inspect the generated CSS file

Related

• CSS Variables Reference - Complete variable list
• Fluid Spacing - Spacing system
• HeadSpinUI Integration - Using colors with HeadSpin