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.
Milestone
A named release target or goal. Not a sprint — no timebox, no velocity, no ceremonies. A milestone is a coherent set of capabilities that together deliver value. When all work items assigned to it are done, the milestone is complete.
Paragraphs straight after the title become the milestone's lead. Everything after them — a goals list, notes, and any H2 sections — renders as the body, in the order you wrote it.
Active milestone
A milestone currently in progress with goals.
{% milestone name="v0.5.0" target="2026-03-29" status="active" %}
# v0.5.0 — Layout & Tint
- Complete alignment system migration
- Ship tint rune with dark mode support
- Publish layout spec as site documentation
- Resolve showcase bleed overflow bug
{% /milestone %}<section data-rune="milestone" data-rune-fields="{"name":"v0.5.0","target":"2026-03-29","status":"active","created":"2026-10-26","modified":"2026-10-26"}">
<header data-name="title">
<h1 id="v050-layout-tint">v0.5.0 — Layout & Tint</h1>
</header>
<div data-name="body">
<ul>
<li>Complete alignment system migration</li>
<li>Ship tint rune with dark mode support</li>
<li>Publish layout spec as site documentation</li>
<li>Resolve showcase bleed overflow bug</li>
</ul>
</div>
</section>v0.5.0active
v0.5.0 — Layout & Tint
- Complete alignment system migration
- Ship tint rune with dark mode support
- Publish layout spec as site documentation
- Resolve showcase bleed overflow bug
<section class="rf-milestone rf-milestone--v0.5.0 rf-milestone--active" data-name="v0.5.0" data-status="active" data-target="2026-03-29" data-created="2026-10-26" data-modified="2026-10-26" data-rune="milestone" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-milestone__eyebrow">
<span data-meta-type="id">v0.5.0</span>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive" data-align="end">active</span>
</div>
<header data-name="title" class="rf-milestone__title" data-section="title">
<h1 id="v050-layout-tint">v0.5.0 — Layout & Tint</h1>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-milestone__metadata">
<div data-name="row" data-field="target" class="rf-milestone__row">
<dt data-meta-label="">Target</dt>
<dd data-meta-type="temporal">
<time datetime="2026-03-29">2026-03-29</time>
</dd>
</div>
<div data-name="row" data-field="created" class="rf-milestone__row">
<dt data-meta-label="">Created</dt>
<dd data-meta-type="temporal">
<time datetime="2026-10-26">2026-10-26</time>
</dd>
</div>
<div data-name="row" data-field="modified" class="rf-milestone__row">
<dt data-meta-label="">Modified</dt>
<dd data-meta-type="temporal">
<time datetime="2026-10-26">2026-10-26</time>
</dd>
</div>
</dl>
<div data-name="body" class="rf-milestone__body" data-section="body">
<ul>
<li>Complete alignment system migration</li>
<li>Ship tint rune with dark mode support</li>
<li>Publish layout spec as site documentation</li>
<li>Resolve showcase bleed overflow bug</li>
</ul>
</div>
</section>Planning milestone
A future milestone still being scoped.
{% milestone name="v1.0" target="2026-06-01" status="planning" %}
# v1.0 — Stable Release
- Stabilise all public APIs
- Complete documentation for all runes
- Launch theme marketplace
- Publish migration guide from v0.x
{% /milestone %}<section data-rune="milestone" data-rune-fields="{"name":"v1.0","target":"2026-06-01","status":"planning","created":"2026-10-26","modified":"2026-10-26"}">
<header data-name="title">
<h1 id="v10-stable-release">v1.0 — Stable Release</h1>
</header>
<div data-name="body">
<ul>
<li>Stabilise all public APIs</li>
<li>Complete documentation for all runes</li>
<li>Launch theme marketplace</li>
<li>Publish migration guide from v0.x</li>
</ul>
</div>
</section>v1.0planning
v1.0 — Stable Release
- Stabilise all public APIs
- Complete documentation for all runes
- Launch theme marketplace
- Publish migration guide from v0.x
<section class="rf-milestone rf-milestone--v1.0 rf-milestone--planning" data-name="v1.0" data-status="planning" data-target="2026-06-01" data-created="2026-10-26" data-modified="2026-10-26" data-rune="milestone" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-milestone__eyebrow">
<span data-meta-type="id">v1.0</span>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="neutral" data-align="end">planning</span>
</div>
<header data-name="title" class="rf-milestone__title" data-section="title">
<h1 id="v10-stable-release">v1.0 — Stable Release</h1>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-milestone__metadata">
<div data-name="row" data-field="target" class="rf-milestone__row">
<dt data-meta-label="">Target</dt>
<dd data-meta-type="temporal">
<time datetime="2026-06-01">2026-06-01</time>
</dd>
</div>
<div data-name="row" data-field="created" class="rf-milestone__row">
<dt data-meta-label="">Created</dt>
<dd data-meta-type="temporal">
<time datetime="2026-10-26">2026-10-26</time>
</dd>
</div>
<div data-name="row" data-field="modified" class="rf-milestone__row">
<dt data-meta-label="">Modified</dt>
<dd data-meta-type="temporal">
<time datetime="2026-10-26">2026-10-26</time>
</dd>
</div>
</dl>
<div data-name="body" class="rf-milestone__body" data-section="body">
<ul>
<li>Stabilise all public APIs</li>
<li>Complete documentation for all runes</li>
<li>Launch theme marketplace</li>
<li>Publish migration guide from v0.x</li>
</ul>
</div>
</section>Completed milestone
A milestone with all goals achieved.
{% milestone name="v0.4.0" status="complete" %}
# v0.4.0 — Foundation
- Core rune system operational
- Identity transform engine complete
- Lumina theme baseline shipped
{% /milestone %}<section data-rune="milestone" data-rune-fields="{"name":"v0.4.0","target":"","status":"complete","created":"2026-10-26","modified":"2026-10-26"}">
<header data-name="title">
<h1 id="v040-foundation">v0.4.0 — Foundation</h1>
</header>
<div data-name="body">
<ul>
<li>Core rune system operational</li>
<li>Identity transform engine complete</li>
<li>Lumina theme baseline shipped</li>
</ul>
</div>
</section>v0.4.0complete
v0.4.0 — Foundation
- Core rune system operational
- Identity transform engine complete
- Lumina theme baseline shipped
<section class="rf-milestone rf-milestone--v0.4.0 rf-milestone--complete" data-name="v0.4.0" data-status="complete" data-target="" data-created="2026-10-26" data-modified="2026-10-26" data-rune="milestone" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-milestone__eyebrow">
<span data-meta-type="id">v0.4.0</span>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive" data-align="end">complete</span>
</div>
<header data-name="title" class="rf-milestone__title" data-section="title">
<h1 id="v040-foundation">v0.4.0 — Foundation</h1>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-milestone__metadata">
<div data-name="row" data-field="created" class="rf-milestone__row">
<dt data-meta-label="">Created</dt>
<dd data-meta-type="temporal">
<time datetime="2026-10-26">2026-10-26</time>
</dd>
</div>
<div data-name="row" data-field="modified" class="rf-milestone__row">
<dt data-meta-label="">Modified</dt>
<dd data-meta-type="temporal">
<time datetime="2026-10-26">2026-10-26</time>
</dd>
</div>
</dl>
<div data-name="body" class="rf-milestone__body" data-section="body">
<ul>
<li>Core rune system operational</li>
<li>Identity transform engine complete</li>
<li>Lumina theme baseline shipped</li>
</ul>
</div>
</section>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
name | string | ✓ | Milestone name (e.g., "v0.5.0"). |
target | string | — | Target date (aspirational, not a commitment). |
status | "planning" | "active" | "complete" | — | Current status: planning, active, or complete. |
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 |