Spacing

Use tokens in code

<section className="tpz-p-m">Medium padded section</section>

<div className="tpz-p-s">
  <h2>Small padded card</h2>
</div>

padding: var(--tpz-padding-medium);
gap: var(--tpz-padding-small);
margin-bottom: var(--tpz-padding-large);

<div style={{ padding: "var(--tpz-padding-large)" }}>
  Large padded container
</div>

Change token values using the Engine

Every project has its own Tokens Engine. Changes are saved to draft automatically and take effect instantly. Use Publish Live to display the changes in the deployed site.
Read more about the engine

Change token values using the Editor

Spacing category is part of a tokens features and will display in your editor after enabling the tokens from the Tokens Features dashboard tab or via your project Tokens Engine. In the editor, open the Spacing panel to set padding values in any of the padding sizes. You can set one size for all elements using, for example, the extra small padding class, across your entire project by simply selecting a size and adjusting its value. Read more about the editors here:Live Editor|Local Editor

Full spacing tokens