Spacing

Similarly to our typography section, you can use our calculators for efficient size generation, all of which are automatically responsive. See the visual representations update in real time.

This section uses the same scaling techniques as the typography section ensuring that everything is uniform across your website.

Spacing Section

Base Settings

In this section, you can choose your base settings, such as the minimum base size, maximum base size, or even the base scale index (this is where you set which variable becomes your base, by default, this is --space-m). See the base highlighted in blue on the right.

Ratios

Just like with the typography, you can choose which kind of ratio in which your sizes change, ranging from Minor Second, Major Third, Perfect Fourth, Golden Ratio, plus many more.

Select the kind of scaling ratio

You can even click the edit button on the ratio section to toggle to manual mode for extra scaling control!

Click the edit button on the ratio section to toggle to manual mode for extra scaling control.

Manual Mode

Manual Sizing Mode

Once again, you have full control should you choose to set your sizing manually. Here, you can change the name of your variables, and change their minimum and maximum sizes.