Instructions
Learn more about using The Blueprint in Webflow.
Learn more about using The Blueprint in Webflow.
There are a couple of ways to start working with The Blueprint, depending on your workflow:
1 — Set up a shared library (recommended)
Use The Blueprint as a centralized design system across your Webflow workspace through shared libraries.
This project becomes your "source of truth" — where you customize components and styles. From there, you can pull components into any project as you build out individual sites.
These components act as independent, site-specific components which you can further customize without affecting the original Blueprint project.
2 — Copy & paste components into individual projects
If you prefer a simpler setup, you can manually copy and paste components from The Blueprint into each project as needed.
Because Webflow doesn’t currently support remote updates for project files or libraries, all updates to The Blueprint are sent manually. When you purchase the library, we save your email so we can transfer updated versions of the project directly to your Webflow account.
We aim to send out updates about once a month, especially when new components are added or bugs are fixed. You can also request the latest version at any time—just reach out and we’ll make sure you get access to the newest build.
If you're using The Blueprint as a shared library in your Webflow workspace, the best way to manage updates is to copy and paste new components from the updated project into your base library project. This way, you keep your setup intact while still getting the latest sections.
Alternatively, if you're not using a shared library setup, you can simply replace the old Blueprint project with the new one and use it as your updated version.
We know it's a bit manual for now, but this approach ensures you always have the latest and cleanest components at your fingertips. Thanks for your understanding and support!
The Blueprint is designed to be flexible and easy to customize — whether you're updating content or adjusting design.
Editable via Component Properties
All Blueprint components expose properties (props) for any element Webflow allows, making it easy to update text, images, links, and layout settings directly — without needing to enter the component structure.
Design Customization with Global Sync
To customize the design of a component, simply double-click to open it. Any design changes made will reflect across all other instances of that component.
Class Naming & Structure
Components follow a simplified BEM-style naming convention. While some utility classes are shared — such as Container, Grid, or Title — most structural elements are uniquely named (e.g., Hero 01 Wrapper) or use scoped combo classes (e.g., Title Title Hero 01) for safe styling.
Safe Styling Practices
You can safely customize elements with namespaced or combo classes without affecting other components. For global classes like Container, we recommend adding a combo class before making changes to prevent unintended global updates.
The Blueprint uses Webflow Interactions 2.0 to create smooth, native animations across sections and components.
In more complex components — particularly "Content" sections — certain animated elements must remain inside the component structure for the interaction to work correctly. Removing or detaching these elements can break the animation sequence or trigger logic.
If you're planning to significantly modify a component’s structure or interactions:
All interactions are built using native Webflow tools — no custom code — to ensure maximum compatibility and editability.
To make customization easier, components are intentionally designed to expose key content elements through props — even those that are initially hidden by an interaction. This means you can update text, images, and links directly from the component panel, without needing to dig through the Webflow Designer or locate hidden layers manually.
The Blueprint includes optional smooth scrolling powered by the Lenis library for a smoother browsing experience. This can easily be removed.
Lenis is added via custom code in your Webflow Project Settings → Custom Code → Footer (Before </body> tag).
If you’d like to remove Lenis from your site:
1 — Go to Project Settings in Webflow.
2 — Click on the Custom Code tab.
3 — Scroll to the Footer Code (Before </body>) section.
4 — Remove the <script> tag(s) related to Lenis
5 — Save changes and publish your site.
If you're just getting started, here are some official Webflow University resources that can help you feel at home:
