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)

Customizing Spacing Sizes

You can override these variables to match your design. For example:

Caution

Customizing spacing using the `--CS*` variables may impact the responsive layout. Default values utilize the `clamp` function to adapt spacing based on viewport size, maintaining proportions and alignment. Modifying these values might result in spacing inconsistencies.

:root {
  --CS1: 2px;
  --CS2: 4px;
  --CS3: 8px;
  --CS4: 12px;
  --CS5: 16px;
  --CS6: 24px;
  --CS7: 32px;
  --CS8: 48px;
  --CS9: 72px;
}

These customizations adjust the font sizes in your Text, Heading, and Link components.