This rune is part of @refrakt-md/design. Install with npm install @refrakt-md/design and add "@refrakt-md/design" to the plugins array in your refrakt.config.json.

Spacing

Displays design tokens for spacing, border radius, and shadows. Content is organized by ## sections — Spacing, Radius, and Shadows — with name: value list items in each.

Not the spacing attribute. This rune renders a design system's spacing scale as documentation. The universal spacing attribute — which adjusts the rhythm around any block rune — is a different thing with the same name; see Surfaces.

Full token set

A complete spacing system with scale, radii, and shadows.

{% spacing title="Design Tokens" %}
## Spacing
- unit: 4px
- scale: 0, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32

## Radius
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

## Shadows
- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.1)
- lg: 0 10px 15px rgba(0,0,0,0.1)
{% /spacing %}

<section data-rune="spacing" data-rune-fields="{&quot;title&quot;:&quot;Design Tokens&quot;}">
  <h3 data-name="title">Design Tokens</h3>
  <div data-name="section">
    <h4 data-name="section-title">Spacing</h4>
    <div data-name="scale">
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 2%"></div>
        <span data-name="scale-label">
          0px
          <span data-name="scale-multiplier">0×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 3.125%"></div>
        <span data-name="scale-label">
          1px
          <span data-name="scale-multiplier">0.25×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 6.25%"></div>
        <span data-name="scale-label">
          2px
          <span data-name="scale-multiplier">0.5×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 9.375%"></div>
        <span data-name="scale-label">
          3px
          <span data-name="scale-multiplier">0.75×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 12.5%"></div>
        <span data-name="scale-label">
          4px
          <span data-name="scale-multiplier">1×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 18.75%"></div>
        <span data-name="scale-label">
          6px
          <span data-name="scale-multiplier">1.5×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 25%"></div>
        <span data-name="scale-label">
          8px
          <span data-name="scale-multiplier">2×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 37.5%"></div>
        <span data-name="scale-label">
          12px
          <span data-name="scale-multiplier">3×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 50%"></div>
        <span data-name="scale-label">
          16px
          <span data-name="scale-multiplier">4×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 75%"></div>
        <span data-name="scale-label">
          24px
          <span data-name="scale-multiplier">6×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 100%"></div>
        <span data-name="scale-label">
          32px
          <span data-name="scale-multiplier">8×</span>
        </span>
      </div>
    </div>
  </div>
  <div data-name="section">
    <h4 data-name="section-title">Radius</h4>
    <div data-name="radii">
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 4px"></div>
        <span data-name="radius-label">sm</span>
        <span data-name="radius-value">4px</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 8px"></div>
        <span data-name="radius-label">md</span>
        <span data-name="radius-value">8px</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 12px"></div>
        <span data-name="radius-label">lg</span>
        <span data-name="radius-value">12px</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 9999px"></div>
        <span data-name="radius-label">full</span>
        <span data-name="radius-value">9999px</span>
      </div>
    </div>
  </div>
  <div data-name="section">
    <h4 data-name="section-title">Shadows</h4>
    <div data-name="shadows">
      <div data-name="shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)"></div>
        <span data-name="shadow-label">sm</span>
      </div>
      <div data-name="shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1)"></div>
        <span data-name="shadow-label">md</span>
      </div>
      <div data-name="shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 10px 15px rgba(0,0,0,0.1)"></div>
        <span data-name="shadow-label">lg</span>
      </div>
    </div>
  </div>
</section>

Design Tokens

Spacing

0px0×

1px0.25×

2px0.5×

3px0.75×

4px1×

6px1.5×

8px2×

12px3×

16px4×

24px6×

32px8×

Radius

sm4px

md8px

lg12px

full9999px

Shadows

