Spacing

Astro uses a numeric, linear spacing scale with a

var(--)

base-spacing-unit token.

TRY: to use the spacing scale when applying things like margin, padding, or gap.

TRY NOT: to use the spacing scale for things like dimension (width/height).

Your UI will break if you use our dynamic scaling feature.
You don't gain anything.
Dimension is a separate concept.
Its okay to use one off values sometimes

TRY: to find the nearest step

If you have 34px, first try

var(--)

spacing-8, then try

var(--)

spacing-9. If nothing available fits, reevaluate why you need 32px and consider using a one off. Caution with One Off Values

TRY NOT: to add your own steps

We give a generous amount of steps at smaller sizes
The step constraint is how the spacing system creates consistency. Too many steps will sacrifice consistency.
Use caution

var(--)

spacing-00px / 0rem
var(--)

spacing-px1px / 0.0625rem
var(--)

spacing-0502px / 0.125rem
var(--)

spacing-14px / 0.25rem
var(--)

spacing-0156px / 0.375rem
var(--)

spacing-28px / 0.5rem
var(--)

spacing-02510px / 0.625rem
var(--)

spacing-312px / 0.75rem
var(--)

spacing-03514px / 0.875rem
var(--)

spacing-416px / 1rem
var(--)

spacing-520px / 1.25rem
var(--)

spacing-624px / 1.5rem
var(--)

spacing-728px / 1.75rem
var(--)

spacing-832px / 2rem
var(--)

spacing-936px / 2.25rem
var(--)

spacing-1040px / 2.5rem
var(--)

spacing-1144px / 2.75rem
var(--)

spacing-1248px / 3rem
var(--)

spacing-1456px / 3.5rem
var(--)

spacing-1664px / 4rem
var(--)

spacing-2080px / 5rem
var(--)

spacing-2496px / 6rem
var(--)

spacing-28112px / 7rem
var(--)

spacing-32128px / 8rem
var(--)

spacing-36144px / 9rem
var(--)

spacing-40160px / 10rem
var(--)

spacing-44176px / 11rem
var(--)

spacing-48192px / 12rem
var(--)

spacing-52208px / 13rem
var(--)

spacing-56224px / 14rem
var(--)

spacing-60240px / 15rem
var(--)

spacing-64256px / 16rem
var(--)

spacing-72288px / 18rem
var(--)

spacing-80320px / 20rem
var(--)

spacing-96384px / 24rem