Export & Integration

Export CSS and integrate your design system with Breakdance

Enhanced v2 - Next Generation Color Export

Enhanced v2 is an advanced color export mode that automatically applies modern color formats, transparency variants, and semantic tokens to your exported CSS. When you export colors through the modal, all enhancements are applied automatically—no extra configuration needed.

What is Enhanced v2?

Enhanced v2 provides 3-layer progressive enhancement for your color variables:

  • ✓ Layer 1 (HEX): Universal fallback - works in 100% of browsers
  • ✓ Layer 2 (OKLCH): Modern browsers (95%) get perceptually uniform colors
  • ✓ Layer 3 (Display P3): P3-capable devices (50%) get 25% more vibrant colors

Automatically applied: Each device uses the best quality it can support. Legacy browsers just use HEX, while modern Apple devices get stunning wide-gamut colors.

Transparency Variants

Automatic alpha channel variants (a1-a12) for overlays, modals, and hover states

Semantic Tokens

Pre-calculated contrast, surface, indicator, and track tokens ready to use

Progressive Enhancement

HEX + OKLCH + P3 - 100% compatible with automatic quality improvement

Standard vs Enhanced v2

Choose the export mode that fits your needs:

Standard Modetext
✓ HEX color format only ✓ 51 variables per 3-color system ✓ 100% browser compatibility ✓ Lightweight CSS ✓ No transparency variants
Enhanced v2 Modetext
✓ HEX + OKLCH + Display P3 (3-layer) ✓ 86+ variables per 3-color system ✓ 100% compatible (HEX fallback) ✓ Larger file size (+15%) ✓ Automatic alpha variants ✓ Semantic tokens included ✓ 25% more vibrant on P3 devices

When to use Enhanced v2

  • • You want maximum visual quality on modern devices
  • • You're targeting Apple devices (iPhones, MacBooks, iPads)
  • • You need transparency variants for UI patterns
  • • You want semantic tokens pre-generated
  • • You don't care about a ~15% file size increase

Enhanced v2 Features Deep Dive

Here's what makes Enhanced v2 powerful:

3-Layer Progressive Enhancement

How it works:

  1. 1. Browser loads HEX fallback (works everywhere)
  2. 2. Modern browsers override with OKLCH (better color perception)
  3. 3. P3-capable devices further enhance with Display P3 (@media color-gamut: p3)

Result: Same CSS file, each device sees the best it can handle. No JavaScript needed.

