@refrakt-md/lumina 0.9.2 → 0.9.3

package/contracts/structures.json

@@ -284,11 +284,6 @@
 				"{content}"
 			],
 			"modifiers": {
-				"title": {
-					"source": "meta",
-					"classPattern": ".rf-budget--{value}",
-					"dataAttribute": "data-title"
-				},
 				"currency": {
 					"source": "meta",
 					"default": "USD",
@@ -331,19 +326,11 @@
 					"selector": ".rf-budget__header",
 					"source": "structure",
 					"conditionAny": [
-						"title",
 						"currency",
 						"travelers",
 						"duration"
 					]
 				},
-				"title": {
-					"tag": "h2",
-					"selector": ".rf-budget__title",
-					"source": "structure",
-					"parent": "header",
-					"condition": "title"
-				},
 				"meta": {
 					"tag": "div",
 					"selector": ".rf-budget__meta",
@@ -2365,7 +2352,7 @@
 			"root": ".rf-event",
 			"dataRune": "event",
 			"childOrder": [
-				"details",
+				"header",
 				"{content:content}"
 			],
 			"modifiers": {
@@ -2391,42 +2378,34 @@
 				}
 			},
 			"elements": {
-				"details": {
-					"tag": "div",
-					"selector": ".rf-event__details",
-					"source": "structure"
-				},
-				"detail": {
+				"header": {
 					"tag": "div",
-					"selector": ".rf-event__detail",
+					"selector": ".rf-event__header",
 					"source": "structure",
-					"parent": "details",
-					"condition": "date"
-				},
-				"label": {
-					"tag": "span",
-					"selector": ".rf-event__label",
-					"source": "structure",
-					"parent": "detail"
+					"conditionAny": [
+						"date",
+						"location",
+						"url"
+					]
 				},
-				"value": {
-					"tag": "span",
-					"selector": ".rf-event__value",
+				"meta": {
+					"tag": "div",
+					"selector": ".rf-event__meta",
 					"source": "structure",
-					"parent": "detail"
+					"parent": "header"
 				},
-				"end-date": {
+				"meta-item": {
 					"tag": "span",
-					"selector": ".rf-event__end-date",
+					"selector": ".rf-event__meta-item",
 					"source": "structure",
-					"parent": "detail",
-					"condition": "endDate"
+					"parent": "meta",
+					"condition": "date"
 				},
 				"register": {
 					"tag": "a",
 					"selector": ".rf-event__register",
 					"source": "structure",
-					"parent": "details",
+					"parent": "header",
 					"condition": "url"
 				},
 				"content": {

package/dist/config.js

@@ -6,74 +6,74 @@ export const luminaConfig = mergeThemeConfig(baseConfig, {
     tints: {
         base: {
             light: {
-                background: '#ffffff',
-                surface: '#f8fafc',
-                primary: '#1a1a2e',
-                secondary: '#64748b',
-                accent: '#0ea5e9',
-                border: '#e2e8f0',
+                background: 'var(--rf-color-bg)',
+                surface: 'var(--rf-color-surface)',
+                primary: 'var(--rf-color-text)',
+                secondary: 'var(--rf-color-muted)',
+                accent: 'var(--rf-color-primary)',
+                border: 'var(--rf-color-border)',
             },
             dark: {
-                background: '#0c1222',
-                surface: '#0f172a',
-                primary: '#e2e8f0',
-                secondary: '#94a3b8',
-                accent: '#38bdf8',
-                border: 'rgba(255, 255, 255, 0.1)',
+                background: 'var(--rf-color-bg)',
+                surface: 'var(--rf-color-surface)',
+                primary: 'var(--rf-color-text)',
+                secondary: 'var(--rf-color-muted)',
+                accent: 'var(--rf-color-primary)',
+                border: 'var(--rf-color-border)',
             },
         },
         subtle: {
             light: {
-                background: '#f8f9fb',
-                surface: '#f8fafc',
-                primary: '#1a1a2e',
-                secondary: '#64748b',
-                accent: '#0ea5e9',
-                border: '#e2e8f0',
+                background: 'var(--rf-color-surface)',
+                surface: 'var(--rf-color-surface-hover)',
+                primary: 'var(--rf-color-text)',
+                secondary: 'var(--rf-color-muted)',
+                accent: 'var(--rf-color-primary)',
+                border: 'var(--rf-color-border)',
             },
             dark: {
-                background: '#111827',
-                surface: '#0f172a',
-                primary: '#e2e8f0',
-                secondary: '#94a3b8',
-                accent: '#38bdf8',
-                border: 'rgba(255, 255, 255, 0.1)',
+                background: 'var(--rf-color-surface)',
+                surface: 'var(--rf-color-surface-hover)',
+                primary: 'var(--rf-color-text)',
+                secondary: 'var(--rf-color-muted)',
+                accent: 'var(--rf-color-primary)',
+                border: 'var(--rf-color-border)',
             },
         },
         warm: {
             light: {
-                background: '#fdf6e3',
-                primary: '#5c4a32',
-                accent: '#c47d3b',
-                border: '#e0d5c0',
+                background: 'var(--rf-color-surface-active)',
+                primary: 'var(--rf-color-text)',
+                accent: 'var(--rf-color-warning)',
+                border: 'var(--rf-color-border)',
             },
             dark: {
-                background: '#2a2118',
-                primary: '#e8d5b7',
-                accent: '#e0a86e',
+                background: '#2a2018',
+                primary: 'var(--rf-color-text)',
+                accent: 'var(--rf-color-warning)',
                 border: '#4a3f33',
             },
         },
         cool: {
             light: {
-                background: '#f0f4ff',
-                primary: '#1e3a5f',
-                accent: '#3b82f6',
-                border: '#c7d7f0',
+                background: 'var(--rf-color-info-bg)',
+                primary: 'var(--rf-color-text)',
+                accent: 'var(--rf-color-primary)',
+                border: 'var(--rf-color-info-border)',
             },
             dark: {
-                background: '#0f1a2e',
-                primary: '#c7d7f0',
-                accent: '#60a5fa',
-                border: '#1e3a5f',
+                background: 'var(--rf-color-primary-950)',
+                primary: 'var(--rf-color-primary-300)',
+                accent: 'var(--rf-color-primary)',
+                border: 'var(--rf-color-primary-700)',
             },
         },
         dark: {
             mode: 'dark',
             dark: {
-                background: '#1a1a2e',
-                primary: '#e0e0e0',
-                accent: '#e94560',
+                background: 'var(--rf-color-primary-700)',
+                primary: 'var(--rf-color-primary-50)',
+                accent: 'var(--rf-color-danger)',
             },
         },
     },

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,0BAA0B;aAClC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,0BAA0B;aAClC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;aACjB;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,oBAAoB;gBAChC,OAAO,EAAE,yBAAyB;gBAClC,OAAO,EAAE,sBAAsB;gBAC/B,SAAS,EAAE,uBAAuB;gBAClC,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,oBAAoB;gBAChC,OAAO,EAAE,yBAAyB;gBAClC,OAAO,EAAE,sBAAsB;gBAC/B,SAAS,EAAE,uBAAuB;gBAClC,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,UAAU,EAAE,yBAAyB;gBACrC,OAAO,EAAE,+BAA+B;gBACxC,OAAO,EAAE,sBAAsB;gBAC/B,SAAS,EAAE,uBAAuB;gBAClC,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,yBAAyB;gBACrC,OAAO,EAAE,+BAA+B;gBACxC,OAAO,EAAE,sBAAsB;gBAC/B,SAAS,EAAE,uBAAuB;gBAClC,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,gCAAgC;gBAC5C,OAAO,EAAE,sBAAsB;gBAC/B,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,sBAAsB;gBAC/B,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,yBAAyB;gBACrC,OAAO,EAAE,sBAAsB;gBAC/B,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,6BAA6B;aACrC;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,6BAA6B;gBACzC,OAAO,EAAE,6BAA6B;gBACtC,MAAM,EAAE,yBAAyB;gBACjC,MAAM,EAAE,6BAA6B;aACrC;SACD;QACD,IAAI,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE;gBACL,UAAU,EAAE,6BAA6B;gBACzC,OAAO,EAAE,4BAA4B;gBACrC,MAAM,EAAE,wBAAwB;aAChC;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}

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.9.2",
+  "version": "0.9.3",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -43,9 +43,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.9.2",
-    "@refrakt-md/transform": "0.9.2",
-    "@refrakt-md/types": "0.9.2"
+    "@refrakt-md/runes": "0.9.3",
+    "@refrakt-md/transform": "0.9.3",
+    "@refrakt-md/types": "0.9.3"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/density.css

@@ -49,3 +49,25 @@
 [data-density="minimal"] [data-meta-rank="secondary"] {
 	display: none;
 }
+
+/* ─── Nested density scoping ─────────────────────────────────────── *
+ * Density rules use descendant selectors that leak into nested runes
+ * with their own density. These resets ensure each rune's density is
+ * self-contained — e.g. a full-density recipe inside a compact-density
+ * preview should not have its description truncated.
+ * ──────────────────────────────────────────────────────────────────── */
+
+[data-density="compact"] [data-density="full"] [data-section="description"] {
+	display: block;
+	-webkit-line-clamp: unset;
+	-webkit-box-orient: initial;
+	overflow: visible;
+}
+
+[data-density="compact"] [data-density="full"] [data-meta-rank="secondary"],
+[data-density="minimal"] [data-density="full"] [data-section="description"],
+[data-density="minimal"] [data-density="full"] [data-section="body"],
+[data-density="minimal"] [data-density="full"] [data-section="footer"],
+[data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"] {
+	display: revert;
+}

package/styles/dimensions/metadata.css

@@ -9,13 +9,9 @@
 
 /* ─── Rank ─────────────────────────────────────────────────────────── */
 
-[data-meta-rank="primary"] {
-	--meta-font-size: 0.8125rem;
-}
-
+[data-meta-rank="primary"],
 [data-meta-rank="secondary"] {
-	--meta-font-size: 0.75rem;
-	opacity: 0.8;
+	--meta-font-size: 0.8125rem;
 }
 
 /* ─── Sentiment ────────────────────────────────────────────────────── */

package/styles/dimensions/sections.css

@@ -36,7 +36,7 @@
 
 /* Scale title with density */
 [data-density="compact"] [data-section="title"] {
-	font-size: 2.125rem;
+	font-size: 1.25rem;
 }
 
 [data-density="minimal"] [data-section="title"] {

package/styles/dimensions/surfaces.css

@@ -31,11 +31,14 @@
 .rf-swatch,
 .rf-palette,
 .rf-typography,
+.rf-spacing,
+.rf-design-context,
 .rf-itinerary,
 .rf-symbol,
 .rf-changelog,
 .rf-api,
-.rf-howto {
+.rf-howto,
+.rf-form {
 	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-md);
 	padding: var(--rune-padding, var(--rf-spacing-md));
@@ -49,14 +52,12 @@
 .rf-conversation,
 .rf-annotate,
 .rf-xref,
-.rf-diff,
 .rf-pullquote,
 .rf-textblock,
 .rf-nav,
 .rf-breadcrumb,
 .rf-toc,
-.rf-datatable,
-.rf-form {
+.rf-datatable {
 	padding: var(--rune-padding, var(--rf-spacing-sm)) 0;
 }
 

package/styles/elements/blockquote.css

@@ -3,7 +3,7 @@ blockquote {
 	position: relative;
 	border-left: 3px solid var(--rf-color-primary);
 	margin: 1.5rem 0;
-	padding: 1rem 1.25rem 1rem 2.75rem;
+	padding: 1rem 1.25rem 1rem 3.25rem;
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;

package/styles/elements/code.css

@@ -1,3 +1,14 @@
+/* Standalone code blocks in prose — the rf-codeblock wrapper (from Pre element
+   override) zeros the inner pre margin, so the wrapper itself carries spacing.
+   Inside codegroup the margin is removed by .rf-codegroup .rf-codeblock. */
+.rf-codeblock {
+	margin: 1.5rem 0;
+}
+
+.rf-codeblock > pre {
+	margin: 0;
+}
+
 /* Code wrapper — behavior-injected copy button for code blocks */
 .rf-code-wrapper {
 	position: relative;

package/styles/elements/table.css

@@ -3,23 +3,29 @@
 	overflow-x: auto;
 	-webkit-overflow-scrolling: touch;
 	margin: 1.5rem 0;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
 }
 .rf-table-wrapper table {
 	margin: 0;
 	border-collapse: collapse;
 	width: 100%;
-	min-width: 100%;
 }
 .rf-table-wrapper th {
-	background: var(--rf-color-surface);
+	white-space: nowrap;
 }
-.rf-table-wrapper th:first-child {
-	border-top-left-radius: var(--rf-radius-md);
+.rf-table-wrapper td {
+	white-space: nowrap;
 }
-.rf-table-wrapper th:last-child {
-	border-top-right-radius: var(--rf-radius-md);
+.rf-table-wrapper td:last-child {
+	white-space: normal;
+	min-width: 20rem;
+}
+.rf-table-wrapper th:first-child,
+.rf-table-wrapper td:first-child {
+	padding-left: 0;
+}
+.rf-table-wrapper th:last-child,
+.rf-table-wrapper td:last-child {
+	padding-right: 0;
 }
 .rf-table-wrapper tr:last-child td {
 	border-bottom: none;

package/styles/global.css

@@ -113,7 +113,7 @@ th {
 	text-align: left;
 	font-weight: 600;
 	padding: 0.625rem 1rem;
-	border-bottom: 2px solid var(--rf-color-border);
+	border-bottom: 1px solid var(--rf-color-border);
 	font-size: 0.8rem;
 	text-transform: uppercase;
 	letter-spacing: 0.04em;

package/styles/layouts/default.css

@@ -25,6 +25,13 @@
 	margin: 0;
 	line-height: 1;
 }
+.rf-header h1, .rf-header h2, .rf-header h3 {
+	margin: 0;
+	font-size: 1.2rem;
+	font-weight: 600;
+	letter-spacing: -0.02em;
+	line-height: 1;
+}
 .rf-header a {
 	display: inline-block;
 	color: inherit;

package/styles/runes/api.css

@@ -1,73 +1,30 @@
 /* Api */
-.rf-api {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
 .rf-api__header {
-	padding: 1rem 1.25rem;
-	background: var(--rf-color-surface-hover);
-	border-bottom: 1px solid var(--rf-color-border);
+	padding: 0.5rem 0;
 }
 .rf-api__method {
-	font-weight: 700;
-	font-size: 0.75rem;
-	padding: 0.25rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
 	font-family: var(--rf-font-mono);
 }
 .rf-api__path {
-	font-family: var(--rf-font-mono);
-	font-size: 0.9375rem;
-	font-weight: 500;
-	color: var(--rf-color-text);
+	background: none;
 }
 .rf-api__auth {
 	margin-left: auto;
-	font-size: 0.75rem;
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface-active);
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
 }
-/* Method colors driven by data-method attribute from engine */
-[data-method="GET"] .rf-api__method { color: var(--rf-color-success); background: var(--rf-color-success-bg); }
-[data-method="POST"] .rf-api__method { color: var(--rf-color-info); background: var(--rf-color-info-bg); }
-[data-method="PUT"] .rf-api__method { color: var(--rf-color-warning); background: var(--rf-color-warning-bg); }
-[data-method="PATCH"] .rf-api__method { color: var(--rf-color-warning); background: var(--rf-color-warning-bg); }
-[data-method="DELETE"] .rf-api__method { color: var(--rf-color-danger); background: var(--rf-color-danger-bg); }
-[data-method="HEAD"] .rf-api__method { color: var(--rf-color-muted); background: var(--rf-color-surface); }
-[data-method="OPTIONS"] .rf-api__method { color: var(--rf-color-muted); background: var(--rf-color-surface); }
 .rf-api__body {
-	padding: 1.25rem;
-}
-.rf-api__body table {
-	width: 100%;
-	border-collapse: collapse;
-	margin: 1rem 0;
-}
-.rf-api__body th {
-	text-align: left;
-	padding: 0.5rem 0.75rem;
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	color: var(--rf-color-muted);
-	border-bottom: 2px solid var(--rf-color-border);
-}
-.rf-api__body td {
-	padding: 0.5rem 0.75rem;
-	border-bottom: 1px solid var(--rf-color-border);
-	font-size: 0.875rem;
+	padding: 0;
 }
 .rf-api__body pre {
 	border-radius: var(--rf-radius-md);
 	margin: 1rem 0;
 }
 .rf-api__body blockquote {
-	border-left: 3px solid var(--rf-color-warning-border);
-	background: var(--rf-color-warning-bg);
-	padding: 0.75rem 1rem;
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
-	margin: 1rem 0;
+	border-left: 3px solid var(--rf-color-border);
+	padding: 0.5rem 1rem;
+	margin: 0.75rem 0;
+	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
+	font-size: 0.9375rem;
+}
+.rf-api__body blockquote::before {
+	content: none;
 }

package/styles/runes/bond.css

@@ -1,9 +1,9 @@
 /* Bond */
 .rf-bond {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	gap: 1rem;
-	margin: 1rem 0;
+	gap: 0.75rem;
 }
 .rf-bond > span[property="from"],
 .rf-bond > span[property="to"] {
@@ -43,7 +43,7 @@
 	border-right: 6px solid var(--rf-color-border);
 }
 .rf-bond__body {
-	flex: 1;
+	width: 100%;
 	font-size: 0.875rem;
 	color: var(--rf-color-muted);
 }

package/styles/runes/budget.css

@@ -1,15 +1,29 @@
 /* Budget */
-.rf-budget__header {
+.rf-budget__meta {
 	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+}
+.rf-budget__preamble {
 	margin-bottom: 1.5rem;
 }
-.rf-budget__title {
-	margin: 0 0 0.5rem;
-	font-size: 1.25rem;
-	font-weight: 700;
-	color: var(--rf-color-text);
+.rf-budget .rf-budget__eyebrow {
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.375rem;
+}
+.rf-budget__headline {
+	margin-top: 0;
+	margin-bottom: 0.25rem;
+}
+.rf-budget .rf-budget__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+	max-width: 40rem;
 }
 
 /* Categories */

package/styles/runes/chart.css

@@ -2,6 +2,7 @@
 .rf-chart {
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
+	margin: 0;
 }
 .rf-chart__title {
 	font-weight: 600;

package/styles/runes/codegroup.css

@@ -25,10 +25,11 @@
 .rf-codegroup__dot:nth-child(1) { background: #ef4444; }
 .rf-codegroup__dot:nth-child(2) { background: #f59e0b; }
 .rf-codegroup__dot:nth-child(3) { background: #22c55e; }
-.rf-codegroup__title {
+.rf-codegroup__title[data-section="title"] {
 	margin-left: 0.5rem;
 	font-family: var(--rf-font-mono);
 	font-size: 0.8rem;
+	font-weight: normal;
 	opacity: 0.7;
 }
 .rf-codegroup ul {
@@ -48,7 +49,7 @@
 	padding: 0.5rem 1rem;
 	font-size: 0.8rem;
 	font-family: var(--rf-font-mono);
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(255, 255, 255, 0.7);
 	background: none;
 	border: none;
 	border-bottom: 2px solid transparent;
@@ -56,12 +57,20 @@
 	transition: color 200ms ease, border-color 200ms ease;
 	white-space: nowrap;
 }
-.rf-codegroup__tab:hover {
+.rf-codegroup__tab:hover,
+.rf-codegroup button[data-state="inactive"]:hover {
 	color: rgba(255, 255, 255, 0.8);
 }
-.rf-codegroup__tab--active {
+.rf-codegroup__tab--active,
+.rf-codegroup button[data-state="active"] {
 	color: rgba(255, 255, 255, 0.95);
-	border-bottom-color: var(--rf-color-primary);
+	border-bottom-color: var(--rf-color-code-text);
+}
+.rf-codegroup button[data-state="inactive"] {
+	color: rgba(255, 255, 255, 0.7);
+}
+.rf-codegroup .rf-codeblock {
+	margin: 0;
 }
 .rf-codegroup pre {
 	margin: 0;

package/styles/runes/design-context.css

@@ -1,24 +1,21 @@
 /* Design Context — unified token card wrapper */
-.rf-design-context {
-	border: 1px solid var(--rf-color-border, #e5e7eb);
-	border-radius: 0.75rem;
-	overflow: hidden;
-}
 .rf-design-context__title {
-	font-size: 1.125rem;
-	font-weight: 600;
-	padding: 1rem 1.25rem;
-	border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
-	background: var(--rf-color-bg-muted, #f9fafb);
+	font-size: 1.25rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
 }
 .rf-design-context__sections {
 	display: flex;
 	flex-direction: column;
+	gap: 1.5rem;
 }
-.rf-design-context__sections > * {
-	padding: 1.25rem;
-	margin: 0;
-}
-.rf-design-context__sections > * + * {
-	border-top: 1px dashed var(--rf-color-border, #e5e7eb);
+
+/* Children inside design-context: remove card styling */
+.rf-palette--in-design-context,
+.rf-typography--in-design-context,
+.rf-spacing--in-design-context,
+.rf-swatch--in-design-context {
+	background: none;
+	border-radius: 0;
+	padding: 0;
 }