BreakColorUI is a web-based design token generator for Breakdance and Oxygen 6 with one-click Chrome extension sync.
BreakcolorUI is a browser-based tool that generates 12-step Radix-compliant color palettes from a single input color, fluid CSS typography scales using clamp(), and responsive spacing systems. A dedicated Chrome extension syncs the compiled design tokens directly into Breakdance or Oxygen 6 global settings in one click, removing the need for manual CSS variable entry on each new project.
The color system generates light and dark mode variants as CSS custom properties, each step WCAG-accessible for contrast. The typography system follows a 7-level heading hierarchy (H0 through H6) plus three body sizes. BreakcolorUI also exports CSS variables formatted specifically for Headspin UI blocks, making it the natural entry point for a three-tool design system workflow alongside Headspin UI and Breakerblocks.
A free tier and a paid tier are available at breakcolorui.com.
Key Features
- 12-step Radix-compliant color palette from a single input color
- Light and dark mode variants exported as CSS custom properties
- Fluid typography using CSS clamp() from a 7-level heading hierarchy
- Responsive spacing system generated alongside color and type
- Chrome extension syncing tokens to Breakdance and Oxygen 6 in one click
- Exports CSS variables formatted for Headspin UI compatibility
- Free tier available; paid tier at breakcolorui.com
- No WordPress plugin required
BreakcolorUI makes WCAG-accessible, multi-mode design system generation a one-click process for every new Breakdance project, which is a meaningful time saving on any professional workflow.
