Get Started

Variable Conversion

How BreakMade variables are converted to HeadSpinUI format.

When HeadSpin Mode is enabled, all BreakMade CSS variables are converted to HeadSpinUI’s --hsp-* prefix format.

Conversion Pattern

Native:    --s8           →  HeadSpin:  --hsp-s8
Native:    --primary-base →  HeadSpin:  --hsp-primary-base

For complete variable specifications and values, see CSS Variables Reference.

Spacing Conversion

All 24 spacing variables convert with the hsp- prefix:

NativeHeadSpin
--s1 to --s72--hsp-s1 to --hsp-s72
--ss-none to --ss-xxl--hsp-ss-none to --hsp-ss-xxl

Color Conversion

All 5 colors × 11 shades convert:

NativeHeadSpin
--primary-base--hsp-primary-base
--primary-bg--hsp-primary-bg
--primary-surface--hsp-primary-surface
… (all 11 shades)…

Same pattern for: secondary, tertiary, accent, neutral.

Using HeadSpin Variables

In Custom CSS

.my-element {
  padding: var(--hsp-s16);
  background: var(--hsp-primary-surface);
  border-radius: var(--hsp-radius-lg);
}

From BreakMade.com

When copying designs with HeadSpin Mode enabled:

  1. Select HeadSpin framework on breakmade.com
  2. Copy the HeadSpin version
  3. Variables automatically match your site

Troubleshooting

Variables not prefixed?

  1. Verify HeadSpin Mode is enabled
  2. Click “Merge Data” button
  3. Clear caches

Mixed prefixes in designs? Re-copy affected designs using HeadSpin framework from breakmade.com.