Size #

Size tokens define the width and height of components, ensuring consistent proportions across the system.
They provide predictable sizing steps that help maintain alignment and balance in layouts.

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-size-scale) * <rem-value>).

Scale #

The global size multiplier --afp-size-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 #

Sizes can also be applied using utility-style CSS classes. These classes map directly to the underlying size tokens and are generated at build time.

The syntax follows a simple pattern: afp-{context}:{size}

Example #

<div 
  class="
    afp-background:surface-elevated
    afp-width:size-3xl
    afp-height:size-3xl
  "
>
</div>

<div 
  class="
    afp-background:surface-elevated
    afp-width:size-3xl
    afp-height:size-3xl
  "
>
</div>

<div 
  class="
    afp-background:surface-elevated
    afp-width:size-3xl
    afp-height:size-3xl
  "
>
</div>

<div 
  class="
    afp-background:surface-elevated
    afp-width:size-3xl
    afp-height:size-3xl
  "
>
</div>

In this example:

• The afp-width:size-3xl class sets the element's width to --afp-size-3xl.
• The afp-height:size-3xl class sets the element's height to --afp-size-3xl.

Contexts #