Introducing BRICKS Framework
Proud to announce Bricks, our all in one Web/App Design and Development Framework.
Introducing BRICKS: An easy-to-edit Front-End Development Framework for building more accessible, scalable web experiences—designed for teams working from Figma to Webflow.
What is BRICKS?
BRICKS is a front-end development framework built to make websites easier to design, build, and edit—without compromising on performance, accessibility, or structure. Whether you're working in Figma or Webflow, BRICKS offers a unified system that brings clarity to every stage of a website's life cycle.
Unlike other frameworks that focus primarily on class naming or design handoff, BRICKS is rooted in best practices from modern front-end development—bringing together clean HTML structure, accessibility, token-based design systems, and modular, scalable components.
It’s for marketing teams, designers, and developers who want to ship faster, scale smarter, and maintain cleaner sites over time.
Built for the Whole Team
For Designers
Create confidently in Figma with a design system that mirrors the build structure. No more design-to-code guesswork.
For Developers
Work with a scalable, semantic structure using utility classes, Webflow variables, and accessible markup—no spaghetti classes or bloated pages.
For Marketers
Easily edit and expand pages without breaking layouts or needing dev support. Clear structure = clear CMS experience.
Why BRICKS?
Because great websites aren’t just built—they’re built to last. BRICKS offers:
- Semantic HTML and accessibility-first structure
- Design token alignment between Figma & Webflow
- Native Webflow variable usage for scalable theming
- Reusable components for fast builds and cleaner edits
- A unified structure that scales with your site and team
It’s not just easier to use—it’s smarter, more maintainable, and future-proof.
How BRICKS Compares to Client-First, Lumos, and MAST
Each popular Webflow framework approaches the problem of site structure differently, but BRICKS stands out by focusing on front-end development best practices at its core.
Client-First is widely known for its easy-to-understand class naming and simplicity. It’s a great starting point for freelancers or small teams that need to move quickly and keep things clear. However, it can become harder to scale for larger, more complex builds.
Lumos leans heavily into visual design speed. It’s ideal for designers who want fast turnaround with token-based styling, but it's often less strict about semantic structure or accessibility. This can create technical debt down the road, especially if multiple teams are involved.
MAST, by contrast, is developer-first and prioritizes accessibility and utility-class logic. It's powerful and very structured, but often feels over-engineered or intimidating for non-developers, especially marketers or visual designers.
BRICKS sits between all of these. It combines the clarity of Client-First, the tokenized design system of Lumos, and the semantic rigor of MAST, while staying highly modular and team-friendly. It’s particularly suited for digital products, scalable marketing sites, and design systems that need to stay consistent over time. If you're working in a team that includes marketers, designers, and developers—or if you're thinking about long-term maintainability—BRICKS is the more balanced, future-proof choice.
How to Get Started
- Clone the Webflow Starter Project
Start with a clean, well-structured foundation using native Webflow variables and components. - Download the Figma UI Kit
Build your design system with tokens that mirror the dev framework. - Read the BRICKS Documentation
Learn how to configure, scale, and customize the system for your team or project.
In Summary
BRICKS isn’t just another Webflow framework.
It’s a modern front-end approach to building digital experiences that scale—designed for the way real teams work. From the first Figma frame to the final Webflow build, BRICKS makes the web more accessible, editable, and maintainable for everyone involved.
