BreakcolorUI
Design tokens for WordPress builders

The design system
layer for page builders.

Generate cohesive color palettes, fluid typography, and spacing scales — exported as CSS variables and synced directly to Breakdance and Oxygen 6.

Start buildingWatch demo
brand.system
12 steps
Brand
Neutral
--hcl-brand-7--hcl-text-h1--hcl-space-comp-md--hcl-r2
User 1
User 2
User 3
User 4
User 5

Trusted by 500+ professionals

Compatible with

Headspin UI

Headspin UI

Generate CSS variables and design tokens ready for your Headspin UI blocks.

Breakdance

Breakdance

Sync color systems and tokens directly to Breakdance global styles.

Oxygen 6

Oxygen 6

Fluid typography, spacing scales, and CSS custom properties for Oxygen Builder.

Color System

Color Palette Generator for Breakdance & Oxygen

Pick a color, get a complete 12-step palette with light and dark modes — exported as CSS custom properties ready for production.

Brand Color Generator
Generated Brand Palette12 steps
1
2
3
4
5
6
7
8
9
10
11
12
Light
Dark
Typography

Fluid Typography System

Responsive type scales powered by CSS clamp() — ready for Breakdance and Oxygen 6.

Fluid Scaling

Font sizes scale smoothly between min and max values based on viewport width — no media queries.

Smooth transitionsAll screen sizesNo breakpoints

Complete Type Scale

A full typography system with 7 heading levels (H0–H6) plus 3 body sizes for any hierarchy.

10 size tokensConsistent hierarchyReady to use

CSS clamp() Export

Production-ready CSS variables using modern clamp(). Works natively in Breakdance and Oxygen Builder.

CSS variablesBreakdance readyOxygen 6 support
View DocsBuild Typography

Live Type Scale

Drag the slider to preview fluid sizing

320px1440px
H1

The quick brown fox

42px
H2

The quick brown fox

34px
H3

The quick brown fox

28px
H4

The quick brown fox

22px
Body

The quick brown fox

17px

/* Generated CSS */

--hfs-h1: clamp(2rem, 1.5rem + 1.5vw, 3.2rem);

Dashboard

Manage your design system

Unlimited projects with color palettes, typography, and spacing — exported as CSS variables ready for Breakdance and Oxygen Builder.

Stripe-inspired Dashboard
Professional payment interface with accessibility-first approach
Status2 Schemes
Available Schemes
BrandNeutral
Color Preview
Tailwind Marketing Site
Modern landing page with cyan accent colors
Status3 Schemes
Available Schemes
BrandNeutralRadix
Color Preview
Chrome Extension

Sync directly into your editor

Push your design system straight into Breakdance and Oxygen 6 — one click, no copy-paste.

Instant Sync

Load your complete color palette into Breakdance or Oxygen 6 with a single click — no manual copy-paste.

One-click integrationReal-time updatesZero configuration

Smart Detection

Automatically detects when you're inside Breakdance or Oxygen 6 and activates the color picker on relevant inputs.

Auto-detect editorsContext-aware UIWorks seamlessly

Flexible Formats

Choose CSS variables for dynamic theming or HEX codes for direct color values. Switch anytime.

CSS variablesHEX codesLight & Dark mode
View GuideInstall Free

How It Works

3 simple steps

1

Click any color input

Extension detects Breakdance/Oxygen automatically

2

Pick from your palette

3

Auto-paste to editor

var(--hcl-brand-9) or #0090ff

Works with Breakdance & Oxygen 6
Ready
Pricing

Simple, transparent pricing

Start free, upgrade when you need unlimited projects. No subscriptions, no hidden fees.

Free

Free

Perfect for trying out BreakColorUI.

  • Save 1 Project
  • Color System Generator
  • Fluid Typography System
  • Fluid Spacing System
  • Theme System
  • Chrome Extension Sync
  • CSS Export
  • Oxygen 6 Support
  • Breakdance Support
Get Started
Lifetime Deal
Pro

$59

Pay once · yours forever

For professionals who need unlimited projects.

  • Save Unlimited Projects
  • Access all blocks
  • Access all elements
  • Color System Generator
  • Fluid Typography System
  • Fluid Spacing System
  • Theme System
  • Chrome Extension Sync
  • CSS Export
  • Oxygen 6 Support
  • Breakdance Support
  • Project Backup & Restore
  • Priority Support

Trusted by Breakdance professionals worldwide

✓ Pay once, access forever✓ No credit card for Free plan✓ Instant access
Testimonials

What our users say

See what our customers have to say about us.

“BreakColorUI revolutionized our design workflow. The color system integration with Breakdance made our development process incredibly efficient.”

Sarah Chen
Sarah ChenDesign Lead

“The typography and spacing systems are game-changers. Our entire team can now maintain consistent design tokens across all projects.”

Michael Torres
Michael TorresFrontend Developer

“Setting up color palettes has never been easier. The Chrome extension integration saves us hours every week.”

Emily Rodriguez
Emily RodriguezUI Designer

“The fluid typography with viewport-based scaling works perfectly across all devices. Our clients love the consistency.”

David Kim
David KimCreative Director

“Managing design tokens across multiple projects used to be a nightmare. BreakColorUI made it seamless and intuitive.”

Jessica Williams
Jessica WilliamsProduct Designer

“The responsive breakpoint system with automatic cleanup is brilliant. It keeps our CSS clean and maintainable.”

Alex Thompson
Alex ThompsonTech Lead

“Real-time color application to Breakdance inputs has transformed how we build WordPress sites. Absolutely fantastic!”

Maria Santos
Maria SantosWordPress Developer

“The global save system with change tracking ensures we never lose work. The developer experience is top-notch.”

James Anderson
James AndersonFull Stack Developer

“BreakColorUI's color system with light/dark mode support made our rebrand project incredibly smooth and efficient.”

Olivia Martinez
Olivia MartinezBrand Strategist