This rune is part of @refrakt-md/plan. Install with npm install @refrakt-md/plan and add "@refrakt-md/plan" to the packages 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">
  <meta content="SPEC-008" data-field="id">
  <meta content="accepted" data-field="status">
  <meta content="1.2" data-field="version">
  <meta content="" data-field="supersedes">
  <meta content="tint,theming" data-field="tags">
  <meta content="2026-04-10" data-field="created">
  <meta content="2026-04-10" data-field="modified">
  <header data-name="title">
    <h1 id="tint-rune">Tint Rune</h1>
  </header>
  <div data-name="body">
    <blockquote>
      <p>Section-level colour context override via CSS custom properties.</p>
    </blockquote>
    <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>

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-tags="tint,theming" data-created="2026-04-10" data-modified="2026-04-10" data-rune="spec" data-density="full">
  <div data-name="header" class="rf-spec__header" data-section="header">
    <span data-name="id-badge" data-meta-type="id" data-meta-rank="primary" class="rf-spec__id-badge">
      <span data-meta-label="" data-meta-label-hidden="">ID:</span>
      <span data-meta-value="">SPEC-008</span>
    </span>
    <span data-name="status-badge" data-meta-type="status" data-meta-rank="primary" data-meta-sentiment="positive" class="rf-spec__status-badge">
      <span data-meta-label="" data-meta-label-hidden="">Status:</span>
      <span data-meta-value="">accepted</span>
    </span>
    <span data-name="version-badge" data-meta-type="tag" data-meta-rank="secondary" class="rf-spec__version-badge">v1.2</span>
    <time data-name="created-badge" data-meta-type="temporal" data-meta-rank="secondary" class="rf-spec__created-badge">
      <span data-meta-label="">Created:</span>
      <span data-meta-value="">2026-04-10</span>
    </time>
    <time data-name="modified-badge" data-meta-type="temporal" data-meta-rank="secondary" class="rf-spec__modified-badge">
      <span data-meta-label="">Modified:</span>
      <span data-meta-value="">2026-04-10</span>
    </time>
  </div>
  <div data-name="body" class="rf-spec__body" data-section="body">
    <meta content="SPEC-008" data-field="id" />
    <meta content="accepted" data-field="status" />
    <meta content="1.2" data-field="version" />
    <meta content="" data-field="supersedes" />
    <meta content="tint,theming" data-field="tags" />
    <meta content="2026-04-10" data-field="created" />
    <meta content="2026-04-10" data-field="modified" />
    <header data-name="title" class="rf-spec__title">
      <h1 id="tint-rune">Tint Rune</h1>
    </header>
    <div data-name="body" class="rf-spec__body" data-section="body">
      <blockquote>
        <p>Section-level colour context override via CSS custom properties.</p>
      </blockquote>
      <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>
  </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">
  <meta content="SPEC-012" data-field="id">
  <meta content="draft" data-field="status">
  <meta content="" data-field="version">
  <meta content="" data-field="supersedes">
  <meta content="" data-field="tags">
  <meta content="2026-04-10" data-field="created">
  <meta content="2026-04-10" data-field="modified">
  <header data-name="title">
    <h1 id="dependency-graph-visualisation">Dependency Graph Visualisation</h1>
  </header>
  <div data-name="body">
    <blockquote>
      <p>Render entity relationships as an interactive graph.</p>
    </blockquote>
    <p>This spec is not yet written. It will cover the visual representation of cross-references between specs, work items, and decisions.</p>
  </div>
