refrakt.md

Docs

Runes

Themes

Extend

Project

Design›Typography
note

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.

Typography

Displays font specimens with live-loaded typefaces. List items are parsed as role: Family Name (weight1, weight2). Supported roles: heading, body, mono, display, caption.

Basic usage

Define a font system with roles and weights.

{% typography title="Font System" %}
- heading: Inter (600, 700)
- body: Inter (400, 500)
- mono: JetBrains Mono (400, 500)
{% /typography %}
<section data-rune="typography" data-rune-fields="{&quot;title&quot;:&quot;Font System&quot;,&quot;showSizes&quot;:&quot;true&quot;,&quot;showWeights&quot;:&quot;true&quot;,&quot;showCharset&quot;:&quot;false&quot;}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&amp;family=Inter:wght@400;500&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet">
  <h3 data-name="title">Font System</h3>
  <div data-name="specimens">
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">heading</span>
        <span data-name="specimen-family">Inter</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 600">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 600">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 600">
          <span data-name="weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 700">
          <span data-name="weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">body</span>
        <span data-name="specimen-family">Inter</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 400">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 400">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 500">
          <span data-name="weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">mono</span>
        <span data-name="specimen-family">JetBrains Mono</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 400">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 400">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 400">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 500">
          <span data-name="weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Font System

headingInter
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
600 — SemiboldAa Bb Cc
700 — BoldAa Bb Cc
bodyInter
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
monoJetBrains Mono
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
<section class="rf-typography rf-typography--Font System rf-typography--true rf-typography--true rf-typography--false" data-title="Font System" data-show-sizes="true" data-show-weights="true" data-show-charset="false" data-elevation="flat" data-rune="typography" data-density="full">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&amp;family=Inter:wght@400;500&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet" />
  <h3 data-name="title" class="rf-typography__title" data-section="title">Font System</h3>
  <div data-name="specimens" class="rf-typography__specimens">
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">heading</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Inter</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 600" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 700" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">body</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Inter</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 500" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">mono</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">JetBrains Mono</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 500" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Custom sample text

Use the sample attribute to display custom text in specimens.

{% typography title="Display Fonts" sample="Design is intelligence made visible" %}
- display: Playfair Display (400, 700)
- body: Source Sans 3 (400, 600)
{% /typography %}
<section data-rune="typography" data-rune-fields="{&quot;title&quot;:&quot;Display Fonts&quot;,&quot;showSizes&quot;:&quot;true&quot;,&quot;showWeights&quot;:&quot;true&quot;,&quot;showCharset&quot;:&quot;false&quot;}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;family=Source+Sans+3:wght@400;600&amp;display=swap" rel="stylesheet">
  <h3 data-name="title">Display Fonts</h3>
  <div data-name="specimens">
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">display</span>
        <span data-name="specimen-family">Playfair Display</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 48px; font-weight: 400">
          Design is intelli
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 32px; font-weight: 400">
          Design is intelligence mad
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 24px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 18px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 14px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 700">
          <span data-name="weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">body</span>
        <span data-name="specimen-family">Source Sans 3</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 48px; font-weight: 400">
          Design is intelli
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 32px; font-weight: 400">
          Design is intelligence mad
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 24px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 600">
          <span data-name="weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Display Fonts

displayPlayfair Display
Design is intelli48px
Design is intelligence mad32px
Design is intelligence made visible24px
Design is intelligence made visible18px
Design is intelligence made visible14px
400 — RegularAa Bb Cc
700 — BoldAa Bb Cc
bodySource Sans 3
Design is intelli48px
Design is intelligence mad32px
Design is intelligence made visible24px
Design is intelligence made visible18px
Design is intelligence made visible14px
400 — RegularAa Bb Cc
600 — SemiboldAa Bb Cc
<section class="rf-typography rf-typography--Display Fonts rf-typography--true rf-typography--true rf-typography--false" data-title="Display Fonts" data-show-sizes="true" data-show-weights="true" data-show-charset="false" data-elevation="flat" data-rune="typography" data-density="full">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;family=Source+Sans+3:wght@400;600&amp;display=swap" rel="stylesheet" />
  <h3 data-name="title" class="rf-typography__title" data-section="title">Display Fonts</h3>
  <div data-name="specimens" class="rf-typography__specimens">
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">display</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Playfair Display</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelli
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence mad
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 700" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">body</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Source Sans 3</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelli
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence mad
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 600" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Single specimen

A typography rune can show a single font for focused documentation.

{% typography title="Monospace" showCharset="true" %}
- mono: Fira Code (400, 500, 700)
{% /typography %}
<section data-rune="typography" data-rune-fields="{&quot;title&quot;:&quot;Monospace&quot;,&quot;showSizes&quot;:&quot;true&quot;,&quot;showWeights&quot;:&quot;true&quot;,&quot;showCharset&quot;:&quot;true&quot;}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&amp;display=swap" rel="stylesheet">
  <h3 data-name="title">Monospace</h3>
  <div data-name="specimens">
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">mono</span>
        <span data-name="specimen-family">Fira Code</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 48px; font-weight: 400">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 32px; font-weight: 400">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 24px; font-weight: 400">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 18px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 500">
          <span data-name="weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 700">
          <span data-name="weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
      <div data-name="charset" style="font-family: 'Fira Code', monospace; font-weight: 400">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !@#$%^&amp;*()</div>
    </div>
  </div>
</section>

Monospace

monoFira Code
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
700 — BoldAa Bb Cc
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !@#$%^&*()
<section class="rf-typography rf-typography--Monospace rf-typography--true rf-typography--true rf-typography--true" data-title="Monospace" data-show-sizes="true" data-show-weights="true" data-show-charset="true" data-elevation="flat" data-rune="typography" data-density="full">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&amp;display=swap" rel="stylesheet" />
  <h3 data-name="title" class="rf-typography__title" data-section="title">Monospace</h3>
  <div data-name="specimens" class="rf-typography__specimens">
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">mono</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Fira Code</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 500" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 700" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
      <div data-name="charset" style="font-family: 'Fira Code', monospace; font-weight: 400" class="rf-typography__charset">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !@#$%^&amp;*()</div>
    </div>
  </div>
</section>

Attributes

AttributeTypeRequiredDescription
titlestring—Heading displayed above the typography specimens.
samplestring—Preview sentence rendered at each size in the specimen cards.
showSizesboolean—Enable/disable the type-size scale samples for each specimen.
showWeightsboolean—Enable/disable the weight comparison row for multi-weight fonts.
showCharsetboolean—Enable/disable the full character set display for each specimen.

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)
prominence

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.

AttributeTypeRequiredDescription
prominence"quiet" | "normal" | "prominent" | "display"—Section-header emphasis (only on page-section-header family 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