refrakt.md

Docs

Runes

Themes

Extend

Project

Marketing›Comparison
note

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

Comparison

Transform Markdown into structured comparison matrices. Headings become columns, list items become feature rows, and bold labels automatically align rows across columns.

Basic usage

Each ## heading defines a column. Bold text at the start of list items serves as alignment keys — items with the same bold label across columns appear in the same row.

{% comparison title="Choosing a Framework" %}

## SvelteKit

- **Learning curve** — Low, intuitive template syntax
- **Bundle size** — Compiles away the framework
- **SSR** — Built-in with adapter system
- **TypeScript** — First-class support

## Next.js

- **Learning curve** — Moderate, React knowledge required
- **Bundle size** — Medium, React runtime included
- **SSR** — Built-in with multiple strategies
- **TypeScript** — First-class support

## Astro

- **Learning curve** — Low, HTML-first approach
- **Bundle size** — Zero JS by default
- **SSR** — Built-in, island architecture
- **TypeScript** — First-class support

{% /comparison %}
<section data-field="content-section" data-rune="comparison" data-rune-fields="{&quot;layout&quot;:&quot;table&quot;}">
  <h2 class="rf-comparison__title">Choosing a Framework</h2>
  <div class="rf-comparison__table-wrapper">
    <table class="rf-comparison__table">
      <thead>
        <tr>
          <th class="rf-comparison__label-col"></th>
          <th>SvelteKit</th>
          <th>Next.js</th>
          <th>Astro</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Learning curve</th>
          <td class="rf-comparison__cell">
            <p>Low, intuitive template syntax</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Moderate, React knowledge required</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Low, HTML-first approach</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Bundle size</th>
          <td class="rf-comparison__cell">
            <p>Compiles away the framework</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Medium, React runtime included</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Zero JS by default</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">SSR</th>
          <td class="rf-comparison__cell">
            <p>Built-in with adapter system</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Built-in with multiple strategies</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Built-in, island architecture</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">TypeScript</th>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Choosing a Framework

SvelteKitNext.jsAstro
Learning curve

Low, intuitive template syntax

Moderate, React knowledge required

Low, HTML-first approach

Bundle size

Compiles away the framework

Medium, React runtime included

Zero JS by default

SSR

Built-in with adapter system

Built-in with multiple strategies

Built-in, island architecture

TypeScript

First-class support

First-class support

First-class support

<section data-field="content-section" class="rf-comparison rf-comparison--table" data-layout="table" data-rune="comparison" data-density="full">
  <h2 class="rf-comparison__title">Choosing a Framework</h2>
  <div class="rf-comparison__table-wrapper">
    <table class="rf-comparison__table">
      <thead>
        <tr>
          <th class="rf-comparison__label-col"></th>
          <th>SvelteKit</th>
          <th>Next.js</th>
          <th>Astro</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Learning curve</th>
          <td class="rf-comparison__cell">
            <p>Low, intuitive template syntax</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Moderate, React knowledge required</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Low, HTML-first approach</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Bundle size</th>
          <td class="rf-comparison__cell">
            <p>Compiles away the framework</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Medium, React runtime included</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Zero JS by default</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">SSR</th>
          <td class="rf-comparison__cell">
            <p>Built-in with adapter system</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Built-in with multiple strategies</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Built-in, island architecture</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">TypeScript</th>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Highlighted column

Use the highlighted attribute to visually emphasize a recommended column. Add verdict for a summary below the comparison.

{% comparison highlighted="refrakt.md" verdict="refrakt.md gives you the power of AI without sacrificing ownership or portability." %}

## refrakt.md

- **Content ownership** — Your content stays yours, portable Markdown
- **Theme system** — Switch themes instantly, same content renders differently
- **Output** — Real SvelteKit, not proprietary runtime
- **AI role** — AI generates reusable themes, not throwaway sites

## Wix AI

- **Content ownership** — ~~Content locked in Wix platform~~
- **Theme system** — ~~Templates only~~, no real theme swapping
- **Output** — Proprietary Wix runtime
- **AI role** — AI generates a single site layout

## Framer AI

- **Content ownership** — ~~Content lives in Framer~~
- **Theme system** — ~~Visual-first~~, design tool not content system
- **Output** — Framer runtime
- **AI role** — AI assists with layout and copy

