Settings Modal Tools

Pixflow Design includes Bricks setup tools inside the settings modal. These tools support both manual setup and agent workflows such as HTML to Bricks.

The tools should open as proper workspace-level modals, not trapped inside the settings modal content.

Google Font Installer

Use the Google Font Installer when the site needs a Google font available inside Bricks.

Typical uses:

• installing fonts before a design system is created
• installing fonts discovered during HTML to Bricks
• matching generated Prototype typography to Bricks theme styles
• adding heading or body families to Bricks typography controls

After installing a font, Pixflow should make it available to Bricks typography settings. For generated or converted pages, the preferred flow is:

1. detect the font family from the design
2. install the Google font if needed
3. apply it through Bricks theme styles or element typography controls
4. use fallback fonts where appropriate

If the source font is not available from Google Fonts, Pixflow should choose the closest available match and explain the substitution.

Icon Builder

Use the Icon Builder to install custom SVG icon sets for Bricks.

Typical uses:

• adding a brand icon set
• installing Tabler, custom project icons, or generated icon packs
• making icons available in Bricks icon controls
• supporting HTML to Bricks conversions that include SVG icons

Icon installation should sanitize SVGs, register the icon library, and refresh the builder icon registry. After install, newly installed icons should be selectable in Bricks without requiring a full browser page reload where possible.

For converted HTML, Pixflow should preserve the original icon dimensions. Do not force every icon to 24 by 24 unless that is the source size.

Pixflow Framework Design Your System

Use Design Your System to build a Pixflow Framework design system from the settings modal.

Typical uses:

• creating a site-level visual system
• defining typography, spacing, radius, and color direction
• preparing Bricks theme styles for Pixflow-generated work
• giving HTML to Bricks and Stage B runs a stronger baseline

The generated system should be applied in a way Bricks can use immediately. If Bricks needs to refresh its internal builder state to see new theme styles, Pixflow should trigger a builder-safe refresh rather than requiring a full page reload where possible.

How these tools support HTML to Bricks

HTML to Bricks works best when these tools are available to the pipeline:

• fonts are installed before typography is assigned
• icon sets are installed before icon elements are configured
• the active design system gives the converter better theme style defaults
• Stage B can refine the canvas using known Bricks controls and theme settings

This keeps generated Bricks pages closer to the original HTML while reducing unnecessary custom CSS.