Custom framework mapping is liveView changelog

22 new items droppedView changelog

Style generator is now liveTry it out

Getting started

Layouts

Search for "" layouts

Components

Search for "" components

Welcome to Pixflow

Getting started

1. Getting Started: Choose Your Pixflow Workflow

Pixflow layouts and components can be used in more than one way, depending on how you build sites and which design system you prefer. Before installing anything, this guide helps you choose the correct Pixflow workflow for your project. Choosing the right workflow from the start ensures: The Two Ways to Use Pixflow Pixflow supports…

2. Using Pixflow Layouts & Components

Pixflow layouts and components are designed to be used directly inside Bricks Builder, producing native, editable Bricks elements with no exports, ZIP files, or proprietary wrappers. This document explains: Two Supported Ways to Use Pixflow Assets Pixflow layouts and components can be used in two intentional and supported workflows: 1. Remote Templates (Bricks Builder) Paid…

3. Using Pixflow with the Pixflow Framework

Pixflow can be used in multiple ways, depending on how you prefer to work with layouts and design systems. This section applies only when you choose to use the Pixflow framework — Pixflow’s own variable-driven design system — inside Bricks Builder. If you are using framework mapping (ACSS, Advanced Themer, Core Framework, or Raw CSS…

3.1 Importing & Updating Pixflow Framework Styles

This document applies only when using the Pixflow framework. If you are copying layouts using framework mapping (ACSS, Advanced Themer, Core Framework, or Raw CSS), you do not need to import Pixflow framework styles, and this document does not apply. Pixflow layouts and components rely on a mandatory styling framework.This framework must be imported correctly…

3.2 How to Apply Secondary Colour Schemes

This feature applies only when using the Pixflow framework.If you are using framework mapping (ACSS, Advanced Themer, Core Framework, or Raw CSS), this document does not apply. Secondary colour schemes allow you to introduce clear visual context without creating a second brand or breaking hierarchy. This document explains when to use secondary schemes and how…

3.3 Using the Pixflow Style Generator

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…

4. Using Framework Mapping (Copy & Paste Only)

Framework mapping allows you to use Pixflow layouts and components without adopting the Pixflow framework. Instead of requiring Pixflow’s variable system, Pixflow can rewrite variables at copy time so that copied layouts match the framework you already use. This system exists to give you maximum flexibility without increasing maintenance overhead or fragmenting the Pixflow library.…

5. Global Splide Controls (Custom Arrows & Progress Bars)

Pixflow layouts that use Splide sliders can optionally include custom arrows and progress bars.To keep things fast, clean, and consistent across your site, these features are powered by a single global JavaScript snippet. You only need to install this once per site. After that, any Pixflow layout that supports custom Splide controls will work automatically.…

Color Schemes

1. Foundations

Colour is one of the most powerful tools in a digital interface. It guides attention, establishes brand identity, and shapes how users experience your site. In Pixflow, colour is not treated as a loose collection of swatches or a decorative afterthought.It is treated as a system. This document introduces what a colour scheme means in…

2. How Pixflow Thinks About Colour

Before you choose colours, Pixflow makes a decision about how colour should behave. This document explains the philosophy behind Pixflow’s colour system. It focuses on intent, hierarchy, and long-term stability—not tools, settings, or mechanics. Understanding this mindset will help you make better colour decisions, avoid common mistakes, and trust the system as your site evolves.…

3. The Colour Scheme Generator

Pixflow’s colour generator exists to turn intent into a complete, reliable colour environment. This document explains what the generator does at a conceptual level—without tools, settings, or technical detail. The goal is to help you understand what you can trust the system to handle automatically and where your decisions meaningfully shape the result. The Generator’s…

4. How to Use the Generator Effectively

The Pixflow colour generator is designed to do most of the hard work for you. When used correctly, it produces colour schemes that are consistent, accessible, and resilient to change. This document explains how to work with the generator, not against it. It focuses on intent, decision-making, and safe adjustment—without diving into tools, controls, or…

5. Where Colours Should Be Used on a Website

Choosing good colours is only half the work.Using them consistently is what makes a site feel intentional, readable, and calm. This document explains where colours belong in a Pixflow site, based on roles and purpose rather than preference. The goal is to help you apply schemes correctly across real layouts—without visual noise or future problems.…

6. Using Secondary Colour Schemes

Secondary colour schemes exist to solve a very specific problem: How do you create visual separation and context without creating a second brand? This document explains what Pixflow’s secondary schemes are, what they are not, and how to use them correctly in real layouts. What Secondary Schemes Are Secondary schemes are contextual environments. They allow…

7. Accessibility, Contrast, and Safety

Accessibility is not a feature you add at the end of a design process.In Pixflow, it is a foundational guarantee. This document explains how accessibility, contrast, and safety are treated within the colour system—and why Pixflow deliberately removes certain decisions from manual control. Accessibility Is a System Responsibility Most colour problems do not come from…

8. Designing for Scale and Change

Most colour systems fail over time, not at launch. They look correct on day one, but gradually break as sites grow, teams change, and requirements evolve. Pixflow’s colour system is designed specifically to avoid this outcome. This document explains how Pixflow supports long-term change without colour drift, inconsistency, or repeated rework. Websites Are Never Finished…

9. The Science Behind the Pixflow Colour Generator

Pixflow’s colour generator is not a collection of arbitrary rules.It is the result of established research, real-world design failure analysis, and modern colour science. This document explains why the system works the way it does—not how to use it. It exists for designers and technical users who want to understand the foundations behind Pixflow’s decisions…