Space #

Spacing tokens provide a consistent rhythm and visual structure across the design system.
They are defined in rem units so that all values scale proportionally with the root font size.

Custom Properties #

These properties use rem units in order to scale proportionately with the root font size.
All values are multiplied internally by calc(var(--afp-space-scale) * <rem-value>).

Scale #

The global spacing multiplier --afp-space-scale lets you adjust all spacing values at once.
By default, this value is set to 1.

Each spacing step is calculated from this multiplier, with the resulting pixel values (based on a 16px root size) shown in the table below.

CSS Classes #

Space tokens can be applied using utility-style CSS classes to control spacing such as padding and margin. These classes are generated at build time and map directly to the space tokens defined above.

The syntax follows the pattern used across the design system: afp-{context}:space-{space}

Example #

<div class="afp-padding:space-m afp-background:surface-elevated">
  <div class="afp-margin-bottom:space-s">
    Example
  </div>
</div>

<div class="afp-padding:space-m afp-background:surface-elevated">
  <div class="afp-margin-bottom:space-s">
    Example
  </div>
</div>

<div class="afp-padding:space-m afp-background:surface-elevated">
  <div class="afp-margin-bottom:space-s">
    Example
  </div>
</div>

<div class="afp-padding:space-m afp-background:surface-elevated">
  <div class="afp-margin-bottom:space-s">
    Example
  </div>
</div>

This applies:

• padding: var(--afp-space-m)
• margin-bottom: var(--afp-space-s)

Contexts #

Padding #

Margin #