{% /comparison %}
<section data-field="content-section" data-rune="comparison" data-rune-fields="{&quot;layout&quot;:&quot;table&quot;}">
  <div class="rf-comparison__table-wrapper">
    <table class="rf-comparison__table">
      <thead>
        <tr>
          <th class="rf-comparison__label-col"></th>
          <th class="rf-comparison__col-header--highlighted">
            refrakt.md
            <span class="rf-comparison__recommended-badge">Recommended</span>
          </th>
          <th>Wix AI</th>
          <th>Framer AI</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Content ownership</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Your content stays yours, portable Markdown</p>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Content locked in Wix platform</s>
              </p>
            </span>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Content lives in Framer</s>
              </p>
            </span>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Theme system</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Switch themes instantly, same content renders differently</p>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Templates only</s>
                , no real theme swapping
              </p>
            </span>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Visual-first</s>
                , design tool not content system
              </p>
            </span>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Output</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Real SvelteKit, not proprietary runtime</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Proprietary Wix runtime</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Framer runtime</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">AI role</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>AI generates reusable themes, not throwaway sites</p>
          </td>
          <td class="rf-comparison__cell">
            <p>AI generates a single site layout</p>
          </td>
          <td class="rf-comparison__cell">
            <p>AI assists with layout and copy</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p class="rf-comparison__verdict">refrakt.md gives you the power of AI without sacrificing ownership or portability.</p>
</section>
refrakt.mdRecommendedWix AIFramer AI
Content ownership

Your content stays yours, portable Markdown

Content locked in Wix platform

Content lives in Framer

Theme system

Switch themes instantly, same content renders differently

Templates only, no real theme swapping

Visual-first, design tool not content system

Output

Real SvelteKit, not proprietary runtime

Proprietary Wix runtime

Framer runtime

AI role

AI generates reusable themes, not throwaway sites

AI generates a single site layout

AI assists with layout and copy

refrakt.md gives you the power of AI without sacrificing ownership or portability.

<section data-field="content-section" class="rf-comparison rf-comparison--table" data-layout="table" data-rune="comparison" data-density="full">
  <div class="rf-comparison__table-wrapper">
    <table class="rf-comparison__table">
      <thead>
        <tr>
          <th class="rf-comparison__label-col"></th>
          <th class="rf-comparison__col-header--highlighted">
            refrakt.md
            <span class="rf-comparison__recommended-badge">Recommended</span>
          </th>
          <th>Wix AI</th>
          <th>Framer AI</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Content ownership</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Your content stays yours, portable Markdown</p>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Content locked in Wix platform</s>
              </p>
            </span>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Content lives in Framer</s>
              </p>
            </span>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Theme system</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Switch themes instantly, same content renders differently</p>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Templates only</s>
                , no real theme swapping
              </p>
            </span>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Visual-first</s>
                , design tool not content system
              </p>
            </span>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Output</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Real SvelteKit, not proprietary runtime</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Proprietary Wix runtime</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Framer runtime</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">AI role</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>AI generates reusable themes, not throwaway sites</p>
          </td>
          <td class="rf-comparison__cell">
            <p>AI generates a single site layout</p>
          </td>
          <td class="rf-comparison__cell">
            <p>AI assists with layout and copy</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p class="rf-comparison__verdict">refrakt.md gives you the power of AI without sacrificing ownership or portability.</p>
</section>

Cards layout

Use layout="cards" for side-by-side cards. Ideal for pricing comparisons or when columns have different content lengths.

{% comparison highlighted="Pro" layout="cards" %}

## Free

- **Projects** — 1
- **AI generations** — 5 per month
- **Themes** — Community only
- **Support** — Community forum

## Pro

- **Projects** — Unlimited
- **AI generations** — Unlimited
- **Themes** — Community + Premium
- **Support** — Priority email

## Team

- **Projects** — Unlimited
- **AI generations** — Unlimited
- **Themes** — All + private library
- **Support** — Dedicated Slack

