Bricks & Design Systems

Pixflow Design is Bricks-aware. It uses Bricks schemas and Pixflow skill trees to understand how elements, controls, theme styles, dynamic data, and query loops should be configured.

Bricks-native priorities

Pixflow should prefer Bricks-native controls when a control exists:

• layout controls for sections, containers, blocks, and divs
• typography controls for headings, text, rich text, and buttons
• spacing controls for padding, margin, gap, and width
• button controls for variants and states
• media controls for images, icons, videos, and SVG
• query controls for loops, pagination, sorting, filters, and API data

If no Bricks control exists, Pixflow can use scoped custom CSS.

Theme styles

Global defaults should live in Bricks theme styles when possible. Element-specific styling should only be added when the design needs to override the global rule.

For example:

• section vertical padding can come from theme styles
• container width can come from theme styles or framework tokens
• normal button styling can come from theme styles
• special hero buttons can have specific classes and overrides

Framework route

Pixflow can map values to the selected framework route when available. This is useful for spacing, typography, radius, and design token consistency.

Settings modal tools

Pixflow Design includes three important Bricks setup tools in the settings modal:

• Google Font Installer
• Icon Builder
• Pixflow Framework Design Your System

These tools are part of Pixflow Design and should be used before or during Bricks conversion work when the target page needs custom fonts, icon sets, or a generated framework design system.

Continue to Settings modal tools for the full setup flow.