The Pixflow Style Generator works only with the Pixflow framework.
It is not used when copying layouts via framework mapping.
The Pixflow Style Generator allows you to create and manage a complete design system for your website when using Pixflow with Bricks Builder. It is built to work directly with Pixflow’s base theme styles, which rely on global styles and CSS variables rather than element-level overrides.
This approach ensures your site remains consistent, scalable, and easy to update at any stage of the build.
How the Style Generator Works
Pixflow’s base Bricks Builder theme is fully variable-driven. Colors, typography, buttons, and surface elements all reference shared global values.
The Style Generator updates those global values in one step, allowing design changes to cascade automatically across:
- Pages and templates
- Components and layouts
- Buttons, surfaces, and UI elements
When you import a style, your entire website updates seamlessly without breaking layouts.
Style Generator Interface Overview
The Style Generator interface is divided into three main areas:
- Design controls
Used to select design styles, border radius options, and generation behavior. - Generated outputs
Displays the core colors and typography settings of the current style. - Generate action
Recalculates the entire design system based on your current configuration.
Generated Color Outputs
The Style Generator produces a complete color system, including:
- Backgrounds
- Foreground
- Heading
- Text
- Borders
- Inputs
- Accents
In the interface, you will primarily see background, foreground, heading, text, and accent colors.
Border and input colors are generated automatically in the background and applied in the site preview. These values are still part of the system even though they are not directly exposed in the generator UI. If necessary, they can be adjusted later inside Bricks Builder after import.
Setting a Brand Color (Recommended)
If you already have a primary brand color, you should set it on the accent color of the main scheme and lock it before generating a style.
This ensures the entire system is built around your brand color, while all other colors adapt intelligently around it. You can regenerate styles as often as needed, and the generator will preserve the same structural logic.
Design Styles and Surface Behavior
You can control the overall visual style of your site using the design controls in the Style Generator.
- The design style dropdown changes how surface elements are rendered.
- The border radius dropdown controls the corner radius of buttons and surface elements.
Design styles behave as follows:
- Default
Surface elements use a 1px border. - Flat
Surface elements have no borders. - Edgy
Surface elements use a 2px border, with the border color set to the heading color for maximum contrast. - Outlined
Foreground colors are set to match background colors, and surface elements use a 1px border instead of filled backgrounds.
Background and foreground colors behave normally across all design styles, except for Outlined, where filled surfaces are intentionally removed in favor of borders.
You can switch design styles at any time. No base values are permanently overwritten.
Choosing Typography
Typography is handled globally, just like colors.
In the Style Generator, you can select:
- A heading font
- A body font
The available fonts are the full Google Fonts library.
You can:
- Filter fonts by category using the dropdown
- Search for fonts directly within the font selector
- Hover over the eye icon next to a font to instantly preview it in the site preview before selecting it
Once imported, these typography settings populate Pixflow’s global typography values in Bricks Builder. Headings, text elements, buttons, and UI components automatically reference them.
Using Custom Fonts
If you use a custom font that is not part of Google Fonts, you can still use the Style Generator for all other design settings.
After importing a style, update the font settings inside Bricks Theme Styles to apply your custom font globally.
Importing Styles into Bricks Builder
When you import a style, the Style Generator updates:
- Global Colors
- Global Typography
- Pixflow’s base component styles
All elements that reference global values update immediately.
Styles can be imported at any point during the website build, whether at the start, midway through, or near completion.
Styles generated here apply only to Pixflow’s variable system and are not used by mapped frameworks
Critical Best Practice: Avoid Element-Level Overrides
Pixflow’s Style Generator and base theme rely entirely on global variables.
After importing a style, you should avoid setting colors or typography at the element level. Element-level overrides break the connection to global variables and may prevent future style imports from working as intended.
All visual changes after using the Style Generator should be made at the variable or global style level only.
Following this rule ensures:
- Future style imports continue to work correctly
- Visual consistency is maintained
- You can change design direction at any time without rework
Summary
The Pixflow Style Generator enables a true design-system workflow in Bricks Builder.
By generating styles, importing them at any stage, and relying on global variables instead of overrides, you gain a fast, predictable, and flexible way to manage the visual design of your entire website.