{% /comparison %}
<section data-field="content-section" data-rune="comparison" data-rune-fields="{&quot;layout&quot;:&quot;cards&quot;}">
  <div class="rf-comparison__cards">
    <div class="rf-comparison-card">
      <h3 class="rf-comparison-card__name">Free</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>1</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>5 per month</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>Community only</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Community forum</p>
        </li>
      </ul>
    </div>
    <div class="rf-comparison-card rf-comparison-card--highlighted">
      <div class="rf-comparison-card__badge">Recommended</div>
      <h3 class="rf-comparison-card__name">Pro</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>Community + Premium</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Priority email</p>
        </li>
      </ul>
    </div>
    <div class="rf-comparison-card">
      <h3 class="rf-comparison-card__name">Team</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>All + private library</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Dedicated Slack</p>
        </li>
      </ul>
    </div>
  </div>
</section>

Free

  • Projects

    1

  • AI generations

    5 per month

  • Themes

    Community only

  • Support

    Community forum

Recommended

Pro

  • Projects

    Unlimited

  • AI generations

    Unlimited

  • Themes

    Community + Premium

  • Support

    Priority email

Team

  • Projects

    Unlimited

  • AI generations

    Unlimited

  • Themes

    All + private library

  • Support

    Dedicated Slack

<section data-field="content-section" class="rf-comparison rf-comparison--cards" data-layout="cards" data-rune="comparison" data-density="full">
  <div class="rf-comparison__cards">
    <div class="rf-comparison-card">
      <h3 class="rf-comparison-card__name">Free</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>1</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>5 per month</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>Community only</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Community forum</p>
        </li>
      </ul>
    </div>
    <div class="rf-comparison-card rf-comparison-card--highlighted">
      <div class="rf-comparison-card__badge">Recommended</div>
      <h3 class="rf-comparison-card__name">Pro</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>Community + Premium</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Priority email</p>
        </li>
      </ul>
    </div>
    <div class="rf-comparison-card">
      <h3 class="rf-comparison-card__name">Team</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>All + private library</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Dedicated Slack</p>
        </li>
      </ul>
    </div>
  </div>
</section>

Attributes

comparison

AttributeTypeRequiredDescription
titlestring—Heading displayed above the comparison table
highlightedstring—Column name to visually emphasize as the recommended choice
layoutstring—Display format for the comparison (e.g. table)
labelsstring—Position of row labels: left column or hidden
collapseboolean—Whether rows collapse into an accordion on small screens
verdictstring—Summary text shown below the table as a final recommendation

Universal attributes

bg

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

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—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-tostring—Gradient end colour — a semantic token name
bg-viastring—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)
elevation

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

AttributeTypeRequiredDescription
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
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"—Inner padding of this block
motion

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

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"—Vertical spacing above and below this block
substrate

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

AttributeTypeRequiredDescription
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)
tint

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

AttributeTypeRequiredDescription
tintstring—Color tint preset applied to this block
tint-mode"auto" | "dark" | "light"—Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header

comparison-column

AttributeTypeRequiredDescription
namestring—
highlightedboolean—

Universal attributes

bg

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

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—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-tostring—Gradient end colour — a semantic token name
bg-viastring—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)
elevation

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

AttributeTypeRequiredDescription
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
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"—Inner padding of this block
motion

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

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"—Vertical spacing above and below this block
substrate

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

AttributeTypeRequiredDescription
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)
tint

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

AttributeTypeRequiredDescription
tintstring—Color tint preset applied to this block
tint-mode"auto" | "dark" | "light"—Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header

comparison-row

AttributeTypeRequiredDescription
labelstring—
rowTypestring—

Universal attributes

bg

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

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—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-tostring—Gradient end colour — a semantic token name
bg-viastring—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)
elevation

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

AttributeTypeRequiredDescription
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
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"—Inner padding of this block
motion

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

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"—Vertical spacing above and below this block
substrate

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

AttributeTypeRequiredDescription
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)
tint

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

AttributeTypeRequiredDescription
tintstring—Color tint preset applied to this block
tint-mode"auto" | "dark" | "light"—Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header

Markdown reinterpretation

MarkdownInterpretation
## HeadingColumn header — the thing being compared
List itemFeature row for that column
**Bold text** at start of list itemRow alignment label
Text after boldFeature description
~~Strikethrough~~Negative indicator — limitation or missing capability
BlockquoteCallout badge within a column

Section header

Comparison supports an optional eyebrow, headline, and blurb above the section above the comparison table. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.