The Hybrid Webflow Framework
Atom is designed to bridge the gap between custom development and rapid page building. It combines a robust Client-First Design System with a flexible Page Builder—allowing you to work on both levels simultaneously.
Built on Client-First principles, but extended with a fully fluid engine and a dedicated layout system.
The structure of a System— and the speed of a Builder
Stop compromising between scalability and efficiency. Atom allows you to architect complex CSS foundations while simultaneously constructing pages with visual components—giving you the best of both worlds in a single workflow.
The Design System
For granular precision. Build with a complete Client-First design system driven by global variables. Use standard CSS classes to create custom layouts while keeping your code clean, semantic, and scalable.
The Page Builder
For speed and scale. Construct full pages without touching CSS by using our modular component architecture. Control layouts, visibility, and styling entirely through the Props Panel—perfect for client handovers
The power of Finsweet & Relume
You shouldn’t have to learn a proprietary language to use a framework. Atom is built on the industry-standard Client-First naming convention, ensuring your project remains compatible with the wider Webflow ecosystem.
Finsweet Integration
We have integrated Finsweet’s powerful Attributes (v2) directly into our components. Get advanced filtering and sliders working out-of-the-box.
Relume Compatible
Never locked in. Since Atom is built on Client-First, you can copy layouts from Relume directly into your project without class conflicts.
Fluid design by default
Stop tweaking pixels for every device. Atom utilizes a fully fluid engine that adapts smoothly across screens without manual breakpoint adjustments.
Fluid Type & Space
Powered by CSS clamp(), typography and spacing scale proportionally from mobile to 4K without a single media query.
Smart Auto-Grids
Grids use minmax logic to fit columns dynamically based on available space, removing the need for rigid device-specific settings.
A comprehensive suite of building blocks
Stop building generic layouts from scratch. Atom includes a massive library of logic-driven components—from navigation and CMS grids to interactive modals, ready to power your next project or template.
Globals
Core components used across the entire site, including Navbar, Footer, global styles, and site logo.
Headers
A collection of hero components with different layouts and visual styles to kick off any page.
Cards
Reusable card layouts for content, services, features, and CMS-driven sections.
Icons
A structured icon system ready to use across components and layouts.
Breadcrumb
Clear navigation aids that improve usability and content hierarchy.
Dropdown
Accessible dropdown components for menus, filters, and interactive UI elements.
Info Box
Structured info blocks for alerts, highlights, and key messages.
Icon List
Clean list layouts combining icons and text for features and benefits.
Image List
Image-driven list components for visual storytelling, galleries and team members.
Logo Block
Brand and partner logo sections with consistent spacing and alignment.
Quote Block
Testimonial and quote components with balanced typography.
Code Block
Styled code components with optional copy functionality.
Accordian
Expandable content sections for FAQs and detailed information.
Tabs
Tabbed interfaces for organizing related content efficiently.
Modal
Reusable modal components for popups, forms, and focused interactions.
Marquee
Animated marquee elements for logos, announcements, or highlights.
CMS Lists
Pre-built CMS layouts for blogs, services, testimonials, and more.
Slider
Responsive slider components for featured content and media.
Starters
Pre-configured starters for forms, lightboxes, and common UI patterns.
Toggle Mode
Built-in toggle components for switching color modes.
Can’t find what you’re looking for?
We are constantly improving Atom and value your input. If you have feedback, feature requests, or specific questions, don’t hesitate to reach out.
Most frameworks force you to choose between rigid templates or building from scratch with classes. Atom combines both: a robust Design System for developers who want full control, and a Page Builder architecture for rapid drag-and-drop construction using props.
No. In "Builder Mode," you can construct complex pages purely by using components and adjusting their settings (Props) in the Webflow interface. However, knowledge of HTML/CSS allows you to unlock "Developer Mode" for fully custom layouts using utility classes.
Absolutely. Atom is built specifically for agencies and freelancers. You can use the framework to build unlimited websites for yourself or your clients. It is designed to speed up the handover process to clients who need to edit content easily.
Yes, completely. Atom uses the Client-First v2 naming convention. If you are familiar with Client-First, you already know how to navigate the class structure.
Yes. We haven't just built components; we have expanded the CSS framework itself. Atom features a dedicated Layout System with utility classes for Auto Grids, Flexbox wrappers, and Cards that aren't in the standard Client-First build. This gives developers granular control over structure without writing custom code.
Atom uses CSS clamp() for typography and spacing to scale sizes proportionally. We combine this with Auto Grids using minmax logic, which automatically flows content into columns based on available width. This ensures that both your content and layout structure adapt smoothly across all devices without manual breakpoint adjustments,.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
We use Webflow’s native GSAP integration. You don't need to write JavaScript. Simply select a component (like a Header or Grid) and toggle the Animation prop to "True". The framework handles the loading scripts and scroll-staggering effects automatically
Everything in Atom is driven by Global Variables. When you update a font size, a color swatch, or a border radius in the Variables panel, that change instantly propagates to every component and utility class across the entire website.
Yes. Atom includes pre-built CMS components for Lists, Sliders, and Filters. They come pre-wired with Finsweet Attributes, allowing you to add advanced filtering and sorting functionality without writing custom code.
Built for the real world, by active developers
Atom isn’t just a product we sell; it’s the production framework we use every day. As an active design agency, we developed this system to solve real challenges for high-end clients. We know it works because our own business depends on it
Established Agency
Proven on real-world client projects, every day.
We are an active design agency. We don't just sell templates; we build high-end client projects every day.
complete Framework
Agency-grade code at record speed and quality.
We leverage our own framework to deliver consistent, agency-grade code faster than anyone else.
Certified developers
Work directly with the developers and creators.
Work directly with the certified Webflow developers who built the system. No outsourcing, just expertise.