Best practices for a spacing design system?

Ask us anything How do I?
1

I am wondering the best way to have consistent spacing within a project.

With colors, you can easily predefine them, and if you change the source, it changes everywhere else. I would like to do the same for spacing.

I have everything mapped out,

--spacing-none: 0px;
--spacing-xxs: 2px;
--spacing-xs: 4px;
--spacing-sm: 6px;
--spacing-md: 8px;
--spacing-lg: 12px;

etc

but I’m not sure the best way to go about referencing everything. Should I make each individual item a formula that I can bind to? Should I make it a variable that I do a key lookup to? If so, would it slow the site down since it’s having to calculate all the spacing values?

I’m just not sure the best solution… :confused: I would like this to also work for things other than spacing, like having consistent container widths and such within a class.

2

We have some plans on creating spacing styles, but it won’t be very soon. You can use the CSS variables with custom code, but I would say for now you should probably just keep in mind your values, but just input them for now.