This rune is part of @refrakt-md/design. Install with npm install @refrakt-md/design and add "@refrakt-md/design" to the packages 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.

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">
  <meta content="Design Tokens" data-field="title">
  <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-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">
  <meta content="Spacing Scale" data-field="title">
  <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-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">
  <meta content="Visual Tokens" data-field="title">
  <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-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	Default	Description
`title`	`string`	—	Section heading

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Rune Catalog

Content

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

Common attributes