Style Guide
The Style Guide defines the visual foundation of the ATOM Builder Framework. It includes all core styles—typography, color, spacing, buttons, and basic interface elements. These global settings ensure consistency, flexibility, and scalability across every component and layout. Use the Style Guide as the single source of truth for maintaining a unified visual language throughout your Webflow projects.
Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
Heading-display-1
Heading-display-2
Heading-style-h1
Heading-style-h2
Heading-style-h3
Heading-style-h4
Heading-style-h5
Heading-style-h6
Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
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.
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.
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.
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.
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.
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.
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
text-style-italic
text-style-strikethrough
text-style-allcaps
text-style-nowrap
text-style-quote
text-style-link
text-style-hover
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.
text-style-muted
text-style-tagline
Text Colors
Text color classes when typography should overwrite default color scheme.
text-color-primary
text-color-secondary
text-color-white
text-color-black
text-color-black
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
Colors
Color Schemes
Manage your colors easily with global color schemes simply adding the color scheme class to the section or div you want it applied to.
Base
Text color
Brand 1
Text color
Brand 2
Text color
Dark
Text color
Form Elements
Icons (Image)
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover. For more on Icons, please refer the page Icons.
Radius
Radius classes apply consistent corner rounding using predefined variables for smooth, cohesive shapes across all components.
Effects
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
Image Overlays
Image overlays are add-on (combo) classes used to apply color or tint effects on images.
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Max Widths
Max-widths use predefined variables to control element width and maintain consistent layout balance across all screen sizes.
Paddings
Padding classes use fluid spacing that scales with screen size. This removes the need for extra CSS or media queries at smaller breakpoints, keeping layouts lightweight and consistent.
Direction Classes
Size Classes
Margins
Margin classes follow the same fluid system, adjusting automatically across viewports to maintain balanced spacing without additional code.
Direction Classes
Size Classes
Spacers
Spacers provide fluid vertical spacing that scales automatically with screen size. They help separate sections without adding custom CSS.
Layouts
Auto Grid
A flexible grid system that automatically adjusts the number of columns based on available space. Apply one class to enable auto layout and another to define the minimum item width. Optional combo classes let you control gaps and alignment for precise layout control.
Auto-fill keeps all potential columns, even if some are empty, maintaining consistent structure.
Auto-fit collapses empty columns so items expand to fill available space.
Column Sizes
Even Grid
A standard grid with evenly sized columns using fractional units (fr). Apply a class to define the number of columns, with optional combo classes for gaps and alignment. The grid adapts responsively across tablet, landscape, and portrait breakpoints.
Uneven Grid
A grid layout with asymmetric column ratios for visual variety. Choose between 2–1, 1–2, 3-1 or 1-3 classes. Optional classes control gaps and alignment. Fully responsive across all breakpoints.
Grid Alignment
Grid alignment is controlled with combo classes that set vertical positioning within grid cells. Choose top, center, or bottom alignment to keep content consistent across layouts.
Flexbox
A versatile layout system for linear content alignment. Use Flexbox Row or Flexbox Column classes to define direction, and combine with gap classes for spacing control. Perfect for aligning elements horizontally or vertically with precision and flexibility. Flexbox classes are often wrapped in flex_wrap.
Gaps
Gap combo classes define spacing between items in both grids and flexboxes. Choose from several predefined sizes or use contextual options like gap-global for spacing that matches global padding, and gap-content for consistent separation between content elements.
Block Wrapper
The Block is a standard wrapper used throughout the site. It stacks content in normal flow without special layout behavior.
A flexible content container with options for image, icon, meta text, and button visibility. Left-aligned by default, with an optional centered layout.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A card variant with background and side padding for a solid, contained look. Supports image, icon, meta, and button visibility.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A versatile card for features or highlights
Switch between card or box layout and show only the elements you need—image, icon, text, or buttons.
A clickable card for navigation or featured content. Supports image, icon, and meta visibility. Left-aligned by default and available in both card and box layouts. Includes customizable hover effects managed through global styles embed.
A box-style link card with background and side padding for a strong framed look. Supports image, icon, and meta visibility. Hover effects can be adjusted in global styles for consistent interaction design.
Card Wrapper organize and contain card body for consistent structure.
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.