4-point spacing scale
This system helps you build clean and consistent layouts in Webflow. It’s based on a 4-point spacing scale, so everything—from padding to grids—uses sizes like 4, 8, 16, 32px, and so on. The goal is to make things simple, flexible, and easy to maintain.
Utility classes
Utility classes are classes always starts with a u and are written with just dashes, not underscore. u-content-constraint , u-heading-32 , u-section-64
Custom classes
Custom classes can be whatever you like. I often use the name of the element, followed by an underscore.
testimonial_wrapper testimonial_portrait-image
These are written with lower case, dashes and underscore. You can create a custom class and then add a utility class on top of that to bring in the styles from the utility class but still have the freedom to change the combination without affecting the utility class.
testimonial_title Heading 24
A class should include only the block and the immediate element. For example, if a block .photo contains a caption element which in turn contains a quote element, you should name them .photo_caption and .photo_quote – not .photo_caption_quote. All elements are still tied to the base block name (photo in this case), regardless of nesting level.
This keeps class names from becoming overly verbose and brittle. In short, use a single _ for the element portion and don’t extend it further; if an element itself has sub-parts, consider making that sub-part its own block or just use another element name on the base block.
Example
.table → .table_content → .table_header-row → .table_row → .table-cell → .table-text
Combo classes
I try to follow the Lumos system where it makes sense. You write a custom class first and add a utility class after. The benefit of this is that you can just rename the utility class used as a combo class and all elements whith that combinationa will then change.
So lets say you have hero_title u-heading-64 as a combination. If you later need to change all hero titles size you can just rename the u-heading-64 to for example u-heading-48
Same goes to sections. If you want your section_primary u-section-80 to change to 64px instead, just rename it to u-section-64.
For custom classes I use cc-[custom-text] Example: I want a card_default to have 80px top padding: card_default cc-top-padding-80
Just like a custom class, you can put whatever makes sense to you after the cc-
Modifiers for Variants and States
Define modifier classes (using the -- syntax) for any alternate styles or states that a component might have. For example, .cta--large for a bigger button, .card--highlighted for a highlighted version of a card, or state classes like .is-open, .is-active for interactive states. This helps with scalability because as your design grows, you can handle new variants without altering the base class names. It also plays well with JavaScript – e.g., your script can toggle an .is-active class on a modal to show/hide it.
I use as clear naming as possible. For spacing I the actual px value as name. 24px is named 24. This makes it easy to understand what value to pick and also see in the side panel what value you have chosen. I also don't seperate margin and padding. But Gap is in its own group.
These classes control the typography across the site, providing consistent sizing and styling for different text contexts.
Each text style serves a specific purpose:
Display – Large, impactful text for hero sections and major page headers. Use when you need maximum visual presence.
Heading – Structured headings for sections and content hierarchy. Use for titles, section headers, and any text that organizes content.
Copy – Body text for paragraphs and general content. Use for readable, longer-form text.
Label – Small, functional text for UI elements like form labels, captions, and metadata.
Eyebrow – Uppercase accent text that sits above headings to provide context or categorization.
Example Usage:Use u-display-96 for a large hero headline, u-heading-32 for a section title, or u-copy-18 for body paragraphs. The number in each class name represents the font size in pixels.
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
These classes control the typography across the site, providing consistent sizing and styling for different text contexts.
Each text style serves a specific purpose:
Display – Large, impactful text for hero sections and major page headers. Use when you need maximum visual presence.
Heading – Structured headings for sections and content hierarchy. Use for titles, section headers, and any text that organizes content.
Copy – Body text for paragraphs and general content. Use for readable, longer-form text.
Label – Small, functional text for UI elements like form labels, captions, and metadata.
Eyebrow – Uppercase accent text that sits above headings to provide context or categorization.
Example Usage:Use u-display-96 for a large hero headline, u-heading-32 for a section title, or u-copy-18 for body paragraphs. The number in each class name represents the font size in pixels.
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
At solmen va
esser necessi
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
consetetur sadipscing elitr,
sed diam nonumy eirmod
esser necessi
esser necessi
esser necessi
esser necessi
esser necessi
These classes control text alignment and flexbox alignment at different breakpoints, allowing for responsive layout adjustments.
Each alignment class targets a specific breakpoint:
Desktop – Applies alignment on larger screens only.
Tablet – Applies alignment from tablet breakpoint and below.
Landscape – Applies alignment from landscape breakpoint and below.
Mobile – Applies alignment on mobile screens only.
Available alignment types:
Text center – Centers text horizontally within its container.
Flex vertical center – Centers content vertically using flexbox.
Align right – Aligns content to the right.
Themes control the color palette of a section. Apply a theme class like u-theme-dark to a parent element, and all components inside automatically use the right colors.
Depending on the type of elements the project contains, the theme will change the colors of all of them. In the variable panel the different variables are connected to each element type being surface, text color, button color etc.
What’s a Rich Text element?
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.
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.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Static and dynamic content editing Static and dynamic content editingStatic and dynamic content editing
- just drop it into any page and begin editing.
- just drop it into any page and begin editing.just drop it into any page and begin editing.
- just drop it into any page and begin editing.
- just drop it into any page and begin editing.
- just drop it into any page and begin editing.just drop it into any page and begin editing.
- just drop it into any page and begin editing.
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Static and dynamic content editing
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Static and dynamic content editing
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Purpose:
These classes are used to apply consistent padding to sections across the site.
They help maintain a clear and predictable vertical rhythm between content blocks.
How they work:
The left and right padding stays the same across all section classes to keep content aligned horizontally. Using design token--_sections---padding-horizontal-global. this makes it easy to change the global padding of all pages. Default is 64px on desktop, 32px on tablet and 24px on phone.
Padding top and bottom values are controlled by design tokens like --_sections---section-64--padding-vertical. and each section have an unique padding value. u-section-64 = 64px top and bottom padding.
If you want to remove a top or bottom padding, use PB 0 for removing Padding Bottom or PT 0 for removing Padding Top. Or use a cc-custom-class
Purpose:
These classes define maximum widths for content containers to maintain a consistent layout and readable line lengths across different screen sizes.
How they work:
Each class sets a max-width using a CSS variable (e.g. --_constraints---1600) and ensures the element takes up the full width of its container up to that maximum.
Example Usage:
Use u-constraint-1200 to restrict content width to 1200px (or equivalent rem), while still being fluid inside smaller viewports.
Use u-constraint-[value] to apply a specific max width.
Use u-constraint-ce-[value] if you want to center it horizontally.
Use u-content-constraint for the most common constraint value used across all elements like navigation and footer and page content.
Purpose:
These classes control the spacing (gaps) between elements in a vertical content stack. They're used to create consistent rhythm and whitespace across your design.
How they work:
Each class uses a CSS variable (e.g. --_sizes---64) to apply grid-column-gap and grid-row-gap in a grid layout.
They are set to display: grid with a single column, so spacing is handled automatically between items.
This also gives you the ability to align and justify individual content without affecting other content with the same class name making it a very flexible system.
Example Usage:
Use u-content-spacer-64 to apply 64px (or rem equivalent) spacing between stacked elements.
It keeps the vertical rhythm consistent without needing manual margins.
Purpose:
These utility classes provide consistent spacing between flex items using CSS gap property. They eliminate the need for margins on individual flex items and create uniform spacing automatically, making flex layouts cleaner and more predictable.
How they work:
Each class applies both column-gap and row-gap using predefined CSS variables (e.g. --_sizes---16 for 16px spacing) and sets display: flex. The gap property handles spacing between items regardless of flex direction, wrapping, or alignment.
Class Reference:
u-flex-gap-8 u-flex-gap-12 ... u-flex-gap-96
How they work:
The gap values correspond to your spacing scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, and 96px. Gap applies to both horizontal and vertical spacing, so it works whether your flex items wrap to new lines or stay in a single row/column.
Best Practices:
Use flex gap instead of margins on flex items for consistent spacing. Particularly useful for button groups, navigation menus, card grids, and any flex layout where uniform spacing is needed between all items.
Purpose:
These classes create predefined column layouts with consistent spacing between items.
They’re used to quickly structure content into 1, 2, 3, or more columns without writing custom grid styles each time.
How they work:
Each class sets up a CSS grid with a specific number of columns (e.g. 2 columns for ._2-column-grid---32) and a defined gap using a CSS variable (like --_sizes---32 for 32px spacing).
Example usage:
u-1-column-grid creates a single-column grid layout with no gap.
u-2-column-grid-24 sets two equal-width columns with 24px spacing.
u-3-column-grid-64 sets up three columns with wider spacing for more visual breathing room.
Purpose:
These classes are used to wrap images in a fixed aspect ratio container, helping you maintain consistent image proportions across different layouts and screen sizes.
How they work:
Each u-image-wrap-[ratio] class (like u-image-wrap-16:9 or u-image-wrap-4:5) creates a box that preserves a specific aspect ratio using padding-top and position: relative. The image inside is absolutely positioned to fill the container, using the class u-image-absolute. This ensures the image will always scale proportionally, which is especially useful for cards, galleries, or hero sections.
Purpose:
These utility classes apply fixed aspect ratios directly to images using the modern CSS aspect-ratio property. Unlike image wrap containers, these classes work directly on <img> elements to maintain consistent proportions while ensuring proper cropping and scaling.
How they work:
Each class sets a specific aspect-ratio value (e.g. aspect-ratio: 16 / 9) along with object-fit: cover and width: 100%. The image automatically scales to fill its container while maintaining the specified ratio, cropping excess content as needed to preserve proportions.
Class Reference:
u-aspect-ratio-1:1 u-aspect-ratio-5:4
Best Practices:
Use these classes when you need images to conform to specific ratios without requiring wrapper containers. Ideal for galleries, card components, and content grids where consistent image proportions are essential. The object-fit: cover ensures images fill the entire space while maintaining their aspect ratio, though some cropping may occur.
Purpose:
These classes help control stacking context (z-index) while ensuring the element remains positioned relative to its normal flow in the document. Useful when layering overlapping content like images, text blocks, buttons, or modals.
How they work:
Each class sets the element’s position to relative and applies a specific z-index value. This combination ensures the element participates in stacking but retains its normal layout context.
Class Reference:
u-relative u-relative-z2 u-relative-z4 and so on...
Best Practices:
Keep z-index values low and predictable to avoid conflicts.Only use these classes when stacking context is required. If stacking is not needed, prefer .relative.
Purpose:
These utility classes apply consistent border-radius values to elements, giving corners a softer or more defined look depending on the visual style you’re aiming for.
Class Reference:
u-radius-4 u-radius-oh-16
How they work:
Each class uses a predefined CSS variable (e.g. --_sizes---8) to apply a specific border-radius. Classes ending in -oh also apply overflow: hidden and position: relative, which is useful when you need to clip internal content (like images) to the same radius.
Best Practices:
Use -oh variants when child elements (like images) need to be clipped to the corner radius.
Purpose:
These utility classes are used to make elements span the full width, full height, or both within their parent container. Helpful for layout containers, images, overlays, or background sections.
Class Reference:
u-full-width u-fulll-height u-full-width-height
How they work:
Each class applies width and/or height at 100%. When used together with position: absolute or relative, they enable layering or coverage patterns often used in hero sections, modals, and image masks.
Purpose:
These classes control how overflowing content is handled, especially useful for preventing scrollbars, hiding visual overflow, or managing animations and layout shifts across breakpoints.
How they work:
Each class applies overflow: clip, a more modern alternative to overflow: hidden. It clips content that overflows the element’s box without adding scrollbars. Each class is scoped to a specific breakpoint or device size.
Class Reference:
u-overflow-clip-desktop Applies overflow: clip on desctop and down to mobile
u-overflow-clip-desktop-only – Applies overflow: clip only on desktop (reverts on smaller breakpoints)
u-overflow-clip-tablet – Applies overflow: clip on tablet and down
u-overflow-clip-tablet-only – Applies overflow: clip only on tablet
And so on...
Purpose:
These classes apply fixed opacity values to elements, allowing you to quickly control visibility, layering, and emphasis. They’re commonly used for backgrounds, text fades, hover states, or subtle visual hierarchy.
How they work:
Each class sets a specific opacity value on the element. Lower values make the element more transparent, while higher values maintain visibility with soft blending effects.
Class referance:
u-opacity-90
u-opacity-80
...
u-opacity-10
Purpose:
These utility classes control element visibility across different device breakpoints, allowing you to show or hide content based on screen size. Essential for creating responsive designs where certain elements should only appear on specific devices.
How they work:
Each class uses display: none or display: block with media queries to control visibility. Hide classes make elements invisible at specified breakpoints, while show classes make elements visible only at their target breakpoint.
Class Reference:
Hide Classes: u-hide u-hide-desktop-only u-hide-tablet u-hide-landscape u-hide-mobile
Show Classes: u-show-desktop u-show-tablet u-show-landscape u-show-mobile
Breakpoint Logic:
u-hide — Hides element at all screen sizesu-hide-desktop-only — Hides element on desktop and show them again on tablet and down.
u-hide-tablet — Hides on tablet and smaller screens
u-hide-landscape — Hides on landscape (mobile landscape) and smaller screens
u-hide-mobile — Hides on mobile portrait only
u-show-desktop — Shows only on desktop (hidden on tablet and below)
u-show-tablet — Shows only on tablet (hidden on desktop and mobile)
u-show-landscape — Shows only on mobile landscape (hidden on desktop, tablet, and mobile portrait)
u-show-mobile — Shows only on mobile portrait (hidden on all larger screens)
Best Practices:
Use these classes to optimize content for different screen sizes rather than cramming everything into mobile viewports. Consider performance implications when hiding large images or complex elements rather than not loading them at all.
Purpose:
These utility classes create horizontal divider lines with consistent styling across your interface. They're used for visual separation between content sections, in navigation menus, or as decorative elements to improve content hierarchy and readability.
How they work:
Each class creates a full-width horizontal line using CSS height, background-color, and width: 100%. The line thickness is controlled by CSS variables from your spacing scale, and color is set to either pure black or white for maximum contrast.
Class Reference:
u-line-black-1 u-line-black-1.5 u-line-white-1 u-line-white-1.5
Creating Custom Shades:
Combine line classes with opacity utilities to achieve different intensities.
For example:
u-line-black-1 + u-opacity-20 creates a light gray divider
u-line-white-1 + u-opacity-60 creates a semi-transparent white line
This approach gives you precise control over line prominence without needing separate color classes
Best Practices:
Use 1px lines for subtle content separation and 1.5px lines when you need more visual weight. Combine with opacity classes rather than creating multiple color variants, as this maintains consistency with your design system while providing flexibility.
Purpose:
These utility classes control text wrapping and line breaks at specific breakpoints, allowing you to create responsive typography that flows naturally across different screen sizes. Essential for headlines and text blocks that need different line break behavior on desktop vs mobile.
How they work:
Each class wraps text content in a <span> element and uses display: block or display: inline with media queries to force or prevent line breaks at targeted breakpoints. When set to block, the text creates a new line; when inline, it continues on the same line.
Breakpoint Behavior:
u-linebreak-desktop-only — Forces line break only on desktop, text flows inline on smaller screens
u-linebreak-tablet — Creates line break on tablet and smaller screens
u-linebreak-landscape — Forces line break on mobile landscape and smaller screens
u-linebreak-mobile — Creates line break on mobile portrait
Usage Pattern:
Wrap the portion of text where you want the conditional break:
<h1>Long headline text <span class="Linebreak Block Desktop Only">that breaks here on desktop</span> but flows on mobile</h1>
Best Practices:
Use these classes to optimize headline readability across devices. Desktop screens can accommodate longer lines, while mobile often needs shorter, more digestible text chunks. Apply breaks strategically to maintain meaning and visual hierarchy at each breakpoint.
consectetur adipiscing elit, sed do eiusmod tempor incididunt.
consectetur adipiscing elit, sed do eiusmod tempor incididunt.
consectetur adipiscing elit, sed do eiusmod tempor incididunt.
consectetur adipiscing elit, sed do eiusmod tempor incididunt.
consectetur adipiscing elit, sed do eiusmod tempor incididunt.
—
—
These classes control how text wraps within its container, allowing for improved typography and layout control.
wrap – Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value.
nowrap – Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line.
balance – Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six or less for Chromium and ten or less for Firefox).
pretty – Results in the same behavior as wrap, except that the user agent will use a slower algorithm that favors better layout over speed. This is intended for body copy where good typography is favored over performance (for example, when the number of orphans should be kept to a minimum).
stable – Results in the same behavior as wrap, except that when the user is editing the content, the lines that come before the lines they are editing remain static rather than the whole block of text re-wrapping.
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.
Heading
Curtain Title
Use this on all cards so it's more informative for screen readers. Make this into a component.
The linkblock will cover any card set to relative. Some text inside the component can be very descriptive. This makes screen readers read the descriptive text and not the image alt text or all the other information in a card.