Headspin UI is a CSS framework and wireframe collection built by Breakdance users for Breakdance users, with 663+ templates and Figma integration.
Headspin UI offers wireframes available as a Figma library, providing the convenience and efficiency of Figma for faster prototyping and ensuring that the creative workflow is seamless and productive. The framework handles fluid typography, spacing, and color system management through a Headspin Copilot plugin that syncs directly with Breakdance’s global settings. Its Dynamic Color System automatically adapts to accessibility standards (WCAG 2) with optimized palettes, dark and light mode switching, and perceptual contrast algorithms, removing the need for manual color adjustment.
The product is developed by Ruben Garcia Jr. and lives at headspinui.com. It splits into three product lines: Headspin Wireframes (663+ low-fidelity templates updated monthly), Headspin Elements (design components), and Headspin Sites (fully designed, import-ready site layouts). The Copilot plugin acts as the central control point, syncing colors, typography, and spacing into Breakdance from a single interface.
Key Features
- 663+ mobile-ready wireframe templates updated monthly
- Figma library integration for pre-build prototyping
- Headspin Copilot plugin syncing colors and typography to Breakdance global settings
- Dynamic Color System with WCAG 2 compliance and automatic dark/light mode switching
- Fluid typography and spacing using modern intrinsic CSS
- Color system based on Radix UI color standards
- Headspin Elements and Headspin Sites as additional product layers
- BreakcolorUI and Breakerblocks are compatible out of the box
Headspin UI is the most comprehensive design system tool in the Breakdance ecosystem, and the Copilot plugin makes it the practical center of any systematic design workflow across multiple client projects.