Example: Enhanced v2 CSS Structurecss
/* Layer 1: HEX Fallback (100% browsers) */ :root { --hcl-brand-1: #fbfdff; --hcl-brand-9: #0090ff; } /* Layer 2: OKLCH Modern Override (95% browsers) */ @supports (color: oklch(50% 0.2 0)) { :root { --hcl-brand-1: oklch(98.7% 0.004 274); --hcl-brand-9: oklch(65.4% 0.182 30.39); } } /* Layer 3: Display P3 Wide Gamut (P3 devices) */ @media (color-gamut: p3) { :root { --hcl-brand-1: color(display-p3 0.984 0.992 1); --hcl-brand-9: color(display-p3 0.875 0.565 1); } }

Automatic Transparency Variants

Enhanced v2 generates alpha variants for every color step (a1-a12):

  • • --hcl-brand-a1 - Very subtle (1.2% opacity) for delicate backgrounds
  • • --hcl-brand-a6 - Mid transparency for hover effects
  • • --hcl-brand-a12 - Strong transparency for shadow overlays

Use cases: Modal overlays, tooltip backgrounds, focus rings, shadow colors, hover states.

Using Transparency Variantscss
/* Subtle border */ border: 1px solid var(--hcl-brand-a3); /* Overlay background */ background: var(--hcl-brand-a9); /* Hover state with transparency */ .button:hover { background: var(--hcl-brand-a6); } /* Shadow with semantic token */ box-shadow: 0 4px 12px var(--hcl-brand-a12);

Pre-Calculated Semantic Tokens

Enhanced v2 automatically generates semantic tokens for common UI patterns:

  • • --hcl-brand-contrast - Text color with optimal contrast over brand
  • • --hcl-brand-surface - Subtle background with transparency
  • • --hcl-brand-indicator - For badges, dots, status indicators
  • • --hcl-brand-track - For sliders, progress bars, rails

Benefit: Use these ready-made tokens instead of calculating your own.

Using Semantic Tokenscss
/* Button with automatic contrast */ .button { background: var(--hcl-brand-9); color: var(--hcl-brand-contrast); /* Automatically optimal contrast */ } /* Card surface */ .card { background: var(--hcl-brand-surface); /* Subtle background */ } /* Status badge */ .badge { background: var(--hcl-brand-indicator); } /* Progress bar */ .progress { --bar-color: var(--hcl-brand-track); }

Using Enhanced v2 in Export Tab

Enabling Enhanced v2 is simple - just select it and export as usual:

How to enable Enhanced v2

  1. 1. Open Export Tab - Navigate to your project's Export section
  2. 2. Select Enhanced v2 Mode - Choose the radio button labeled "Enhanced v2"
  3. 3. Review the CSS Preview - See all 3 color layers in the preview
  4. 4. Copy or Download - Click "Copy CSS" or "Download CSS" as usual
  5. 5. Use Variables Normally - Use CSS variables exactly as before (e.g., var(--hcl-brand-9))

What gets enhanced automatically

When you export with Enhanced v2:

  • ✓ Your CSS file includes all 3 color layers (HEX, OKLCH, P3)
  • ✓ Transparency variants generated (a1-a12) for all colors
  • ✓ Semantic tokens pre-calculated (contrast, surface, indicator, track)
  • ✓ Browser/device automatically picks the best layer
  • ✓ Settings saved for your project

You don't change anything: You use the same CSS variables. The enhancement is transparent—the CSS handles it automatically.

Chrome Extension with Enhanced v2

When you sync Enhanced v2 colors to the Chrome Extension, it works exactly the same way:

  • • Extension copies the CSS variable (e.g., var(--hcl-brand-9))
  • • User pastes it in Breakdance normally
  • • The 3-layer CSS (HEX, OKLCH, P3) is already in the exported CSS file
  • • Each device automatically uses the best quality it can support

The enhancement is transparent: You use CSS variables the same way. The browser/device handles picking the best color format automatically.

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

Download CSS Workflow

  1. 1. Click "Download CSS" - In Export tab
  2. 2. File saved - Downloads as design-tokens.css
  3. 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
/** * BreakColorUI Design System * Light Mode Variables */ html:root, [data-hsx*="light"] { /* Brand Colors (12 steps) */ --hcl-brand-1: #fbfdff; --hcl-brand-2: #f4faff; --hcl-brand-9: #0090ff; --hcl-brand-12: #113264; /* Neutral Colors (12 steps) */ --hcl-neutral-1: #fcfcfc; --hcl-neutral-11: #646464; --hcl-neutral-12: #202020; /* Breakdance Global Mappings */ --bde-headings-color: var(--hcl-neutral-12); --bde-body-text-color: var(--hcl-neutral-11); --bde-brand-primary-color: var(--hcl-brand-9); } /** * Dark Mode Variables */ :root:root[data-hsx*="dark"], [data-hsx*="dark"], [data-hsx*="invert"] { /* Brand Colors (inverted) */ --hcl-brand-1: #0d1520; --hcl-brand-9: #0090ff; --hcl-brand-12: #c2e6ff; /* Neutral Colors (inverted) */ --hcl-neutral-1: #111111; --hcl-neutral-11: #b4b4b4; --hcl-neutral-12: #eeeeee; /* Breakdance mappings (same vars, auto-adapt) */ --bde-headings-color: var(--hcl-neutral-12); --bde-body-text-color: var(--hcl-neutral-11); } /** * Typography System (Fluid) */ html:root { --hfs-h1: clamp(2.441rem, 1.842rem + 2.003vw, 3.552rem); --hfs-h2: clamp(1.953rem, 1.569rem + 1.284vw, 2.665rem); --hfs-text-m: clamp(1rem, 0.932rem + 0.225vw, 1.125rem); /* Breakdance mappings */ --bde-h1-font-size: var(--hfs-h1); --bde-body-font-size: var(--hfs-text-m); } /** * Spacing System */ html:root { /* Component Spacing */ --hsp-m: clamp(1.5rem, 1.23rem + 0.902vw, 2rem); --hsp-l: clamp(1.999rem, 1.64rem + 1.202vw, 2.666rem); /* Section Spacing */ --hss-m: clamp(4.125rem, 3.382rem + 2.48vw, 5.5rem); --hss-l: clamp(5.499rem, 4.509rem + 3.306vw, 7.332rem); } /** * Theme/Layout System */ html:root { --page-width: 1366px; --min-offset: 20px; --page-gap: 20px; /* Border Radius */ --hrd-s: 6px; --hrd-m: 8px; --hrd-pill: 500px; /* Breakdance Section Mappings */ --bde-section-width: 1406px; --bde-section-horizontal-padding: 20px; --bde-column-gap: 20px; }

Chrome Extension Integration

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

Send to Chrome Extension

  1. 1. Install Extension - Download BreakColorUI Connector (see Extension Guide)
  2. 2. Click "Send to Extension" - In Export tab, sync your design system
  3. 3. Use in Breakdance - Click any color input to see your color palette
  4. 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. 1. Export CSS - In BreakColorUI Export tab, click "Copy CSS"
  2. 2. Open Breakdance Settings - In WordPress admin: Breakdance → Settings
  3. 3. Navigate to Global CSS - Find the Global CSS section
  4. 4. Paste CSS - Paste your CSS variables in the Global CSS textarea
  5. 5. Save Settings - Click "Save" to apply globally
  6. 6. Use in builder - Type var(--hcl-brand-9) in any field
Example: Breakdance Global CSScss
/* Paste in Breakdance → Settings → Global CSS */ html:root, [data-hsx*="light"] { --hcl-brand-9: #0090ff; --hcl-neutral-12: #202020; --bde-brand-primary-color: var(--hcl-brand-9); } :root:root[data-hsx*="dark"], [data-hsx*="dark"] { --hcl-brand-9: #0090ff; --hcl-neutral-12: #eeeeee; } html:root { --hfs-h1: clamp(2.441rem, 1.842rem + 2.003vw, 3.552rem); --hss-xl: clamp(7.33rem, 6.01rem + 4.407vw, 9.773rem); --hrd-m: 8px; --bde-h1-font-size: var(--hfs-h1); }
Using in Breakdance Buildertext
/* In any color field: */ var(--hcl-brand-9) var(--bde-brand-primary-color) /* In any size/spacing field: */ var(--hss-xl) var(--hfs-h1) /* In border-radius field: */ var(--hrd-m)

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. Download BreakColorUI Connector or learn how to install and use the Chrome Extension for one-click color application in Breakdance builder.

Export & Integration - CSS Variables for Breakdance & WordPress