One of the things we've explored as part of the refreshed Showcase, is a more systematic approach to a spacing grid. Instead of a variety of different variables (15, 16, 20, 44), have a neater grid system (10, 20, 30, 40) etc. We are already applying this, in a static form, across website refreshes and notably the Showcase refresh.

There may be a challenge in rolling this out, in part even if a grid system wasn't fully evolved in the Figma mockups until recently, there was one for the WP.org parent theme: https://github.com/WordPress/wporg-parent-2021/#spacing

Secondly, because rolling out new values here may end up causing some issues in other designs that leverage the existing system, such as News. A fair bit of the way, the new grid system sticks to the existing base10 increments, but the web-spacing system includes some clamp based values:

The Figma-based grid system and web-based grid system don't have to match, Figma will show static mockups, after all, whereas on the web values will need to be responsively smart to as to scale with the viewport.

But perhaps there is an opportunity to still sync up part. This codepen outlines an idea of essentialy splitting out the clamp values from the grid values, and leveraging the latter to power the former. To distill it with an example:

	// Base grid, matches Figma
	--s-04: 4px;
	--s-08: 8px;
	--s-10: 10px;
	--s-20: 20px;
	--s-30: 30px;
	--s-40: 40px;
	--s-50: 50px;
	--s-60: 60px;
	--s-70: 70px;
	--s-80: 80px;

	// Responsive spacings, web
	--3x-small: var(--s-10);
	--2x-small: var(--s-20);
	--x-small: var(--s-30);
	--medium: clamp( var(--s-40), calc(100vw / 16), var(--s-60) );
	--large: clamp( var(--s-20), calc(100vw / 18), var(--s-80) );
	--x-large: var(--s-100);
	--2x-large: clamp( var(--s-80), calc(100vw / 7), var(--s-120) );
	--3x-large: clamp( var(--s-80), calc(100vw / 7), var(--s-160) );
	--edge-space: var();

☝️ The above is just a sketch, the actual implementation and variable names I'll defer to those implementing it. But the core idea is that the base grid matches Figma, figma can use those for static non-scaling mockups, and then the web can build clamp-based responsive values based off of them. The benefit would, theoretically, be a closer link between mockups and final result.

Would this be useful?