All sizes in Small Medium Large are set in rem and scale responsively.

At a screen width of 1440px, matching the design, 1rem equals 16px. It scales fluidly between 1680px and down to tablet size. At tablet, 1rem settles at 14px. On mobile, it returns to 16px.

This keeps the system consistent across breakpoints while allowing the layout to adapt naturally within each range.

Next, we look at how a build takes shape.

Align Global Variables
Set typography, color, and spacing.‍

Refine the Stylesheets
Reflect those decisions in the style layer.‍

Extend Without Breaking
Expand the library with new components and add variants and properties to the existing ones.

Execute with Claude
Give Claude an approved design and let it construct the layout using the existing component.

Build with Components
Compose and refine pages with structured components.‍

Combine Classes and Components
Use classes where needed, without breaking the component system.

The system is structured around three global variable sheets, typography, color, and spacing.

They function as the source of truth for the entire build, defining scale, rhythm, and contrast at a foundational level.
‍

Typography
The typ sheet defines font families, heading scale, text sizes, and line-height ratios.

Color
The color sheet defines base contrast and tonal scales. Naming remains intact while values adapt per project.
‍

Spacing
The spacing sheet defines proportional rhythm. Gap values determine the distance between columns. Page padding defines the horizontal relationship between content and screen.

Once variables are aligned, the stylesheets reflect those decisions.

If sizes, weights, or color values are added or removed at the variable level, corresponding classes need to be introduced or cleaned up here, while the naming logic remains intact.

Base elements such as buttons and form controls are styled within the elements sheet, ensuring visual consistency.

As variables evolve, unused classes are removed to keep the class structure clean and predictable.

SML components are extended through controlled variations rather than by changing their structure.

When extra options are needed, such as a different text color or corner radius, they’re added through small hidden helper components. These internal pieces expose selectable variants in the parent component’s settings, while their naming connects directly to the global variables.

Each option ties back to an existing token. A color like primary-500 references its matching variable. Newly added radius options such as radius-s, radius-m, and radius-l follow the same scale, keeping naming consistent across the system.

This keeps flexibility high without introducing chaos. Components gain options, but their structure stays stable. No overrides, no duplication, no class stacking.

SML is tailored to work as an execution layer for Claude inside Webflow.

First, Claude needs to create a registry of the available components, variants, slots, and properties from the Webflow project.
‍
Prompt Claude with:
‍
Build the registry for the current open Webflow project using the SML Skill.

Once the registry is in place, Claude can build from an approved design or visual reference.
‍
Upload the visual and prompt Claude with:
‍
Build this in the current open Webflow project using the SML Skill.

Claude interprets the design, maps each part to the matching SML structure, and assembles the layout with the components and properties available in the project.

The result stays native to Webflow and remains editable through the same SML variants and properties.

For the full setup and build flow, see the Execute page.

New pages start from the starter template, combining the framework foundation with project-specific styling.

Layouts are constructed through a consistent hierarchy:

Section → Row → Column → Content

Sections define structure. Rows and columns define layout. Content components such as headings, paragraphs, images, buttons, and spacers are placed within that layout.

Because the structure is predefined and consistent across projects, layouts remain stable, predictable, and easy to extend.

Because components and properties are predefined, Claude can construct layouts directly from screenshots without generating code.

The Components stylesheet page shows examples of how different layouts can be composed within this structure.

Components are the main way of building, but the class layer is always there when you need more structural control.

When layouts become more complex, or when working with CMS collection lists, rows and columns are often defined directly through classes. A collection list can act as the row, with each item functioning as a column. Inside those columns, components take care of the content.

This keeps things practical. Structure is handled through classes, while content and variations stay inside components.

It creates a natural split in how you work. Classes shape the layout. Components handle what lives inside it.

Used together, they keep builds flexible without turning messy.