Spacing Presets

Suede includes a carefully considered spacing scale that creates consistent rhythm and alignment throughout the theme. The following presets are available: 20, 30, 40, 60, 80, and 100.

{
	"settings": {
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingSizes": [
				{
					"name": "20",
					"size": "clamp(15px, 2vw, 20px)",
					"slug": "20"
				},
				{
					"name": "30",
					"size": "clamp(25px, 3vw, 30px)",
					"slug": "30"
				},
				{
					"name": "40",
					"size": "clamp(30px, 4vw, 40px)",
					"slug": "40"
				},
				{
					"name": "60",
					"size": "clamp(40px, 6vw, 60px)",
					"slug": "60"
				},
				{
					"name": "80",
					"size": "clamp(60px, 8vw, 80px)",
					"slug": "80"
				},
				{
					"name": "100",
					"size": "clamp(70px, 10vw, 100px)",
					"slug": "100"
				}
			],
			"units": [ "%", "px", "em", "rem", "vh", "vw" ]
		}
	}
}

This code yields a set of preset variables for spacing:

--wp--preset--spacing--20: clamp(15px, 2vw, 20px);
--wp--preset--spacing--30: clamp(25px, 3vw, 30px);
--wp--preset--spacing--40: clamp(30px, 4vw, 40px);
--wp--preset--spacing--60: clamp(40px, 6vw, 60px);
--wp--preset--spacing--80: clamp(60px, 8vw, 80px);
--wp--preset--spacing--100: clamp(70px, 10vw, 100px);

Fluid Spacing

Spacing values are defined in theme.json and use CSS clamp() to scale fluidly between minimum and maximum values. This approach preserves consistent proportions while adapting across different viewport sizes.