Export & Integration

Export CSS and integrate your design system with Breakdance

Export Options

BreakColorUI provides two primary ways to export and use your design system: CSS export for manual integration and Chrome Extension sync for seamless Breakdance integration.

Copy CSS Variables

Copy all CSS custom properties to clipboard for quick manual integration

Download CSS File

Download a complete CSS file with all your design tokens ready to link

Chrome Extension Sync

Sync directly to Chrome Extension for instant Breakdance integration

Complete design system export

Every export includes all categories: colors (brand, neutral, custom), typography (10 fluid steps), spacing (component + section), and theme (layout + border radius). Plus automatic light/dark mode CSS generation!

CSS Export Methods

Export your design tokens as CSS custom properties ready to use in any project:

Copy to Clipboard

Quick copy all CSS variables to clipboard - perfect for pasting into existing stylesheets

Download CSS File

Get a complete design-tokens.css file ready to link or import into any project

Copy CSS Workflow

1. Navigate to Export Tab - Open your project's Export section
2. Review generated CSS - CSS is organized by category (colors, typography, spacing, theme)
3. Click "Copy CSS" - Copies all CSS variables to clipboard
4. Paste in your project - Add to your :root selector or main CSS file

Download CSS Workflow

1. Click "Download CSS" - In Export tab
2. File saved - Downloads as design-tokens.css
3. Link or import - Add to your HTML or import in your build process

What Gets Exported

Here's what your exported CSS looks like - all your design tokens organized and ready to use:

Exported CSS Structurecss

:root {
  /* === COLORS === */
  /* Brand Colors (12 steps, light mode) */
  --hcl-brand-1: oklch(98% 0.02 220);
  --hcl-brand-9: oklch(60% 0.25 220);
  --hcl-brand-12: oklch(20% 0.10 220);

  /* Neutral Colors (12 steps, light mode) */
  --hcl-neutral-1: oklch(99% 0.00 0);
  --hcl-neutral-12: oklch(15% 0.00 0);

  /* Custom Schemas (if configured) */
  --hcl-success-1: oklch(98% 0.02 140);
  --hcl-error-1: oklch(98% 0.02 20);

  /* === TYPOGRAPHY === */
  --hcl-text-h0: clamp(3.2rem, 3vw + 2rem, 5.6rem);
  --hcl-text-h1: clamp(2.4rem, 2vw + 1.5rem, 4rem);
  --hcl-text-body-m: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);

  /* === SPACING === */
  --hcl-space-comp-m: clamp(1rem, 1vw, 1.5rem);
  --hcl-space-sec-l: clamp(3rem, 4vw, 6rem);

  /* === THEME === */
  --hcl-page-width: 1440px;
  --hcl-offset-min: 32px;
  --hcl-column-gap: 24px;
  --hcl-r1: 4px;
  --hcl-r2: 8px;
  --hcl-rpill: 9999px;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --hcl-brand-1: oklch(15% 0.02 220);
    --hcl-brand-12: oklch(98% 0.10 220);
    /* Colors automatically invert for dark mode */
  }
}

/* Responsive breakpoints (if configured) */
@media (max-width: 1024px) {
  :root {
    --hcl-offset-min: 24px;
    --hcl-column-gap: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --hcl-offset-min: 16px;
    --hcl-column-gap: 16px;
  }
}

Chrome Extension Integration

For Breakdance users, the Chrome Extension provides instant, click-to-apply color integration:

Send to Chrome Extension

1. Install Extension - Get BreakColorUI Chrome Extension (see Extension Guide)
2. Click "Send to Extension" - In Export tab, sync your design system
3. Use in Breakdance - Click any color input to see your color palette
4. Apply instantly - One click applies colors without copy/paste

Extension benefits

• Visual color picker - See all your colors organized by category
• One-click apply - No typing var() or copying hex codes
• HEX or CSS var mode - Toggle between raw hex and CSS variable output
• Always in sync - Re-sync anytime you update your design system

Breakdance Global CSS Setup

To use CSS variables throughout Breakdance, add them to Global CSS:

WordPress / Breakdance Setup

1. Export CSS - In BreakColorUI Export tab, click "Copy CSS"
2. Open Breakdance Settings - In WordPress admin: Breakdance → Settings
3. Navigate to Global CSS - Find the Global CSS section
4. Paste CSS - Paste your CSS variables in the Global CSS textarea
5. Save Settings - Click "Save" to apply globally
6. Use in builder - Type var(--hcl-brand-9) in any field

Example: Breakdance Global CSScss

/* Paste in Breakdance → Settings → Global CSS */
:root {
  --hcl-brand-9: oklch(60% 0.25 220);
  --hcl-neutral-12: oklch(15% 0.00 0);
  --hcl-text-h1: clamp(2.4rem, 2vw + 1.5rem, 4rem);
  --hcl-space-sec-xl: clamp(4rem, 5vw, 8rem);
  --hcl-r2: 8px;
  /* ... rest of your tokens */
}

Using in Breakdance Buildertext

/* In any color field: */
var(--hcl-brand-9)

/* In any size/spacing field: */
var(--hcl-space-sec-xl)
var(--hcl-text-h1)

/* In border-radius field: */
var(--hcl-r2)

Best Practices

Follow these guidelines for smooth integration and maintenance:

Keep Variables in :root

Always place CSS custom properties in :root selector for global accessibility

Re-export After Changes

Update your exported CSS whenever you modify your design system

Save Projects in Dashboard

Your design system is automatically saved in BreakColorUI - access it anytime from any device

Document Your System

Add CSS comments explaining token usage and conventions

Keep design system in sync

Remember: Changes in BreakColorUI don't automatically update your projects. After modifying colors, typography, spacing, or theme - re-export and update your CSS in Breakdance Global CSS or your project's stylesheet.

Integration Tips

Maximize the value of your design system with these practical tips:

Use meaningful variable names

CSS variables like var(--hcl-brand-9) are self-documenting. The naming tells you: it's a brand color, step 9 (solid action color). This makes your code readable without documentation.

Combine tokens for consistency

Mix different token types for cohesive designs. Example: border-radius: var(--hcl-r2); padding: var(--hcl-space-comp-l); color: var(--hcl-brand-9); creates components that feel part of the same system.

Test in both themes

If using light/dark modes, always test in both. Your exported CSS includes @media (prefers-color-scheme: dark) - verify colors have proper contrast in both themes.

Next Steps

Ready to supercharge your Breakdance workflow?

Install Chrome Extension

For Breakdance users, the Chrome Extension eliminates copy/paste entirely. Learn how to install and use the Chrome Extension for one-click color application in Breakdance builder.