Fluid type and spacing, perceptual colour ramps, and text colours that stay readable on any surface. All of it synced straight into your builder's own variables, so every control picks them up natively.
Every size is a clamp() between a small-screen and a large-screen value, so type and spacing interpolate smoothly across every width. Nothing needs a breakpoint to look deliberate on a phone.
Pick one hex and get eight steps generated in OKLCH, so every shade moves by the same perceived amount instead of drifting muddy at one end. You also get a hover shade and a readable foreground.
Headings, body, captions and links are grown from your palette to hit real WCAG contrast targets, and each one holds a value for light surfaces and a value for dark ones.
Mark a section as a dark area and every piece of text inside it switches to its dark value: headings, copy, links, captions, at any depth. Nothing inside needs styling twice.
Tokens sync into Breakdance and Oxygen's own variable collection, so they appear in every native picker and a binding survives a token rename or a prefix change.
A token button sits beside the builder's own colour and size fields. Pick a token, or take one at 60, 40, 20, 10 or 5 percent and the picker writes a real color-mix() tint.
Type a hex. Every shade, the hover state and the dark-mode value are worked out for you, and you can still overrule any single one of them by hand.
Every colour you enabled, every shade and every token name, on one page you can hand to a client or check a contrast grade against.
Every size interpolates between a small-screen and a large-screen value. Every text colour holds a light reading and a dark one, and a section marked as a dark area switches all of them at once.
Five starting points, each carrying a palette, type scale, spacing rhythm and corner radii. Apply one, look at your site, then change anything you like, and undo it in a click.
Phox Framework registers five tools on Breakdance's own MCP server, so an assistant like Claude can read your design system, change it safely, and check its own work afterwards.
One call returns the configuration, every token with its value and computed pixel range, the full colour ramps with their contrast grades, and how to reference each token in CSS or in the builder.
Send only the keys you want changed. Everything is validated, saved, the stylesheet rebuilt and the builder variables pushed in one atomic step. A dry run shows you the result before anything is written.
Hand it a brand colour and it derives a whole palette in OKLCH, relating the hues by a colour theory strategy so the slots read as siblings, and giving the neutrals a trace of the brand hue instead of flat grey.
Colour pairs failing WCAG AA, fluid sizes whose minimum exceeds their maximum, variable name conflicts, a stale stylesheet. Each one is reported with the specific change that resolves it.
Regenerate the stylesheet and re-push every token to the builder's variables. Safe to run as often as you like: it is a rebuild, not a change.
The tools follow Breakdance's own MCP switch, so they exist only when you have agents turned on. Every write sits behind the same permission as editing the design system by hand.
Four short walkthroughs, in the order they are worth reading. Each one is a real sitting at the screen rather than a feature list.
From an empty install to a complete design system in your builder, with one preset and one colour.
Which slots to switch on, how to read a ramp, when to override a shade, and what the ink roles are doing for your text.
Readable text on a dark section with one setting, a full dark palette when you want it, and a toggle for your visitors.
The picker, tints, what a pick writes, Global Settings, and putting your spacing scale on containers.
Every tab, every setting and every token, in depth. The place to look once you know what you are looking for.
The framework ships inside a CSS cascade layer, so any CSS you write beats it without a single !important. It fills your builder's Global Settings where they are empty, and steps aside, one property at a time, wherever you have made a choice of your own.
--pxf-primary can become --acme-primary across the stylesheet, the builder variables and the picker. Useful when another framework on the site already owns a name.