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.‍

Build with Components
Compose pages with structured components.‍

Extend Without Breaking
Add variations without changing structure.‍

Combine Classes and Components
Working together for layout and content.

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.

Once the setup aligns with the design, building with components begins.

New pages are created from the starter template. This ensures the framework stylesheet is loaded together with a separate stylesheet for site-specific styles. The framework layer should remains untouched.

Layouts start with the section component. It can be opened up to later be turned into a layout component for marketing teams.

Within a section, layout is introduced through row and column components. Rows define the horizontal structure. Columns determine placement.

Content components are placed inside those columns. Components for headings, paragraphs, rich text blocks, buttons, images, and spacers live within this defined structure.

When alignment or grouping is needed, wrapper components such as text alignment or box components are used. This keeps structural decisions separate from content styling.

A consistent hierarchy across each project:
Section → Row → Column → Content

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

Main navigation component
The navigation is structured through one primary CMS collection and two nested collections for link groups and sub links.

Because hierarchy is defined in CMS rather than in layout, the marketing team can adjust ordering, grouping and expansion without altering the component structure.

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.

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.