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.
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-09-13","modified":"2026-09-13"}">
<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-09-13" data-modified="2026-09-13" 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-09-13">2026-09-13</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-09-13">2026-09-13</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-09-13","modified":"2026-09-13"}">
<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-09-13" data-modified="2026-09-13" 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-09-13">2026-09-13</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-09-13">2026-09-13</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-09-13","modified":"2026-09-13"}">
<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-09-13" data-modified="2026-09-13" 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-09-13">2026-09-13</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-09-13">2026-09-13</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 |