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 for use in your projects
• Integrate with Breakdance using the Chrome Extension

Key Features

Accessible Colors

12-step color scales with automatic dark mode support and WCAG-compliant contrast ratios

Fluid Typography

Responsive type scales that adapt smoothly across all viewport sizes using clamp()

Spacing System

Component and section spacing with viewport-based fluid values

Theme Configuration

Page layout settings with responsive breakpoints for tablet and mobile

CSS Export

Generate production-ready CSS custom properties for any project

Chrome Extension

Direct integration with Breakdance Page Builder for seamless workflow

Quick Start

From zero to design system in 3 steps

1. Create a project - Sign up and initialize your first design system
2. Configure tokens - Set up colors, typography, and spacing
3. 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 */
  --hcl-text-h1: clamp(2rem, 1.5vw + 1.5rem, 3.2rem);
  --hcl-text-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);

  /* Responsive Spacing */
  --hcl-space-comp-md: clamp(1rem, 2vw, 1.5rem);
  --hcl-space-sec-lg: clamp(3rem, 5vw, 6rem);
}

Quick Navigation

Getting Started

Learn how to create an account and start your first project

Color System

Explore brand colors, neutrals, and custom color schemas

Typography

Configure fluid, responsive typography systems

Spacing

Set up component and section spacing scales

Theme Settings

Configure page layout and responsive breakpoints

Export & Integration

Export CSS and integrate with Breakdance

Ready to get started?

Head over to the Getting Started guide to create your account and set up your first project.