@refrakt-md/lumina 0.21.0 → 0.22.0

package/dist/tokens.d.ts

@@ -5,9 +5,11 @@ import type { ThemeTokensConfig } from '@refrakt-md/types';
  * "quiet spectrum walk" syntax palette (teal / violet / rust / ochre /
  * sage), and the four muted-earthy status colours.
  *
- * This is the *source of truth* for Lumina's runtime CSS values; the
- * hand-authored `tokens/base.css` and `tokens/dark.css` mirror it
- * verbatim and a coverage test keeps the two in lockstep.
+ * This is the *source of truth* for Lumina's runtime CSS values. The
+ * `tokens/base.css` and `tokens/dark.css` files are **generated** from this
+ * export by `scripts/generate-tokens.mjs` (run as part of the package build via
+ * `generateThemeStylesheet`); a drift test (`test/token-generation.test.ts`)
+ * fails CI if the committed CSS diverges. Edit this file, never the CSS.
  *
  * Sites that want the previous cream-and-navy appearance opt into the
  * `tideline` preset shipping alongside this default (see

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAyL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAkO1B,CAAC"}

package/dist/tokens.js

@@ -4,9 +4,11 @@
  * "quiet spectrum walk" syntax palette (teal / violet / rust / ochre /
  * sage), and the four muted-earthy status colours.
  *
- * This is the *source of truth* for Lumina's runtime CSS values; the
- * hand-authored `tokens/base.css` and `tokens/dark.css` mirror it
- * verbatim and a coverage test keeps the two in lockstep.
+ * This is the *source of truth* for Lumina's runtime CSS values. The
+ * `tokens/base.css` and `tokens/dark.css` files are **generated** from this
+ * export by `scripts/generate-tokens.mjs` (run as part of the package build via
+ * `generateThemeStylesheet`); a drift test (`test/token-generation.test.ts`)
+ * fails CI if the committed CSS diverges. Edit this file, never the CSS.
  *
  * Sites that want the previous cream-and-navy appearance opt into the
  * `tideline` preset shipping alongside this default (see
@@ -19,6 +21,43 @@ export const luminaTokens = {
     font: {
         sans: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
         mono: "'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace",
+        // Lumina is a unified-neutral theme: its headings use the same sans as
+        // body. The slot exists so an editorial theme can swap in a serif/display
+        // family without touching rune CSS.
+        display: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    },
+    // SPEC-094 — typographic scale. A roughly-1.2 modular scale anchored at a
+    // 1rem body. Nothing consumes these yet (WORK-405 migrates Lumina's
+    // hardcoded sizes onto them); values match Lumina's current type feel.
+    text: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.5rem',
+    },
+    weight: {
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+    leading: {
+        tight: '1.2',
+        snug: '1.35',
+        normal: '1.5',
+        relaxed: '1.65',
+        loose: '2',
+    },
+    tracking: {
+        tight: '-0.01em',
+        normal: '0',
+        wide: '0.03em',
+        wider: '0.06em',
     },
     color: {
         text: '#1c1a17',

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAsB;IAC9C,IAAI,EAAE;QACL,IAAI,EAAE,mEAAmE;QACzE,IAAI,EAAE,yEAAyE;KAC/E;IAED,KAAK,EAAE;QACN,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,SAAS;QAClB,eAAe,EAAE,SAAS;QAC1B,oEAAoE;QACpE,qEAAqE;QACrE,6DAA6D;QAC7D,YAAY,EAAE,+DAA+D;QAC7E,wEAAwE;QACxE,uEAAuE;QACvE,YAAY,EAAE,SAAS;QAEvB,OAAO,EAAE;YACR,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,SAAS;SACjB;QAED,0EAA0E;QAC1E,sEAAsE;QACtE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAE9D,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,wDAAwD;YACxD,sEAAsE;YACtE,kEAAkE;YAClE,WAAW,EAAE,SAAS;SACtB;QAED,8DAA8D;QAC9D,oEAAoE;QACpE,oEAAoE;QACpE,+DAA+D;QAC/D,8DAA8D;QAC9D,6DAA6D;QAC7D,IAAI,EAAE;YACL,SAAS,EAAE,0DAA0D;YACrE,gBAAgB,EAAE,+CAA+C;YACjE,MAAM,EAAE,uBAAuB;SAC/B;KACD;IAED,MAAM,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,QAAQ;KACd;IAED,OAAO,EAAE;QACR,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,OAAO,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;SACf;KACD;IAED,KAAK,EAAE;QACN,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;KACf;IAED,MAAM,EAAE;QACP,IAAI,EAAE,MAAM;QACZ,EAAE,EAAE,4BAA4B;QAChC,EAAE,EAAE,wDAAwD;QAC5D,EAAE,EAAE,yDAAyD;QAC7D,EAAE,EAAE,yDAAyD;KAC7D;IAED,wEAAwE;IACxE,oEAAoE;IACpE,qEAAqE;IACrE,aAAa;IACb,MAAM,EAAE;QACP,OAAO,EAAE,SAAS,EAAM,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,eAAe;QACvC,MAAM,EAAE,SAAS,EAAO,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,gBAAgB;QACxC,OAAO,EAAE,SAAS,EAAM,mCAAmC;QAC3D,WAAW,EAAE,SAAS,EAAE,8BAA8B;QACtD,QAAQ,EAAE,SAAS,EAAK,6BAA6B;KACrD;IAED,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,EAAE,EAAE,SAAS;gBACb,OAAO,EAAE,SAAS;gBAClB,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,SAAS;gBAEvB,OAAO,EAAE;oBACR,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;oBACjB,MAAM,EAAE,SAAS;iBACjB;gBAED,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAE9D,IAAI,EAAE;oBACL,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,SAAS;oBACf,WAAW,EAAE,SAAS;iBACtB;aACD;YAED,MAAM,EAAE;gBACP,EAAE,EAAE,2BAA2B;gBAC/B,EAAE,EAAE,sDAAsD;gBAC1D,EAAE,EAAE,uDAAuD;gBAC3D,EAAE,EAAE,uDAAuD;aAC3D;YAED,uEAAuE;YACvE,qEAAqE;YACrE,MAAM,EAAE;gBACP,OAAO,EAAE,SAAS,EAAM,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,qBAAqB;gBAC7C,MAAM,EAAE,SAAS,EAAO,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,sBAAsB;gBAC9C,OAAO,EAAE,SAAS,EAAM,sBAAsB;gBAC9C,WAAW,EAAE,SAAS,EAAE,qBAAqB;gBAC7C,QAAQ,EAAE,SAAS,EAAK,oBAAoB;aAC5C;YAED,oEAAoE;YACpE,kEAAkE;YAClE,qEAAqE;YACrE,0BAA0B;YAC1B,KAAK,EAAE;gBACN,yBAAyB,EAAE,SAAS;gBACpC,6DAA6D;gBAC7D,wBAAwB,EAAE,MAAM;aAChC;SACD;KACD;IAED;;;;;;;;;qBASiB;IACjB,KAAK,EAAE;QACN,yBAAyB,EAAE,SAAS;QACpC,4EAA4E;QAC5E,2EAA2E;QAC3E,wBAAwB,EAAE,MAAM;KAChC;CACD,CAAC"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -80,6 +80,7 @@
 @import './styles/runes/faction.css';
 @import './styles/runes/feature.css';
 @import './styles/runes/figure.css';
+@import './styles/runes/placeholder.css';
 @import './styles/runes/gallery.css';
 @import './styles/runes/form.css';
 @import './styles/runes/grid.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -80,12 +80,13 @@
     "assets"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && node scripts/generate-tokens.mjs",
+    "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.21.0",
-    "@refrakt-md/transform": "0.21.0",
-    "@refrakt-md/types": "0.21.0"
+    "@refrakt-md/runes": "0.22.0",
+    "@refrakt-md/transform": "0.22.0",
+    "@refrakt-md/types": "0.22.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/checklist.css

@@ -40,7 +40,7 @@
 
 [data-checked="active"] {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 /* Skipped — muted with strikethrough */

package/styles/dimensions/density.css

@@ -9,14 +9,14 @@
 
 [data-density="full"] {
 	--rune-padding: var(--rf-spacing-md);
-	--rf-title-size: 1.5rem;
+	--rf-title-size: var(--rf-text-2xl);
 }
 
 /* ─── Compact: truncated descriptions, tight spacing ──────────────── */
 
 [data-density="compact"] {
 	--rune-padding: var(--rf-spacing-sm);
-	--rf-title-size: 1.25rem;
+	--rf-title-size: var(--rf-text-xl);
 }
 
 [data-density="compact"] [data-section="description"] {
@@ -34,7 +34,7 @@
 
 [data-density="minimal"] {
 	--rune-padding: var(--rf-spacing-xs);
-	--rf-title-size: 1rem;
+	--rf-title-size: var(--rf-text);
 }
 
 [data-density="minimal"] [data-section="description"] {

package/styles/dimensions/frame.css

@@ -42,7 +42,7 @@
  * guest so a displaced image's shadow falls into the slot's exposed
  * interior (clipped at the slot's `overflow: hidden` boundary like any
  * other in-slot content). */
-[data-section="media"][data-frame-shadow] > :is(img, video, [data-rune]) {
+[data-section="media"][data-frame-shadow] > :is(img, video, .rf-placeholder, [data-rune]) {
 	filter: var(--frame-shadow);
 }
 
@@ -50,7 +50,7 @@
 [style*="--frame-aspect"] { aspect-ratio: var(--frame-aspect); }
 
 /* ── Crop anchor — focal point when the guest is cut ─────────────────── */
-[style*="--frame-anchor"] > :is(img, video) { object-position: var(--frame-anchor); }
+[style*="--frame-anchor"] > :is(img, video, .rf-placeholder) { object-position: var(--frame-anchor); }
 
 /* ── Placement of the framed box within its slot ─────────────────────── */
 [style*="--frame-place-x"] { justify-self: var(--frame-place-x, auto); align-self: var(--frame-place-y, auto); }
@@ -59,7 +59,7 @@
 /* `[data-rune]` extends the rule to nested rune guests (codegroup, mockup,
  * chart, etc.), so frame chrome stays guest-agnostic — the same selector
  * pattern the displace rule uses. */
-[style*="--frame-oversize"] > :is(img, video, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
+[style*="--frame-oversize"] > :is(img, video, .rf-placeholder, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
 
 /* ── Displacement (peek / spill) — move the guest toward an edge/corner.
  * The host decides whether the guest is cropped or spills; this only moves it.
@@ -80,7 +80,7 @@
  *      parent's edge for a true breakout. */
 
 /* — Case 1: media-zone displace → translate the inner guest, zone clips. */
-[data-section="media"][data-displace] > :is(img, video, [data-rune]) {
+[data-section="media"][data-displace] > :is(img, video, .rf-placeholder, [data-rune]) {
 	transform: translate(var(--displace-x, 0), var(--displace-y, 0));
 }
 [data-section="media"][data-displace="top"]        { --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }

package/styles/dimensions/metadata.css

@@ -22,7 +22,7 @@
 [data-meta-type="id"],
 [data-meta-type="code"] {
 	font-family: var(--rf-font-mono, monospace);
-	font-size: var(--meta-font-size, 0.8125rem);
+	font-size: var(--meta-font-size, var(--rf-text-sm));
 }
 
 /* IDs read as primary-coloured references wherever they appear (eyebrow
@@ -30,7 +30,7 @@
  * not a per-layout one. `code` (e.g. API paths) stays neutral monospace. */
 [data-meta-type="id"] {
 	color: var(--rf-color-primary);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 [data-meta-type="quantity"] {
@@ -123,14 +123,14 @@
 }
 
 [data-zone-layout="definition-list"] dt {
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 }
 
 [data-zone-layout="definition-list"] dd {
 	margin: 0;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 
 /* Multi-value dd (fields with `splitOn`) renders a row of chips
@@ -145,7 +145,7 @@
 
 /* Label element within a chip — thin, muted; pairs visually with the value */
 [data-meta-label] {
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	opacity: 0.65;
 }
 

package/styles/dimensions/sections.css

@@ -33,9 +33,9 @@
  * through nested densities AND beat per-rune title sizes. */
 [data-section="title"] {
 	font-family: var(--rf-font-sans);
-	font-size: var(--rf-title-size, 1.5rem);
-	font-weight: 700;
-	line-height: 1.2;
+	font-size: var(--rf-title-size, var(--rf-text-2xl));
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
 	color: var(--rf-color-text);
 	margin: 0;
 }
@@ -43,8 +43,8 @@
 /* ─── Description: secondary text ─────────────────────────────────── */
 
 [data-section="description"] {
-	font-size: 1rem;
-	line-height: 1.5;
+	font-size: var(--rf-text);
+	line-height: var(--rf-leading-normal);
 	color: var(--rf-color-muted);
 	margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
 }
@@ -52,7 +52,7 @@
 /* ─── Body: main content ──────────────────────────────────────────── */
 
 [data-section="body"] {
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-text);
 }
 

package/styles/dimensions/sequence.css

@@ -23,8 +23,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	font-variant-numeric: tabular-nums;
 	color: var(--rf-color-primary);
 	background: var(--rf-color-surface-active);
@@ -110,7 +110,7 @@
 [data-density="compact"] [data-sequence="numbered"] > li::before {
 	width: 1.25rem;
 	height: 1.25rem;
-	font-size: 0.625rem;
+	font-size: var(--rf-text-xs);
 }
 
 [data-density="compact"] [data-sequence="connected"] > li {

package/styles/global.css

@@ -9,7 +9,7 @@ html {
 	font-family: var(--rf-font-sans);
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
-	line-height: 1.7;
+	line-height: var(--rf-leading-relaxed);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
@@ -97,17 +97,17 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-	line-height: 1.25;
+	line-height: var(--rf-leading-tight);
 	margin-top: 2em;
 	margin-bottom: 0.5em;
-	font-weight: 650;
-	letter-spacing: -0.015em;
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-tight);
 }
 
-h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.2rem; }
-h4 { font-size: 1.05rem; }
+h1 { font-size: var(--rf-text-3xl); font-weight: var(--rf-weight-bold); letter-spacing: var(--rf-tracking-tight); }
+h2 { font-size: var(--rf-text-2xl); }
+h3 { font-size: var(--rf-text-xl); }
+h4 { font-size: var(--rf-text); }
 
 p {
 	margin-top: 0;
@@ -124,7 +124,7 @@ a:hover {
 	text-decoration: underline;
 }
 
-strong { font-weight: 600; }
+strong { font-weight: var(--rf-weight-semibold); }
 
 code {
 	font-family: var(--rf-font-mono);
@@ -142,8 +142,8 @@ pre {
 	border-radius: var(--rf-radius-md);
 	overflow-x: auto;
 	margin: 1.5rem 0;
-	font-size: 0.875rem;
-	line-height: 1.7;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	border: 1px solid var(--rf-color-border);
 }
 
@@ -183,17 +183,17 @@ table {
 	width: 100%;
 	border-collapse: collapse;
 	margin: 1.5rem 0;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 }
 
 th {
 	text-align: left;
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	padding: 0.625rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	text-transform: uppercase;
-	letter-spacing: 0.04em;
+	letter-spacing: var(--rf-tracking-wide);
 	color: var(--rf-color-muted);
 }
 

package/styles/layouts/blog.css

@@ -45,9 +45,9 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
 .rf-blog-header img,
 .rf-blog-header p:first-child a > .rf-icon {
@@ -60,7 +60,7 @@
 	color: currentColor;
 }
 .rf-blog-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-blog-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -93,16 +93,16 @@
 	max-width: 42rem;
 }
 .rf-blog-index__title {
-	font-size: 2.25rem;
-	font-weight: 800;
-	line-height: 1.15;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
+	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 1rem;
 	color: var(--rf-color-text);
 }
 .rf-blog-index__body {
 	margin-bottom: 2rem;
-	line-height: 1.8;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-blog-index__body:empty {
@@ -130,8 +130,8 @@
 	text-decoration: none;
 }
 .rf-blog-card__title {
-	font-size: 1.35rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
 	margin: 0 0 0.5rem;
 	color: var(--rf-color-text);
 }
@@ -139,7 +139,7 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.5rem;
 }
@@ -149,8 +149,8 @@
 }
 .rf-blog-card__desc {
 	margin: 0 0 0.75rem;
-	font-size: 0.95rem;
-	line-height: 1.6;
+	font-size: var(--rf-text);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-blog-card__tags {
@@ -160,8 +160,8 @@
 	margin-bottom: 0.75rem;
 }
 .rf-blog-card__link {
-	font-size: 0.85rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary, var(--rf-color-text));
 }
 
@@ -175,10 +175,10 @@
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-blog-article__title {
-	font-size: 2.25rem;
-	font-weight: 800;
-	line-height: 1.15;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
+	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 1rem;
 	color: var(--rf-color-text);
 }
@@ -186,11 +186,11 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-blog-article__meta time {
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 .rf-blog-article__author::before {
 	content: '\00b7';
@@ -203,8 +203,8 @@
 	margin-top: 0.75rem;
 }
 .rf-blog-article__tag {
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	padding: 0.2rem 0.6rem;
 	border-radius: 9999px;
 	background: var(--rf-color-surface);
@@ -214,7 +214,7 @@
 
 /* ---- Article body typography ---- */
 .rf-blog-article__body {
-	line-height: 1.8;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-blog-article__body h2 {
 	margin-top: 2.5rem;
@@ -234,16 +234,16 @@
 .rf-blog-sidebar {
 	position: sticky;
 	top: 2.5rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-blog-sidebar h2,
 .rf-blog-sidebar h3,
 .rf-blog-sidebar h4 {
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	margin-top: 0;
 	margin-bottom: 0.5rem;
@@ -269,7 +269,7 @@
 	border-top: 1px solid var(--rf-color-border);
 	padding: 2rem 1.5rem;
 	text-align: center;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 
@@ -282,7 +282,7 @@
 		grid-template-columns: 1fr;
 	}
 	.rf-blog-article__title {
-		font-size: 1.75rem;
+		font-size: var(--rf-text-3xl);
 	}
 	.rf-blog-sidebar {
 		position: static;

package/styles/layouts/default.css

@@ -31,9 +31,9 @@
 }
 .rf-header h1, .rf-header h2, .rf-header h3 {
 	margin: 0;
-	font-size: 1.2rem;
-	font-weight: 600;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-tight);
 	line-height: 1;
 }
 .rf-header a {
@@ -48,9 +48,9 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
 .rf-header img,
 .rf-header p:first-child a > .rf-icon {
@@ -66,7 +66,7 @@
 	color: currentColor;
 }
 .rf-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -234,7 +234,7 @@
 	border-top: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg);
 	color: var(--rf-color-muted);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-footer > * {
 	width: 100%;
@@ -242,6 +242,6 @@
 }
 .rf-footer p {
 	margin: 1.5rem 0 0;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }

package/styles/layouts/docs.css

@@ -45,9 +45,9 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
 .rf-docs-header img,
 .rf-docs-header p:first-child a > .rf-icon {
@@ -60,7 +60,7 @@
 	color: currentColor;
 }
 .rf-docs-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-docs-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -215,7 +215,7 @@ html:has(.rf-docs-header) {
 	color: var(--rf-color-text);
 }
 .rf-docs-toolbar__breadcrumb {
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
 	 * the available space rather than starting at its full content width —
@@ -237,7 +237,7 @@ html:has(.rf-docs-header) {
 }
 .rf-docs-breadcrumb-page {
 	color: var(--rf-color-text);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 /* ---- Hide TOC on medium screens ---- */

package/styles/layouts/mobile.css

@@ -68,8 +68,8 @@
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
 	display: block;
 	padding: 0;
-	font-size: 1.5rem;
-	font-weight: 700;
+	font-size: var(--rf-text-2xl);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	text-decoration: none;
 	background: transparent;