Phox Framework – New Design System for Breakdance & Oxygen

Phil from Phox Elements has just announced the release of Phox Framework, a new design system for Breakdance and Oxygen which operates within the builder rather than alongside it.

New: Phox Framework

You only need to set a few things once such as your brand colours, a type scale, a spacing scale, and corner radii. Phox Framework then generates everything else and syncs it straight into the builder’s own variables, meaning every colour and size control on every element can use them natively. There are no classes to remember and no stylesheet to maintain.

This is what you get:

• Enter a hex code to generate a full shade ramp, a hover state and a readable text colour. The steps will actually look even because the code is generated in OKLCH.
• Fluid type and spacing. Every size scales smoothly from phone to desktop with no need for breakpoints.
• Dark mode and dark areas. Mark a section as dark and every heading, paragraph, link and caption inside it will switch to a readable colour. Nothing gets styled twice.
• There is a token picker beside every colour and size control. Hover to preview it on the real element, then select it. Tints are included.
• There are five presets to start from and you can undo your changes with one click.
• There are five MCP tools so that an AI assistant can read your design system, change it safely, generate a palette from one brand colour, and then audit the contrast.

The Phox Framework is included in the Phox Bundle. As it uses the new variable system in Breakdance and Oxygen, it works best with Breakdance 3.0+ and Oxygen 6.2+.