Spacing

@acronis-platform/tokens-pd generates the full margin/padding/gap utility grammar from the design system's spacing scale (css/default.css), so both Tailwind and non-Tailwind @acronis-platform/ui-react consumers can space their layouts from the same scale instead of arbitrary values.

Scale

Each step is also a CSS custom property, --ui-gap-<step> (e.g. --ui-gap-16: 16px), for use in hand-written CSS:

.my-element {
  padding: var(--ui-gap-16);
}

Utility classes

Loading css/default.css (bundled by @acronis-platform/ui-react/styles) also ships .ui-{property}{direction}-{step} classes for every step above — usable directly in markup with no Tailwind build step:

<div className="ui-p-16 ui-gap-8">
  <span className="ui-m-4">Item</span>
</div>

The same nine directions exist for m/margin (m, mx, my, mt, mb, ml, mr, ms, me). gap only has three: gap, gap-x (column-gap), gap-y (row-gap).

A cascade note: side-specific classes (pt/pb/pl/pr/ps/pe) are generated after axis classes (px/py) in the stylesheet, so an "axis + side override" pairing works regardless of which class appears first in className:

<div className="ui-px-16 ui-ps-0" />

There's also one static, non-scale utility:

<div className="ui-mx-auto w-24" />

Tailwind

The scale is also exposed as spacing keys in the semantic Tailwind preset (tailwind/<brand>/tokens.js), namespaced gap-<step> — deliberately not a bare <step> — so it never collides with Tailwind's own default numeric spacing scale:

<div className="p-gap-16 gap-x-gap-8" />

// tailwind.config.ts
import tokens from '@acronis-platform/tokens-pd/tailwind/default/tokens.js';

export default {
  presets: [tokens],
};

Any Tailwind spacing utility accepts the gap-<step> key — p-gap-16, mx-gap-24, gap-x-gap-8, space-y-gap-4, and so on.