CSS Spacing Variables
The spacing variables, defined within the :root CSS selector, ensure consistent spacing throughout your CSS stylesheets.
| Variable | Description | Default Value |
|---|---|---|
--S0 | Base size, often used for spacing and rhythm | 0px |
--S1 | Smallest size, used for subtle spacing | clamp(3px, 3px + 0vi, 3px) |
--S2 | Extra small size, used for minimal spacing | clamp(5px, 4.6522px + 0.1087vi, 6px) |
--S3 | Small size, used for general spacing | clamp(8px, 7.6522px + 0.1087vi, 9px) |
--S4 | Medium size, used for moderate spacing | clamp(10px, 9.3043px + 0.2174vi, 12px) |
--S5 | Large size, used for significant spacing | clamp(15px, 13.9565px + 0.3261vi, 18px) |
--S6 | Extra large size, used for major spacing | clamp(20px, 18.6087px + 0.4348vi, 24px) |
--S7 | Very large size, used for large sections | clamp(30px, 27.913px + 0.6522vi, 36px) |
--S8 | Extra very large size, used for major sections | clamp(40px, 37.2174px + 0.8696vi, 48px) |
--S9 | Largest size, used for hero sections | clamp(50px, 46.5217px + 1.087vi, 60px) |