Variables
SML uses Webflow variables to manage typography, colors, and spacing throughout a website.
These variables provide the foundation for the project's styling and should be adjusted to match the design before building pages.
Typography
The typ collection controls font families, heading sizes, text sizes, and line heights.
SML separates the values used to configure typography from the calculated values that determine the final font sizes.
Font families
Two variables control the fonts used throughout the website:
- font-headline — The font family used for headings.
- font-body — The font family used for regular text.
Start by adding the fonts required by the design to Webflow.
Then update these variables to reference the corresponding font families.
If the design uses the same font for headings and body text, both variables can reference that font.
Heading and text sizes
SML provides six heading sizes, H1 through H6, and six regular text sizes, from text-xxl to text-xs.
Each size has three associated variables.
For example, H1 contains:
Variable
Purpose
Used for
H1
Calculated font size
Referenced by CSS to set the final font size, including browser font-size adjustments.
H1 — size
Base font size
Defines the font size in rem, based on the design.
H1 — line height
Line-height ratio
Defines the line height relative to the font size.
When matching a design, adjust the size and line height variables. Leave the calculated variable unchanged.
Responsive values
Font sizes and line heights can be configured independently for desktop, tablet, and mobile.
These are represented by the Base, Tablet, and Mobile modes in Webflow's Variables panel.
Start by matching the desktop typography, then adjust the tablet and mobile values where necessary.
Font sizes use rem, while line heights use unitless ratios. For example, a line height of 1.25 produces a line height equal to 125% of the font size.
Typography scaling
SML combines these variables with its responsive typography system.
On desktop, the root font size scales with the viewport. On tablet and mobile, it uses fixed base sizes.
The calculated typography variables also account for visitors who increase their browser's default font size, while regular body text maintains a minimum size of 16px.
By adjusting the base size variables, developers can match a project's design without changing this underlying behavior.
The dedicated Typography documentation explains the scaling system and its calculations in more detail.
Colors
The color collection contains a set of base colors alongside primary and secondary color scales.
Base colors
Base colors cover commonly used values such as dark, grey, white, transparent, and focus.
Adjust these to match the project's requirements.
Primary and secondary colors
SML includes primary and secondary color scales, with values ranging from 025 to 900.
Lower values represent lighter shades, while higher values represent darker shades.
For example, primary-500 might represent the main brand color, with lighter and darker values available for backgrounds, borders, and other styling variations.
When adapting SML to a design:
- Replace the existing colors with the project's palette.
- Adjust the available shades to match the design.
- Remove unused colors.
- Add additional variables when necessary.
Keep the naming consistent, and check whether a variable is used elsewhere before removing it.
Spacing
The spacing collection controls distances used throughout the website.
It contains a general spacing scale, gap values, and a few layout-specific variables.
All spacing values use rem and follow SML's responsive layout scaling. This allows spacing to scale with the viewport on desktop, while tablet and mobile use fixed base sizes.
Spacing scale
The general spacing scale ranges from xxxs to xxl.
Adjust these values to reflect the spacing system used in the design.
All spacing values can be configured independently for desktop, tablet, and mobile.
Gaps
SML provides three predefined gap sizes:
- gap-s
- gap-m
- gap-l
These control the spacing between elements inside layouts such as rows and columns.
Their values can be adjusted for each breakpoint.
Layout-specific variables
Two additional variables control specific parts of the layout:
- page-padding — The horizontal spacing between page content and the viewport.
- navbar-height — The height used for the navigation.
Adjust these to match the project's layout requirements.
