BreakColorUI is a design system tool that generates CSS variables, color palettes, fluid typography, and spacing scales for Breakdance Builder and Oxygen 6.
BreakColorUI gives Breakdance and Oxygen 6 users a proper design system layer that lives outside the builder itself. Through a web dashboard, designers generate 12-step color palettes with light and dark mode variants, fluid typography scales powered by CSS clamp(), and proportional spacing systems, all exported as CSS custom properties ready for production use.
A companion Chrome extension syncs the generated design tokens directly into Breakdance or Oxygen 6 color inputs in real time. The extension detects when the user is inside a supported builder and activates the connector on relevant fields, removing the need to manually copy and paste variable names. It supports inserting values either as CSS variable references or as raw HEX codes.
A free plan saves one project with full access to all generation tools. The Pro plan covers unlimited projects and is available as a one-time $59 lifetime purchase. There are no subscriptions on any plan.
Key Features
- 12-step color palette generator with light and dark mode export
- Fluid typography system using CSS clamp() with H0 through H6 levels
- Spacing scale generation as CSS custom properties
- Chrome extension for one-click sync to Breakdance and Oxygen 6
- Compatible with Headspin UI, Breakdance, and Oxygen 6
- Unlimited projects on the Pro plan at $59 one-time
- Dashboard with project backup and restore functionality
- Free plan available with one saved project and full tool access
BreakColorUI gives Breakdance and Oxygen 6 designers a consistent, maintainable design token system that syncs directly into the builder with a single click.