<section class="rf-spacing rf-spacing--Design Tokens" data-title="Design Tokens" data-elevation="flat" data-rune="spacing" data-density="full">
  <h3 data-name="title" class="rf-spacing__title" data-section="title">Design Tokens</h3>
  <div data-name="section" class="rf-spacing__section">
    <h4 data-name="section-title" class="rf-spacing__section-title">Spacing</h4>
    <div data-name="scale" class="rf-spacing__scale">
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 2%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          0px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 3.125%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          1px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.25×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 6.25%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          2px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.5×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 9.375%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          3px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.75×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 12.5%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          4px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">1×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 18.75%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          6px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">1.5×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 25%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          8px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">2×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 37.5%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          12px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">3×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 50%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          16px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">4×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 75%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          24px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">6×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 100%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          32px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">8×</span>
        </span>
      </div>
    </div>
  </div>
  <div data-name="section" class="rf-spacing__section">
    <h4 data-name="section-title" class="rf-spacing__section-title">Radius</h4>
    <div data-name="radii" class="rf-spacing__radii">
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 4px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">sm</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">4px</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 8px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">md</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">8px</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 12px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">lg</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">12px</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 9999px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">full</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">9999px</span>
      </div>
    </div>
  </div>
  <div data-name="section" class="rf-spacing__section">
    <h4 data-name="section-title" class="rf-spacing__section-title">Shadows</h4>
    <div data-name="shadows" class="rf-spacing__shadows">
      <div data-name="shadow-item" class="rf-spacing__shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)" class="rf-spacing__shadow-sample"></div>
        <span data-name="shadow-label" class="rf-spacing__shadow-label">sm</span>
      </div>
      <div data-name="shadow-item" class="rf-spacing__shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1)" class="rf-spacing__shadow-sample"></div>
        <span data-name="shadow-label" class="rf-spacing__shadow-label">md</span>
      </div>
      <div data-name="shadow-item" class="rf-spacing__shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 10px 15px rgba(0,0,0,0.1)" class="rf-spacing__shadow-sample"></div>
        <span data-name="shadow-label" class="rf-spacing__shadow-label">lg</span>
      </div>
    </div>
  </div>
</section>

Spacing scale only

Show just the spacing scale without radii or shadows.

{% spacing title="Spacing Scale" %}
## Spacing
- unit: 8px
- scale: 0, 1, 2, 3, 4, 6, 8, 12, 16
{% /spacing %}

<section data-rune="spacing" data-rune-fields="{&quot;title&quot;:&quot;Spacing Scale&quot;}">
  <h3 data-name="title">Spacing Scale</h3>
  <div data-name="section">
    <h4 data-name="section-title">Spacing</h4>
    <div data-name="scale">
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 2%"></div>
        <span data-name="scale-label">
          0px
          <span data-name="scale-multiplier">0×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 6.25%"></div>
        <span data-name="scale-label">
          1px
          <span data-name="scale-multiplier">0.125×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 12.5%"></div>
        <span data-name="scale-label">
          2px
          <span data-name="scale-multiplier">0.25×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 18.75%"></div>
        <span data-name="scale-label">
          3px
          <span data-name="scale-multiplier">0.375×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 25%"></div>
        <span data-name="scale-label">
          4px
          <span data-name="scale-multiplier">0.5×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 37.5%"></div>
        <span data-name="scale-label">
          6px
          <span data-name="scale-multiplier">0.75×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 50%"></div>
        <span data-name="scale-label">
          8px
          <span data-name="scale-multiplier">1×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 75%"></div>
        <span data-name="scale-label">
          12px
          <span data-name="scale-multiplier">1.5×</span>
        </span>
      </div>
      <div data-name="scale-item">
        <div data-name="scale-bar" style="width: 100%"></div>
        <span data-name="scale-label">
          16px
          <span data-name="scale-multiplier">2×</span>
        </span>
      </div>
    </div>
  </div>
</section>

Spacing Scale

Spacing

0px0×

1px0.125×

2px0.25×

3px0.375×

4px0.5×

6px0.75×

8px1×

12px1.5×

16px2×

<section class="rf-spacing rf-spacing--Spacing Scale" data-title="Spacing Scale" data-elevation="flat" data-rune="spacing" data-density="full">
  <h3 data-name="title" class="rf-spacing__title" data-section="title">Spacing Scale</h3>
  <div data-name="section" class="rf-spacing__section">
    <h4 data-name="section-title" class="rf-spacing__section-title">Spacing</h4>
    <div data-name="scale" class="rf-spacing__scale">
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 2%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          0px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 6.25%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          1px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.125×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 12.5%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          2px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.25×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 18.75%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          3px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.375×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 25%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          4px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.5×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 37.5%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          6px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">0.75×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 50%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          8px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">1×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 75%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          12px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">1.5×</span>
        </span>
      </div>
      <div data-name="scale-item" class="rf-spacing__scale-item">
        <div data-name="scale-bar" style="width: 100%" class="rf-spacing__scale-bar"></div>
        <span data-name="scale-label" class="rf-spacing__scale-label">
          16px
          <span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">2×</span>
        </span>
      </div>
    </div>
  </div>
</section>

Radius and shadows

Document visual tokens without a spacing scale.

{% spacing title="Visual Tokens" %}
## Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- pill: 9999px

