Fusion UI

Fusion UI ships off by default. Nothing changes until you switch it on, and switching it on affects your own builder only: everyone else on the site keeps whatever they chose.

There are two presets, and one color drives each of them. Everything else, panels, fields, menus and the structure tree, is derived from the surface color you choose.

The accent colors your selection, focus rings and the active state of every control. Use the Bricksfusion accent, the curated row, one of the proposals derived from your surface, or a custom color.

The color you set is adjusted until it reaches at least 3:1 contrast against your surface. If the accent you picked renders lighter or darker than expected, that is why. Pick a color further from your surface to keep it closer to your choice.

One slider sets the corner radius for panels, fields, chips and buttons together.

The selected element is filled with your accent color. Everything nested inside it is tinted with the same color, and its ancestors are highlighted, so the branch you are working in and the path back to the root are both visible without expanding anything.

Element icons sit at reduced opacity until you hover their row. The selected row keeps the same margins as every other row, so the tree does not shift when the selection changes.

Click a spacing or size field and Fusion lists the design tokens already defined on your site. Each one is rendered at its real value: spacing as a ruler, font sizes at their rendered size, radius at its actual curve.

Hovering an option previews it on the element and reverts on leave. A badge names the source, ACSS, Core Framework or AT Framework, detected from the plugins active on the site.

The list opens with the full scale. If the field already holds a variable, that token is highlighted in place rather than filtering the list, so the arrow keys step through the scale from where you are.

Grid columns, transitions and transform origin offer preset options drawn as diagrams: two columns, a sidebar, a fluid grid. Hovering one applies it to the canvas as a preview.

Grid options are computed from the grid already on your canvas, so the values it offers fit the arithmetic of your layout. Recent values appear at the top of the list, and Radius and Gap also suggest values that already repeat on the page.

A search box for the whole builder. Press Cmd K (or Ctrl K on Windows) anywhere and jump to any control, any element on your page, or any Fusion action.

Type part of a control name, press enter, and the panel scrolls to it and flashes it briefly.

Same controls, same names, rearranged. Nothing is added to or removed from what Bricks exposes.

Your setup is saved to your Bricksfusion account, so every licensed site where you use that account email opens the way you left it. There is nothing to configure: set up Fusion UI once and it travels with you.

It syncs one person across their own sites. It does not sync people to each other: a colleague on the same site keeps their own workspace, because settings are stored per account rather than per site.

It syncs when you open the builder and when you save. The builder never waits for the cloud, so a slow connection costs you nothing.

Fusion UI reads the values from ACSS, Core Framework and AT Framework, detected from the plugins active on your site, and tells you which one its suggestions come from.

Advanced Themer restyles parts of the builder too. For that combination we say designed to coexist rather than tested with: Fusion UI keeps to its own layer, and the master switch is always there if something looks off.

Turn Modern interface off in the panel. The original builder returns immediately. Fusion UI only adds styling, so there is nothing to undo, migrate or clean up, and your saved preferences are kept for when you turn it back on.