note
This rune is part of @refrakt-md/plan. Install with npm install @refrakt-md/plan and add "@refrakt-md/plan" to the plugins array in your refrakt.config.json.
Spec
Wraps a specification document, giving it status tracking, versioning, and entity registry integration. Specs are the source of truth for what the software should do. The body is intentionally freeform — specs vary widely in shape.
Accepted specification
A spec in accepted status with a version number and scope summary.
{% spec id="SPEC-008" status="accepted" version="1.2" tags="tint,theming" %}
# Tint Rune
Section-level colour context override via CSS custom properties.
## Problem
A page has a single colour context. Some sections need a different palette — a dark hero, a branded callout, a seasonal promotion. Currently there is no way to override colour tokens within a section scope.
## Solution
`tint` is a core rune that overrides colour tokens within its parent rune's scope. The identity transform reads tint definitions and injects CSS custom properties as inline styles on the container element.
{% /spec %}<article data-rune="spec" data-rune-fields="{"id":"SPEC-008","status":"accepted","version":"1.2","supersedes":"","released-in":"","tags":"tint,theming","created":"2026-09-13","modified":"2026-09-13"}">
<header data-name="title">
<h1 id="tint-rune">Tint Rune</h1>
</header>
<div data-name="blurb">
<p>Section-level colour context override via CSS custom properties.</p>
</div>
<div data-name="body">
<h2 id="problem">Problem</h2>
<p>A page has a single colour context. Some sections need a different palette — a dark hero, a branded callout, a seasonal promotion. Currently there is no way to override colour tokens within a section scope.</p>
<h2 id="solution">Solution</h2>
<p>
<code>tint</code>
is a core rune that overrides colour tokens within its parent rune's scope. The identity transform reads tint definitions and injects CSS custom properties as inline styles on the container element.
</p>
</div>
</article>SPEC-008accepted
Tint Rune
Section-level colour context override via CSS custom properties.
Problem
A page has a single colour context. Some sections need a different palette — a dark hero, a branded callout, a seasonal promotion. Currently there is no way to override colour tokens within a section scope.
Solution
tint is a core rune that overrides colour tokens within its parent rune's scope. The identity transform reads tint definitions and injects CSS custom properties as inline styles on the container element.
<article class="rf-spec rf-spec--SPEC-008 rf-spec--accepted rf-spec--1.2" data-id="SPEC-008" data-status="accepted" data-version="1.2" data-supersedes="" data-released-in="" data-tags="tint,theming" data-created="2026-09-13" data-modified="2026-09-13" data-rune="spec" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-spec__eyebrow">
<span data-meta-type="id">SPEC-008</span>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive" data-align="end">accepted</span>
</div>
<header data-name="title" class="rf-spec__title" data-section="title">
<h1 id="tint-rune">Tint Rune</h1>
</header>
<div data-name="blurb" class="rf-spec__blurb" data-section="description">
<p>Section-level colour context override via CSS custom properties.</p>
</div>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-spec__metadata">
<div data-name="row" data-field="version" class="rf-spec__row">
<dt data-meta-label="">Version</dt>
<dd>
<span class="rf-badge" data-meta-type="tag">1.2</span>
</dd>
</div>
<div data-name="row" data-field="created" class="rf-spec__row">
<dt data-meta-label="">Created</dt>
<dd data-meta-type="temporal">
<time datetime="2026-09-13">2026-09-13</time>
</dd>
</div>
<div data-name="row" data-field="modified" class="rf-spec__row">
<dt data-meta-label="">Modified</dt>
<dd data-meta-type="temporal">
<time datetime="2026-09-13">2026-09-13</time>
</dd>
</div>
</dl>
<div data-name="tags" data-zone="tags" data-zone-layout="bar" class="rf-spec__tags">
<span class="rf-badge" data-meta-type="tag">tint</span>
<span class="rf-badge" data-meta-type="tag">theming</span>
</div>
<div data-name="body" class="rf-spec__body" data-section="body">
<h2 id="problem">Problem</h2>
<p>A page has a single colour context. Some sections need a different palette — a dark hero, a branded callout, a seasonal promotion. Currently there is no way to override colour tokens within a section scope.</p>
<h2 id="solution">Solution</h2>
<p>
<code>tint</code>
is a core rune that overrides colour tokens within its parent rune's scope. The identity transform reads tint definitions and injects CSS custom properties as inline styles on the container element.
</p>
</div>
</article>Draft specification
A minimal spec in draft status.
{% spec id="SPEC-012" status="draft" %}
# Dependency Graph Visualisation
Render entity relationships as an interactive graph.
This spec is not yet written. It will cover the visual representation of cross-references between specs, work items, and decisions.
{% /spec %}<article data-rune="spec" data-rune-fields="{"id":"SPEC-012","status":"draft","version":"","supersedes":"","released-in":"","tags":"","created":"2026-09-13","modified":"2026-09-13"}">
<header data-name="title">
<h1 id="dependency-graph-visualisation">Dependency Graph Visualisation</h1>
</header>
<div data-name="blurb">
<p>Render entity relationships as an interactive graph.</p>
<p>This spec is not yet written. It will cover the visual representation of cross-references between specs, work items, and decisions.</p>
</div>
<div data-name="body"></div>
</article>SPEC-012draft
Dependency Graph Visualisation
Render entity relationships as an interactive graph.
This spec is not yet written. It will cover the visual representation of cross-references between specs, work items, and decisions.
<article class="rf-spec rf-spec--SPEC-012 rf-spec--draft" data-id="SPEC-012" data-status="draft" data-version="" data-supersedes="" data-released-in="" data-tags="" data-created="2026-09-13" data-modified="2026-09-13" data-rune="spec" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-spec__eyebrow">
<span data-meta-type="id">SPEC-012</span>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="neutral" data-align="end">draft</span>
</div>
<header data-name="title" class="rf-spec__title" data-section="title">
<h1 id="dependency-graph-visualisation">Dependency Graph Visualisation</h1>
</header>
<div data-name="blurb" class="rf-spec__blurb" data-section="description">
<p>Render entity relationships as an interactive graph.</p>
<p>This spec is not yet written. It will cover the visual representation of cross-references between specs, work items, and decisions.</p>
</div>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-spec__metadata">
<div data-name="row" data-field="created" class="rf-spec__row">
<dt data-meta-label="">Created</dt>
<dd data-meta-type="temporal">
<time datetime="2026-09-13">2026-09-13</time>
</dd>
</div>
<div data-name="row" data-field="modified" class="rf-spec__row">
<dt data-meta-label="">Modified</dt>
<dd data-meta-type="temporal">
<time datetime="2026-09-13">2026-09-13</time>
</dd>
</div>
</dl>
<div data-name="body" class="rf-spec__body" data-section="body"></div>
</article>Superseded specification
A spec that has been replaced by a newer version.
{% spec id="SPEC-003" status="superseded" version="1.0" supersedes="SPEC-001" %}
# Original Token System
First-generation design token architecture.
This specification has been superseded. See the current token system specification for the active design.
{% /spec %}<article data-rune="spec" data-rune-fields="{"id":"SPEC-003","status":"superseded","version":"1.0","supersedes":"SPEC-001","released-in":"","tags":"","created":"2026-09-13","modified":"2026-09-13"}">
<header data-name="title">
<h1 id="original-token-system">Original Token System</h1>
</header>
<div data-name="blurb">
<p>First-generation design token architecture.</p>
<p>This specification has been superseded. See the current token system specification for the active design.</p>
</div>
<div data-name="body"></div>
</article>SPEC-003superseded
Original Token System
First-generation design token architecture.
This specification has been superseded. See the current token system specification for the active design.
<article class="rf-spec rf-spec--SPEC-003 rf-spec--superseded rf-spec--1.0 rf-spec--SPEC-001" data-id="SPEC-003" data-status="superseded" data-version="1.0" data-supersedes="SPEC-001" data-released-in="" data-tags="" data-created="2026-09-13" data-modified="2026-09-13" data-rune="spec" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-spec__eyebrow">
<span data-meta-type="id">SPEC-003</span>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="caution" data-align="end">superseded</span>
</div>
<header data-name="title" class="rf-spec__title" data-section="title">
<h1 id="original-token-system">Original Token System</h1>
</header>
<div data-name="blurb" class="rf-spec__blurb" data-section="description">
<p>First-generation design token architecture.</p>
<p>This specification has been superseded. See the current token system specification for the active design.</p>
</div>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-spec__metadata">
<div data-name="row" data-field="version" class="rf-spec__row">
<dt data-meta-label="">Version</dt>
<dd>
<span class="rf-badge" data-meta-type="tag">1.0</span>
</dd>
</div>
<div data-name="row" data-field="supersedes" class="rf-spec__row">
<dt data-meta-label="">Supersedes</dt>
<dd data-meta-type="id">SPEC-001</dd>
</div>
<div data-name="row" data-field="created" class="rf-spec__row">
<dt data-meta-label="">Created</dt>
<dd data-meta-type="temporal">
<time datetime="2026-09-13">2026-09-13</time>
</dd>
</div>
<div data-name="row" data-field="modified" class="rf-spec__row">
<dt data-meta-label="">Modified</dt>
<dd data-meta-type="temporal">
<time datetime="2026-09-13">2026-09-13</time>
</dd>
</div>
</dl>
<div data-name="body" class="rf-spec__body" data-section="body"></div>
</article>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
id | string | ✓ | Unique identifier (e.g., "SPEC-008"). |
status | "draft" | "review" | "accepted" | "implemented" | "shipped" | "superseded" | "deprecated" | — | Current status: draft, review, accepted, implemented, shipped, superseded, or deprecated. |
version | string | — | Spec version (e.g., "1.0", "1.2"). |
supersedes | string | — | ID of the spec this replaces. |
released-in | string | — | Release version this spec shipped in (semver, e.g. "v0.11.4"). Required when status="shipped". |
tags | string | — | Comma-separated labels. |
created | string | — | Creation date (ISO 8601). Defaults to file creation date from git. |
modified | string | — | Last modified date (ISO 8601). Defaults to file modification date from git. |
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) |
dropcap
Per-instance drop-cap opt-in (SPEC-108).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise. |
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) |
reading
Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.
| Attribute | Type | Required | Description |
|---|---|---|---|
reading | "fine" | "ui" | "prose" | — | Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment. |
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 |
|---|---|
| frame | this rune declares neither a `frameTarget` nor a media section |
Lifecycle: accepted → implemented → shipped
accepted means the team agreed to build the spec. Two further states close the loop between agreement and availability:
implemented— every work item thatsources this spec isdoneand the code is inmain.refrakt plan statussuggests this flip once all linked work is done.shipped— released to users in an npm version. Pair it withreleased-in="vX.Y.Z";plan validateerrors on a shipped spec that lacks it. |created|string|$file.created| Creation date (ISO 8601). Auto-populated from git history | |modified|string|$file.modified| Last modified date (ISO 8601). Auto-populated from git history |