## Shadows
- subtle: 0 1px 2px rgba(0,0,0,0.04)
- card: 0 4px 12px rgba(0,0,0,0.08)
- elevated: 0 12px 24px rgba(0,0,0,0.12)
{% /spacing %}

<section data-rune="spacing" data-rune-fields="{&quot;title&quot;:&quot;Visual Tokens&quot;}">
  <h3 data-name="title">Visual Tokens</h3>
  <div data-name="section">
    <h4 data-name="section-title">Radius</h4>
    <div data-name="radii">
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 0"></div>
        <span data-name="radius-label">none</span>
        <span data-name="radius-value">0</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 4px"></div>
        <span data-name="radius-label">sm</span>
        <span data-name="radius-value">4px</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 8px"></div>
        <span data-name="radius-label">md</span>
        <span data-name="radius-value">8px</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 16px"></div>
        <span data-name="radius-label">lg</span>
        <span data-name="radius-value">16px</span>
      </div>
      <div data-name="radius-item">
        <div data-name="radius-sample" style="border-radius: 9999px"></div>
        <span data-name="radius-label">pill</span>
        <span data-name="radius-value">9999px</span>
      </div>
    </div>
  </div>
  <div data-name="section">
    <h4 data-name="section-title">Shadows</h4>
    <div data-name="shadows">
      <div data-name="shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 1px 2px rgba(0,0,0,0.04)"></div>
        <span data-name="shadow-label">subtle</span>
      </div>
      <div data-name="shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 4px 12px rgba(0,0,0,0.08)"></div>
        <span data-name="shadow-label">card</span>
      </div>
      <div data-name="shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 12px 24px rgba(0,0,0,0.12)"></div>
        <span data-name="shadow-label">elevated</span>
      </div>
    </div>
  </div>
</section>

Visual Tokens

Radius

none0

sm4px

md8px

lg16px

pill9999px

Shadows

subtle

card

elevated

<section class="rf-spacing rf-spacing--Visual Tokens" data-title="Visual Tokens" data-elevation="flat" data-rune="spacing" data-density="full">
  <h3 data-name="title" class="rf-spacing__title" data-section="title">Visual Tokens</h3>
  <div data-name="section" class="rf-spacing__section">
    <h4 data-name="section-title" class="rf-spacing__section-title">Radius</h4>
    <div data-name="radii" class="rf-spacing__radii">
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 0" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">none</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">0</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 4px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">sm</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">4px</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 8px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">md</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">8px</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 16px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">lg</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">16px</span>
      </div>
      <div data-name="radius-item" class="rf-spacing__radius-item">
        <div data-name="radius-sample" style="border-radius: 9999px" class="rf-spacing__radius-sample"></div>
        <span data-name="radius-label" class="rf-spacing__radius-label">pill</span>
        <span data-name="radius-value" class="rf-spacing__radius-value">9999px</span>
      </div>
    </div>
  </div>
  <div data-name="section" class="rf-spacing__section">
    <h4 data-name="section-title" class="rf-spacing__section-title">Shadows</h4>
    <div data-name="shadows" class="rf-spacing__shadows">
      <div data-name="shadow-item" class="rf-spacing__shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 1px 2px rgba(0,0,0,0.04)" class="rf-spacing__shadow-sample"></div>
        <span data-name="shadow-label" class="rf-spacing__shadow-label">subtle</span>
      </div>
      <div data-name="shadow-item" class="rf-spacing__shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 4px 12px rgba(0,0,0,0.08)" class="rf-spacing__shadow-sample"></div>
        <span data-name="shadow-label" class="rf-spacing__shadow-label">card</span>
      </div>
      <div data-name="shadow-item" class="rf-spacing__shadow-item">
        <div data-name="shadow-sample" style="box-shadow: 0 12px 24px rgba(0,0,0,0.12)" class="rf-spacing__shadow-sample"></div>
        <span data-name="shadow-label" class="rf-spacing__shadow-label">elevated</span>
      </div>
    </div>
  </div>
</section>

Attributes

Attribute	Type	Required	Description
`title`	`string`	—	Heading displayed above the spacing, radii, and shadow sections.

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`prominence`	`"quiet" \| "normal" \| "prominent" \| "display"`	—	Section-header emphasis (only on page-section-header family runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Spacing

Full token set

Design Tokens

Spacing

Radius

Shadows

Spacing scale only

Spacing Scale

Spacing

Radius and shadows

Visual Tokens

Radius

Shadows

Attributes

Universal attributes