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":"","tags":"tint,theming","created":"2026-06-14","modified":"2026-06-14"}">
<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-tags="tint,theming" data-created="2026-06-14" data-modified="2026-06-14" 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-06-14">2026-06-14</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-06-14">2026-06-14</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":"","tags":"","created":"2026-06-14","modified":"2026-06-14"}">
<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-tags="" data-created="2026-06-14" data-modified="2026-06-14" 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-06-14">2026-06-14</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-06-14">2026-06-14</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","tags":"","created":"2026-06-14","modified":"2026-06-14"}">
<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-tags="" data-created="2026-06-14" data-modified="2026-06-14" 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-06-14">2026-06-14</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-06-14">2026-06-14</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, superseded, deprecated |
version | string | — | Spec version, e.g. 1.0, 1.2 |
supersedes | string | — | ID of the spec this replaces |
tags | string | — | Comma-separated labels |
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 |