Getting Started
This template is built with the Atom Builder Framework and designed for fast customization. It uses a component-first approach, allowing you to update content, layouts, and styling visually—without writing CSS. Follow the steps below to tailor the template to your brand, understand how the components work, and make the template your own.
Build with Components
This template is built entirely with ready-made components. Customize layouts, content, and appearance using props and variants—no CSS knowledge required. It’s the fastest way to adapt the template to your brand and ideal for designers, clients, or teams who want full control without touching styles or structure.
Extend with the Framework
If you plan to develop the site further, ATOM’s underlying CSS framework is there when you need it. Built on Client-First principles, it gives you full layout and structural control using grids, flexboxes, and reusable classes—perfect for advanced customization, performance tuning, and long-term scalability.
Customize your template
Follow these simple steps to customize the template for your brand and start building quickly. The template is component-first, meaning most updates can be done visually without touching styles or structure. Once you’ve reviewed the setup, you’re ready to adapt pages, create new sections, and move fast with confidence.
1. Review and update variables
Start by adjusting the project Variables to match your brand. Update Primitives, Color Schemes, Typography, UI Styles, Sizes, and Gaps. These values power the entire template, so changes made here automatically update all components and pages.
2. Configure color schemes
In Color Schemes, set up your base, dark, and brand modes. Test contrast and state colors directly in the Stylesheet or on any prebuilt page to ensure clarity and consistency.
3. Check the Style Guide
Open the Stylesheet to review core elements. Most styles are driven by variables, but you may want to fine-tune buttons, links, or form elements to better match your brand.
4. Review the components
Explore all available components, including Navbar and Footer. Components live in Webflow’s Components panel, while detailed descriptions and usage guidelines are available on atomwork.co
5. Review pages and layouts
The template includes a set of prebuilt pages and layouts. Browse through them, update content, swap components, and adjust structure. Thanks to the component-first setup, layouts can be customized quickly without manual styling.
6. Build with Starters
When creating new pages or sections, use prebuilt pages, Starter Page Templates and Starter Components. They provide a fast, consistent starting point and ensure new content follows the same structure as the rest of the template.