BreakColorUI Documentation
A comprehensive design system for Breakdance Page Builder
BreakColorUI is a powerful design system manager that allows you to create, manage, and export complete design tokens for use with Breakdance Page Builder. It generates accessible color palettes, fluid typography scales, responsive spacing systems, and theme configurations.
What you'll learn
- How to create an account and set up your first project
- Configure brand colors, typography, spacing, and theme settings
- Export CSS custom properties and paste them into Breakdance
- Apply tokens inside the builder via the Chrome Extension or WordPress plugin
- Copy ready-made blocks from the Blocks library straight into your canvas
Key Features
Quick Start
From zero to design system in 3 steps
- Create a project — Sign up and initialize your first design system
- Configure tokens — Set up colors, typography, and spacing
- Export CSS — Copy variables and use them in your stylesheets
Example Outputcss
:root {
/* Brand Colors */
--hcl-brand-1: oklch(98% 0.02 220);
--hcl-brand-9: oklch(60% 0.25 220);
--hcl-brand-12: oklch(20% 0.10 220);
/* Fluid Typography */
--hfs-h1: clamp(2rem, 1.5vw + 1.5rem, 3.2rem);
--hfs-text-m: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
/* Responsive Spacing */
--hsp-m: clamp(1rem, 2vw, 1.5rem);
--hss-l: clamp(3rem, 5vw, 6rem);
}Quick Navigation
Ready to get started?
Head over to the Getting Started guide to create your account and set up your first project.