</article>

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-created="2026-04-10" data-modified="2026-04-10" data-rune="spec" data-density="full">
  <div data-name="header" class="rf-spec__header" data-section="header">
    <span data-name="id-badge" data-meta-type="id" data-meta-rank="primary" class="rf-spec__id-badge">
      <span data-meta-label="" data-meta-label-hidden="">ID:</span>
      <span data-meta-value="">SPEC-012</span>
    </span>
    <span data-name="status-badge" data-meta-type="status" data-meta-rank="primary" data-meta-sentiment="neutral" class="rf-spec__status-badge">
      <span data-meta-label="" data-meta-label-hidden="">Status:</span>
      <span data-meta-value="">draft</span>
    </span>
    <time data-name="created-badge" data-meta-type="temporal" data-meta-rank="secondary" class="rf-spec__created-badge">
      <span data-meta-label="">Created:</span>
      <span data-meta-value="">2026-04-10</span>
    </time>
    <time data-name="modified-badge" data-meta-type="temporal" data-meta-rank="secondary" class="rf-spec__modified-badge">
      <span data-meta-label="">Modified:</span>
      <span data-meta-value="">2026-04-10</span>
    </time>
  </div>
  <div data-name="body" class="rf-spec__body" data-section="body">
    <meta content="SPEC-012" data-field="id" />
    <meta content="draft" data-field="status" />
    <meta content="" data-field="version" />
    <meta content="" data-field="supersedes" />
    <meta content="" data-field="tags" />
    <meta content="2026-04-10" data-field="created" />
    <meta content="2026-04-10" data-field="modified" />
    <header data-name="title" class="rf-spec__title">
      <h1 id="dependency-graph-visualisation">Dependency Graph Visualisation</h1>
    </header>
    <div data-name="body" class="rf-spec__body" data-section="body">
      <blockquote>
        <p>Render entity relationships as an interactive graph.</p>
      </blockquote>
      <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>
</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">
  <meta content="SPEC-003" data-field="id">
  <meta content="superseded" data-field="status">
  <meta content="1.0" data-field="version">
  <meta content="SPEC-001" data-field="supersedes">
  <meta content="" data-field="tags">
  <meta content="2026-04-10" data-field="created">
  <meta content="2026-04-10" data-field="modified">
  <header data-name="title">
    <h1 id="original-token-system">Original Token System</h1>
  </header>
  <div data-name="body">
    <blockquote>
      <p>First-generation design token architecture.</p>
    </blockquote>
    <p>This specification has been superseded. See the current token system specification for the active design.</p>
  </div>
</article>

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-created="2026-04-10" data-modified="2026-04-10" data-rune="spec" data-density="full">
  <div data-name="header" class="rf-spec__header" data-section="header">
    <span data-name="id-badge" data-meta-type="id" data-meta-rank="primary" class="rf-spec__id-badge">
      <span data-meta-label="" data-meta-label-hidden="">ID:</span>
      <span data-meta-value="">SPEC-003</span>
    </span>
    <span data-name="status-badge" data-meta-type="status" data-meta-rank="primary" data-meta-sentiment="caution" class="rf-spec__status-badge">
      <span data-meta-label="" data-meta-label-hidden="">Status:</span>
      <span data-meta-value="">superseded</span>
    </span>
    <span data-name="version-badge" data-meta-type="tag" data-meta-rank="secondary" class="rf-spec__version-badge">v1.0</span>
    <span data-name="supersedes-badge" data-meta-type="id" data-meta-rank="secondary" class="rf-spec__supersedes-badge">
      <span data-meta-label="">Supersedes:</span>
      <span data-meta-value="">SPEC-001</span>
    </span>
    <time data-name="created-badge" data-meta-type="temporal" data-meta-rank="secondary" class="rf-spec__created-badge">
      <span data-meta-label="">Created:</span>
      <span data-meta-value="">2026-04-10</span>
    </time>
    <time data-name="modified-badge" data-meta-type="temporal" data-meta-rank="secondary" class="rf-spec__modified-badge">
      <span data-meta-label="">Modified:</span>
      <span data-meta-value="">2026-04-10</span>
    </time>
  </div>
  <div data-name="body" class="rf-spec__body" data-section="body">
    <meta content="SPEC-003" data-field="id" />
    <meta content="superseded" data-field="status" />
    <meta content="1.0" data-field="version" />
    <meta content="SPEC-001" data-field="supersedes" />
    <meta content="" data-field="tags" />
    <meta content="2026-04-10" data-field="created" />
    <meta content="2026-04-10" data-field="modified" />
    <header data-name="title" class="rf-spec__title">
      <h1 id="original-token-system">Original Token System</h1>
    </header>
    <div data-name="body" class="rf-spec__body" data-section="body">
      <blockquote>
        <p>First-generation design token architecture.</p>
      </blockquote>
      <p>This specification has been superseded. See the current token system specification for the active design.</p>
    </div>
  </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

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan