refrakt.mdRune Catalog
Runes are Markdoc tags that reinterpret standard Markdown. A heading inside {% nav %} becomes a group title; a list inside {% recipe %} becomes ingredients. Same primitives, different meaning based on context.
Runes are split into two categories: core runes that ship built-in with @refrakt-md/runes, and official packages that you install separately.
Core Runes
These runes are available out of the box — no extra installation needed. They cover universal content primitives, layout, code/data display, and site structure.
Content
| Rune | Description |
|---|---|
| hint | Callouts and admonitions for supplementary information |
| figure | Enhanced images with captions, sizing, and alignment |
| sidenote | Margin notes and footnotes alongside main content |
| annotate | Content with margin annotations and notes |
| pullquote | Editorial pull quotes with alignment and style variants |
| textblock | Styled text blocks with drop caps, columns, and lead paragraphs |
| mediatext | Side-by-side image and text layouts with configurable ratios |
| conversation | Chat and dialogue display with alternating speaker messages |
| reveal | Progressive disclosure where content appears step by step |
| embed | Embed external content like videos, tweets, and code demos |
| icon | Inline icons from the theme's icon registry |
Layout
| Rune | Description |
|---|---|
| grid | Generic grid layout for arranging content in columns |
| tabs | Tabbed content panels with heading-based tab labels |
| accordion | Collapsible accordion sections for FAQ-style content |
| juxtapose | Interactive side-by-side comparison with slider, toggle, fade, and auto modes |
| details | Collapsible disclosure blocks for supplementary content |
| sandbox | Isolated HTML/CSS/JS rendering in an iframe |
Code & Data
| Rune | Description |
|---|---|
| codegroup | Tabbed code block with language tabs |
| compare | Side-by-side code comparison panels |
| diff | Side-by-side or unified diff view between two code blocks |
| datatable | Interactive data table with sorting, filtering, and pagination |
| chart | Chart visualization from a Markdown table |
| diagram | Mermaid diagram rendering from code blocks |
| budget | Travel and project budgets with categories, line items, and totals |
| form | Accessible HTML forms from Markdown with smart field type inference |
Site
| Rune | Description |
|---|---|
| layout | Structural runes for defining page layouts and named content regions (includes {% region %}) |
| nav | Navigation structure for sidebar and site navigation |
| toc | Auto-generated table of contents from page headings |
| breadcrumb | Navigation breadcrumbs showing page hierarchy |
| error | Internal rune — displays validation errors as table rows (not used directly in content) |
Official Packages
Official rune packages are maintained by the refrakt team and styled by the Lumina theme. Install the packages you need and add them to your config. Each package page includes installation instructions, a full rune reference, and documentation for any additional features like CLI commands or pipeline hooks.
@refrakt-md/marketing
Landing page and conversion runes for marketing sites and product pages.
| Rune | Description |
|---|---|
| hero | Full-width intro sections for landing pages with background support and action buttons |
| cta | Focused call-to-action blocks with headlines, descriptions, and action buttons |
| bento | Magazine-style bento grid where heading levels control cell size |
| feature | Feature showcases with name, description, and optional icons |
| steps | Step-by-step instructions with numbered indicators |
| pricing | Pricing tables with tier comparison |
| testimonial | Customer testimonials and reviews |
| comparison | Product and feature comparison matrices from Markdown |
@refrakt-md/docs
Technical documentation runes for API references, code symbols, and changelogs.
| Rune | Description |
|---|---|
| api | API endpoint documentation with method, path, and parameters |
| symbol | Code construct documentation for functions, classes, interfaces, enums, and type aliases |
| changelog | Version history with release notes |
@refrakt-md/storytelling
Worldbuilding and narrative runes for fiction, games, and creative writing.
| Rune | Description |
|---|---|
| character | Rich character profiles with sections for backstory, abilities, and more |
| realm | Location profiles for worldbuilding with geography and notable features |
| lore | In-world knowledge entries for myths, prophecies, and historical records |
| faction | Organizations and groups with ranks, holdings, and alignment |
| plot | Story arcs and quest trackers with progress markers |
| bond | Relationship connections between characters or entities |
| storyboard | Comic and storyboard layouts from images and captions |
@refrakt-md/places
Event planning and location runes for travel guides and venue pages.
| Rune | Description |
|---|---|
| event | Event information with date, location, and agenda |
| map | Interactive map visualization from Markdown lists of locations |
| itinerary | Day-by-day travel itineraries with timed stops and locations |
@refrakt-md/business
Organizational runes for team directories, company profiles, and timelines.
| Rune | Description |
|---|---|
| cast | People directory for team pages and speaker lineups |
| organization | Structured business or organization information |
| timeline | Chronological events displayed as a timeline |
@refrakt-md/learning
Educational runes for tutorials, recipes, and instructional content.
| Rune | Description |
|---|---|
| howto | Step-by-step how-to guide with tools and instructions |
| recipe | Structured recipe with ingredients, steps, and chef tips |
@refrakt-md/design
Design system runes for color palettes, typography specimens, and token visualization. Includes a cross-page pipeline for design token aggregation.
| Rune | Description |
|---|---|
| swatch | Inline color chip for referencing colors in prose |
| palette | Color swatch grid with optional WCAG contrast and accessibility info |
| typography | Font specimen display with live Google Fonts loading |
| spacing | Spacing scale, border radius, and shadow token display |
| preview | Component showcase with theme toggle, responsive viewports, and adjustable width |
| mockup | Device frame mockups for screenshots — browser, phone, tablet, laptop, and watch |
| design-context | Unified design token card composing palette, typography, and spacing runes |
@refrakt-md/media
Audio and music runes for playlists, tracks, and audio players.
| Rune | Description |
|---|---|
| playlist | Curated playlist with track listing for albums, podcasts, and mixes |
| track | Standalone track or recording with metadata |
| audio | Audio player with optional waveform and chapter markers |
@refrakt-md/plan
Spec-driven project planning with AI-native workflows. Includes CLI commands and a workflow guide.
| Rune | Description |
|---|---|
| spec | Specification document with status tracking and versioning |
| work | Work item with acceptance criteria, priority, and complexity tracking |
| bug | Bug report with structured reproduction steps and severity |
| decision | Architecture decision record with context, options, and rationale |
| milestone | Named release target with goals and status |
| backlog | Aggregation view of work items and bugs with filtering, sorting, and grouping |
| decision-log | Chronological view of architecture decision records |
| plan-progress | Progress summary showing status counts per entity type |
| plan-activity | Recent activity feed sorted by file modification time |