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-07-23","modified":"2026-07-23"}">
<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-07-23" data-modified="2026-07-23" 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-07-23">2026-07-23</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-07-23">2026-07-23</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-07-23","modified":"2026-07-23"}">
<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-07-23" data-modified="2026-07-23" 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-07-23">2026-07-23</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-07-23">2026-07-23</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-07-23","modified":"2026-07-23"}">
<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-07-23" data-modified="2026-07-23" 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-07-23">2026-07-23</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-07-23">2026-07-23</time>
</dd>
</div>
</dl>
<div data-name="body" class="rf-spec__body" data-section="body"></div>
</article>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique identifier, e.g. SPEC-008 (required) |
status | string | draft | Current status: draft, review, accepted, implemented, shipped, superseded, 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 |
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 |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |