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.
Design Context
Wraps palette, typography, and spacing runes into a unified token card. Registers design tokens in the build pipeline so they can be injected as CSS custom properties into sandbox runes anywhere on the site.
Basic usage
Compose child design runes inside a design-context block.
{% design-context title="Brand Tokens" %}
{% typography %}
- heading: Inter (400, 600, 700)
- body: Source Sans Pro (400, 600)
- mono: Fira Code (400)
{% /typography %}
{% palette %}
## Brand
- Primary: #2563EB
- Secondary: #7C3AED
- Accent: #F59E0B
## Neutral
- Gray: #F9FAFB, #E5E7EB, #9CA3AF, #374151, #111827
{% /palette %}
{% spacing %}
## Spacing
- unit: 4px
- scale: 4, 8, 12, 16, 24, 32, 48, 64
## Radius
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
{% /spacing %}
{% /design-context %}<section data-rune="design-context" data-rune-fields="{"titleText":"Brand Tokens","tokens":"{\"fonts\":[{\"role\":\"heading\",\"family\":\"Inter\",\"weights\":[400,600,700],\"category\":\"sans-serif\"},{\"role\":\"body\",\"family\":\"Source Sans Pro\",\"weights\":[400,600],\"category\":\"sans-serif\"},{\"role\":\"mono\",\"family\":\"Fira Code\",\"weights\":[400],\"category\":\"monospace\"}],\"colors\":[{\"name\":\"Primary\",\"value\":\"#2563EB\",\"group\":\"Brand\"},{\"name\":\"Secondary\",\"value\":\"#7C3AED\",\"group\":\"Brand\"},{\"name\":\"Accent\",\"value\":\"#F59E0B\",\"group\":\"Brand\"},{\"name\":\"Gray\",\"value\":\"#F9FAFB\",\"group\":\"Neutral\"},{\"name\":\"Gray\",\"value\":\"#E5E7EB\",\"group\":\"Neutral\"},{\"name\":\"Gray\",\"value\":\"#9CA3AF\",\"group\":\"Neutral\"},{\"name\":\"Gray\",\"value\":\"#374151\",\"group\":\"Neutral\"},{\"name\":\"Gray\",\"value\":\"#111827\",\"group\":\"Neutral\"}],\"spacing\":{\"unit\":\"4px\",\"scale\":[\"4\",\"8\",\"12\",\"16\",\"24\",\"32\",\"48\",\"64\"]},\"radii\":[{\"name\":\"sm\",\"value\":\"4px\"},{\"name\":\"md\",\"value\":\"8px\"},{\"name\":\"lg\",\"value\":\"12px\"},{\"name\":\"full\",\"value\":\"9999px\"}]}","scope":"default"}">
<h3 data-name="title">Brand Tokens</h3>
<div data-name="sections">
<section data-rune="typography" data-rune-fields="{"title":"","showSizes":"true","showWeights":"true","showCharset":"false"}">
<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@400;600;700&family=Source+Sans+Pro:wght@400;600&family=Fira+Code:wght@400&display=swap" rel="stylesheet">
<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: 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: 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">Source Sans Pro</span>
</div>
<div data-name="sizes">
<div data-name="size-sample" style="font-family: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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 Pro', 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 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>
</div>
</section>
<section data-rune="palette" data-rune-fields="{"title":"","showContrast":"false","showA11y":"false","columns":""}">
<div data-name="group">
<h4 data-name="group-title">Brand</h4>
<div data-name="grid" style="--rf-palette-cols: 3">
<div data-name="swatch">
<div data-name="swatch-color" style="background-color: #2563EB"></div>
<span data-name="swatch-name">Primary</span>
<span data-name="swatch-value">#2563EB</span>
</div>
<div data-name="swatch">
<div data-name="swatch-color" style="background-color: #7C3AED"></div>
<span data-name="swatch-name">Secondary</span>
<span data-name="swatch-value">#7C3AED</span>
</div>
<div data-name="swatch">
<div data-name="swatch-color" style="background-color: #F59E0B"></div>
<span data-name="swatch-name">Accent</span>
<span data-name="swatch-value">#F59E0B</span>
</div>
</div>
</div>
<div data-name="group">
<h4 data-name="group-title">Neutral</h4>
<div data-name="scale">
<div data-name="scale-stop" style="background-color: #F9FAFB; color: #000">#F9FAFB</div>
<div data-name="scale-stop" style="background-color: #E5E7EB; color: #000">#E5E7EB</div>
<div data-name="scale-stop" style="background-color: #9CA3AF; color: #000">#9CA3AF</div>
<div data-name="scale-stop" style="background-color: #374151; color: #fff">#374151</div>
<div data-name="scale-stop" style="background-color: #111827; color: #fff">#111827</div>
</div>
<span data-name="swatch-name">Gray</span>
</div>
</section>
<section data-rune="spacing" data-rune-fields="{"title":""}">
<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: 6.25%"></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: 12.5%"></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: 18.75%"></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: 25%"></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: 37.5%"></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: 50%"></div>
<span data-name="scale-label">
32px
<span data-name="scale-multiplier">8×</span>
</span>
</div>
<div data-name="scale-item">
<div data-name="scale-bar" style="width: 75%"></div>
<span data-name="scale-label">
48px
<span data-name="scale-multiplier">12×</span>
</span>
</div>
<div data-name="scale-item">
<div data-name="scale-bar" style="width: 100%"></div>
<span data-name="scale-label">
64px
<span data-name="scale-multiplier">16×</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>
</section>
</div>
</section>Brand Tokens
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
400 — RegularAa Bb Cc
600 — SemiboldAa Bb Cc
700 — BoldAa Bb Cc
bodySource Sans Pro
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
600 — SemiboldAa Bb Cc
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
Brand
Primary#2563EB
Secondary#7C3AED
Accent#F59E0B
Neutral
#F9FAFB
#E5E7EB
#9CA3AF
#374151
#111827
Spacing
4px1×
8px2×
12px3×
16px4×
24px6×
32px8×
48px12×
64px16×
Radius
sm4px
md8px
lg12px
full9999px
<section class="rf-design-context rf-design-context--Brand Tokens" data-title-text="Brand Tokens" data-elevation="flat" data-rune="design-context" data-density="full">
<h3 data-name="title" class="rf-design-context__title" data-section="title">Brand Tokens</h3>
<div data-name="sections" class="rf-design-context__sections">
<section class="rf-typography rf-typography--true rf-typography--true rf-typography--false rf-typography--in-design-context" data-title="" 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@400;600;700&family=Source+Sans+Pro:wght@400;600&family=Fira+Code:wght@400&display=swap" rel="stylesheet" />
<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: 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: 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">Source Sans Pro</span>
</div>
<div data-name="sizes" class="rf-typography__sizes">
<div data-name="size-sample" style="font-family: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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 Pro', 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 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>
</div>
</section>
<section class="rf-palette rf-palette--false rf-palette--false rf-palette--in-design-context" data-title="" data-show-contrast="false" data-show-a11y="false" data-columns="" data-elevation="flat" data-rune="palette" data-density="full">
<div data-name="group" class="rf-palette__group">
<h4 data-name="group-title" class="rf-palette__group-title">Brand</h4>
<div data-name="grid" style="--rf-palette-cols: 3" class="rf-palette__grid">
<div data-name="swatch" class="rf-palette__swatch">
<div data-name="swatch-color" style="background-color: #2563EB" class="rf-palette__swatch-color"></div>
<span data-name="swatch-name" class="rf-palette__swatch-name">Primary</span>
<span data-name="swatch-value" class="rf-palette__swatch-value">#2563EB</span>
</div>
<div data-name="swatch" class="rf-palette__swatch">
<div data-name="swatch-color" style="background-color: #7C3AED" class="rf-palette__swatch-color"></div>
<span data-name="swatch-name" class="rf-palette__swatch-name">Secondary</span>
<span data-name="swatch-value" class="rf-palette__swatch-value">#7C3AED</span>
</div>
<div data-name="swatch" class="rf-palette__swatch">
<div data-name="swatch-color" style="background-color: #F59E0B" class="rf-palette__swatch-color"></div>
<span data-name="swatch-name" class="rf-palette__swatch-name">Accent</span>
<span data-name="swatch-value" class="rf-palette__swatch-value">#F59E0B</span>
</div>
</div>
</div>
<div data-name="group" class="rf-palette__group">
<h4 data-name="group-title" class="rf-palette__group-title">Neutral</h4>
<div data-name="scale" class="rf-palette__scale">
<div data-name="scale-stop" style="background-color: #F9FAFB; color: #000" class="rf-palette__scale-stop">#F9FAFB</div>
<div data-name="scale-stop" style="background-color: #E5E7EB; color: #000" class="rf-palette__scale-stop">#E5E7EB</div>
<div data-name="scale-stop" style="background-color: #9CA3AF; color: #000" class="rf-palette__scale-stop">#9CA3AF</div>
<div data-name="scale-stop" style="background-color: #374151; color: #fff" class="rf-palette__scale-stop">#374151</div>
<div data-name="scale-stop" style="background-color: #111827; color: #fff" class="rf-palette__scale-stop">#111827</div>
</div>
<span data-name="swatch-name" class="rf-palette__swatch-name">Gray</span>
</div>
</section>
<section class="rf-spacing rf-spacing--in-design-context" data-title="" data-elevation="flat" data-rune="spacing" data-density="full">
<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: 6.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">1×</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">
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: 18.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">3×</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">
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: 37.5%" 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: 50%" 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 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">
48px
<span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">12×</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">
64px
<span data-name="scale-multiplier" class="rf-spacing__scale-multiplier">16×</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>
</section>
</div>
</section>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
title | string | — | Heading displayed above the grouped design token sections. |
scope | string | — | Named scope that identifies this token set for cross-page references. |
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
prominence | "quiet" | "normal" | "prominent" | "display" | — | Section-header emphasis (only on page-section-header family runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
Cross-page token injection
Tokens defined in a design-context are registered by the build pipeline and injected into any {% sandbox context="..." %} that references the same scope — even on a different page.
{% design-context scope="brand" title="Brand Tokens" %}
{% palette %}
## Brand
- Primary: #2563EB
- Secondary: #7C3AED
{% /palette %}
{% typography %}
- heading: Inter (600, 700)
- body: Inter (400, 500)
{% /typography %}
{% /design-context %}
On any other page, sandboxes receive these tokens automatically:
{% sandbox context="brand" %}
<div style="background: var(--color-primary); font-family: var(--font-heading); color: white; padding: 16px; border-radius: 8px;">
Styled with brand tokens
</div>
{% /sandbox %}
The sandbox iframe receives:
- Google Fonts
<link>tags for all typography fonts - CSS custom properties on
:root(--font-heading,--color-primary,--spacing-unit, etc.) - Base typography rules mapping
body, heading, and code elements to font variables - Tailwind config extension (when
framework="tailwind") mapping tokens to Tailwind theme values
If no design-context with the referenced scope exists on the site, the build emits a warning and the sandbox renders without injected tokens.
Multiple contexts
Use distinct scope values to maintain separate token sets — for example, separate brand identities or component library themes.
{% design-context scope="brand-a" title="Brand A" %}
...
{% /design-context %}
{% design-context scope="brand-b" title="Brand B" %}
...
{% /design-context %}
{% sandbox context="brand-a" %}...{% /sandbox %}
{% sandbox context="brand-b" %}...{% /sandbox %}