@motion-proto/live-tokens 0.61.0 → 0.63.0

package/src/live-tokens/data/themes/midnight-study.json

@@ -1,12 +1,12 @@
 {
   "name": "Midnight Study",
   "createdAt": "2026-08-13T10:21:46.867Z",
-  "updatedAt": "2026-08-19T22:39:32.785Z",
+  "updatedAt": "2026-08-27T17:03:51.623Z",
   "schemaVersion": 4,
   "colorsAndType": {
     "name": "Midnight Study",
-    "createdAt": "2026-08-12T20:13:46.264Z",
-    "updatedAt": "2026-08-13T14:14:20.015Z",
+    "createdAt": "2026-08-27T17:01:37.984Z",
+    "updatedAt": "2026-08-27T17:01:37.984Z",
     "editorConfigs": {
       "Brand": {
         "baseColor": {
@@ -2267,10 +2267,6 @@
       }
     },
     "cssVariables": {
-      "--gradient-1": "linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%)",
-      "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
-      "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
-      "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
       "--badge-trait-surface": "var(--surface-brand)",
       "--badge-trait-text": "var(--text-brand)",
       "--badge-trait-text-font-family": "var(--font-sans)",
@@ -2321,7 +2317,15 @@
       "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
       "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
       "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)",
+      "--gradient-1": "linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%)",
+      "--gradient-1-stops": "var(--color-brand-400) 0%, var(--color-brand-700) 100%",
+      "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
+      "--gradient-2-stops": "var(--color-special-500) 0%, var(--color-brand-500) 100%",
+      "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
+      "--gradient-3-stops": "var(--color-brand-500) 0%, var(--color-accent-500) 100%",
+      "--gradient-4": "linear-gradient(180deg, color-mix(in srgb, var(--color-canvas-600) 49%, transparent) 0%, var(--color-canvas-850) 14.2%, var(--color-canvas-900) 83.8%)",
+      "--gradient-4-stops": "color-mix(in srgb, var(--color-canvas-600) 49%, transparent) 0%, var(--color-canvas-850) 14.2%, var(--color-canvas-900) 83.8%"
     },
     "fontSources": [
       {
@@ -2474,25 +2478,6 @@
         ]
       }
     ],
-    "harmonyAxes": [
-      {
-        "hue": 300,
-        "family": "Brand"
-      },
-      {
-        "hue": 340,
-        "family": "Accent"
-      },
-      {
-        "hue": 268,
-        "family": "Canvas"
-      },
-      {
-        "hue": 210,
-        "family": null
-      }
-    ],
-    "schemaVersion": 3,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -2546,15 +2531,40 @@
         "stops": [
           {
             "position": 0,
-            "color": "--color-canvas-600"
+            "color": "--color-canvas-600",
+            "opacity": 49
           },
           {
-            "position": 100,
+            "position": 14.2,
+            "color": "--color-canvas-850",
+            "opacity": 100
+          },
+          {
+            "position": 83.8,
             "color": "--color-canvas-900"
           }
         ]
       }
-    ]
+    ],
+    "harmonyAxes": [
+      {
+        "hue": 300,
+        "family": "Brand"
+      },
+      {
+        "hue": 340,
+        "family": "Accent"
+      },
+      {
+        "hue": 268,
+        "family": "Canvas"
+      },
+      {
+        "hue": 210,
+        "family": null
+      }
+    ],
+    "schemaVersion": 5
   },
   "componentConfigs": {
     "badge": {
@@ -2886,10 +2896,10 @@
     "card": {
       "name": "midnight-study",
       "component": "card",
-      "createdAt": "2026-05-10T19:26:31.704Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "createdAt": "2026-08-27T17:02:30.403Z",
+      "updatedAt": "2026-08-27T17:02:30.403Z",
       "aliases": {
-        "--card-default-surface": "color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent)",
+        "--card-default-surface": "--gradient-4",
         "--card-default-border": "--border-neutral",
         "--card-default-border-width": "--border-width-1",
         "--card-default-radius": "--radius-sm",
@@ -2899,14 +2909,14 @@
         "--card-default-header-padding-bottom": "--space-8",
         "--card-default-header-padding-left": "--space-12",
         "--card-default-header-gap": "--space-6",
-        "--card-default-body-padding": "--space-10",
-        "--card-default-body-padding-top": "--space-10",
-        "--card-default-body-padding-right": "--space-12",
-        "--card-default-body-padding-bottom": "--space-10",
-        "--card-default-body-padding-left": "--space-12",
+        "--card-default-body-padding": "--space-16",
+        "--card-default-body-padding-top": "--space-16",
+        "--card-default-body-padding-right": "--space-20",
+        "--card-default-body-padding-bottom": "--space-48",
+        "--card-default-body-padding-left": "--space-20",
         "--card-default-shadow": "--shadow-sm",
         "--card-default-blur": "--blur-none",
-        "--card-default-header-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent)",
+        "--card-default-header-surface": "color-mix(in srgb, var(--color-brand-700) 60%, transparent)",
         "--card-default-title": "--text-primary",
         "--card-default-title-font-family": "--font-sans",
         "--card-default-title-font-size": "--font-size-2xl",
@@ -2922,7 +2932,8 @@
         "--card-hover-shadow": "--shadow-md",
         "--card-hover-border-active": "--card-default-border",
         "--card-hover-shadow-active": "--card-default-shadow"
-      }
+      },
+      "config": {}
     },
     "codesnippet": {
       "name": "midnight-study",
@@ -3453,8 +3464,8 @@
     "panel": {
       "name": "midnight-study",
       "component": "panel",
-      "createdAt": "2026-06-01T09:34:52.417Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "createdAt": "2026-08-27T17:03:50.744Z",
+      "updatedAt": "2026-08-27T17:03:50.744Z",
       "aliases": {
         "--panel-frame-border": "--border-neutral",
         "--panel-frame-border-width": "--border-width-1",
@@ -3478,10 +3489,11 @@
             ]
           }
         },
-        "--panel-stage-padding": "--space-10",
-        "--panel-stage-inline-padding": "--space-10",
-        "--panel-stage-gap": "--space-12"
-      }
+        "--panel-stage-padding": "--space-16",
+        "--panel-stage-inline-padding": "--space-24",
+        "--panel-stage-gap": "--space-16"
+      },
+      "config": {}
     },
     "progressbar": {
       "name": "midnight-study",
@@ -3576,7 +3588,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3605,7 +3617,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3634,7 +3646,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/ocean.json

@@ -3529,7 +3529,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3558,7 +3558,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3587,7 +3587,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/royal-velvet.json

@@ -3560,7 +3560,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3589,7 +3589,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3618,7 +3618,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/sketchy.json

@@ -3543,7 +3543,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3572,7 +3572,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3601,7 +3601,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/spring-meadow.json

@@ -3516,7 +3516,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3545,7 +3545,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3574,7 +3574,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/sunset.json

@@ -3568,7 +3568,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3597,7 +3597,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3626,7 +3626,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/system/components/Card.svelte

@@ -3,6 +3,9 @@
     icon?: string;
     iconColor?: string;
     title?: string;
+    /** `bare` drops the header. The frame and body keep every token the default
+        variant uses, so padding, stroke and fill stay editable. */
+    variant?: 'default' | 'bare';
     size?: 'default' | 'compact';
     /** false → the card stops pinning body typography so the consumer fully owns slotted content's styling. */
     prose?: boolean;
@@ -20,6 +23,7 @@
     icon = '',
     iconColor = 'var(--text-secondary)',
     title = '',
+    variant = 'default',
     size = 'default',
     prose = true,
     flush = false,
@@ -35,16 +39,25 @@
   let hoverShadow = $derived(
     hover === undefined ? undefined : hover ? 'var(--card-hover-shadow)' : 'var(--card-default-shadow)',
   );
+
+  let showHeader = $derived(variant !== 'bare' && Boolean(icon || title));
+
+  $effect(() => {
+    if (import.meta.env.DEV && variant === 'default' && !icon && !title) {
+      console.warn('[live-tokens] <Card> has no icon or title. Use variant="bare" to declare a headerless card.');
+    }
+  });
 </script>
 
 <div
   class="card {className}"
+  class:bare={variant === 'bare'}
   class:compact={size === 'compact'}
   style:--card-color={iconColor}
   style:--card-hover-border-active={hoverBorder}
   style:--card-hover-shadow-active={hoverShadow}
 >
-  {#if icon || title}
+  {#if showHeader}
     <div class="card-header">
       {#if icon}
         <i class="{icon} card-icon"></i>
@@ -68,17 +81,22 @@
     --card-default-border: var(--border-neutral);
     --card-default-border-width: var(--border-width-1);
     --card-default-radius: var(--radius-lg);
+    /* Every side tracks its base. A declared side always beats the fallback
+       themed-padding emits, so naming a literal step here left the base token
+       inert: merging split padding back to one value cleared the side aliases
+       and the card kept the old geometry. The asymmetry is a themed choice now,
+       carried by per-side aliases that override these outright. */
     --card-default-header-padding: var(--space-16);
-    --card-default-header-padding-top: var(--space-12);
-    --card-default-header-padding-right: var(--space-20);
-    --card-default-header-padding-bottom: var(--space-12);
-    --card-default-header-padding-left: var(--space-20);
+    --card-default-header-padding-top: var(--card-default-header-padding);
+    --card-default-header-padding-right: var(--card-default-header-padding);
+    --card-default-header-padding-bottom: var(--card-default-header-padding);
+    --card-default-header-padding-left: var(--card-default-header-padding);
     --card-default-header-gap: var(--space-8);
     --card-default-body-padding: var(--space-16);
-    --card-default-body-padding-top: var(--space-16);
-    --card-default-body-padding-right: var(--space-20);
-    --card-default-body-padding-bottom: var(--space-16);
-    --card-default-body-padding-left: var(--space-20);
+    --card-default-body-padding-top: var(--card-default-body-padding);
+    --card-default-body-padding-right: var(--card-default-body-padding);
+    --card-default-body-padding-bottom: var(--card-default-body-padding);
+    --card-default-body-padding-left: var(--card-default-body-padding);
     --card-default-shadow: var(--shadow-sm);
     --card-default-blur: var(--blur-none);
     --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);

package/src/system/components/FloatingTokenTags.css

@@ -3,12 +3,14 @@
  * animations are hardcoded so token edits don't repaint our chrome. The
  * exceptions are intentional and ARE the demo: the central box's
  * surface/radius/border (set inline), the dropdown (rendered through
- * <MenuSelect>), and elevation, which reads from the --shadow-* scale.
+ * <MenuSelect>), elevation, which reads from the --shadow-* scale, and the
+ * zap colour, which tracks --text-accent so the beam stays on-theme.
  * File is global; keep selectors `ftt-` prefixed.
  */
 
 .ftt-stage {
   --ftt-contrast-color: var(--color-white);
+  --ftt-zap-color: var(--text-accent);
   --ftt-string-opacity: 0.5;
   position: relative;
   width: 100%;
@@ -85,7 +87,7 @@
 }
 
 .ftt-string.ftt-live {
-  stroke: #ff8eeb;
+  stroke: var(--ftt-zap-color);
   opacity: 1;
 }
 
@@ -103,18 +105,18 @@
 }
 
 /* --- Energy ball ---------------------------------------------------------- */
-/* Colour must match `.ftt-string.ftt-live` so the beam reads as a continuous
-   trail, not a colour-shifting projectile. */
+/* Shares --ftt-zap-color with `.ftt-string.ftt-live` so the beam reads as a
+   continuous trail, not a colour-shifting projectile. */
 .ftt-energy-ball {
   position: absolute;
   width: 0.875rem;
   height: 0.875rem;
   translate: -50% -50%;
   border-radius: 9999px;
-  background: #ff8eeb;
+  background: var(--ftt-zap-color);
   box-shadow:
-    0 0 8px  2px #ff8eeb,
-    0 0 18px 4px #ff8eeb;
+    0 0 8px  2px var(--ftt-zap-color),
+    0 0 18px 4px var(--ftt-zap-color);
   pointer-events: none;
   opacity: 0;
   z-index: 6;
@@ -233,7 +235,7 @@
   z-index: 30;
 }
 .ftt-tag-trigger:focus-visible {
-  outline: 2px solid #f31fdb;
+  outline: 2px solid var(--ftt-zap-color);
   outline-offset: 3px;
   border-radius: 9999px;
 }

package/src/system/components/ImageLightbox.svelte

@@ -728,7 +728,8 @@
 
 <style>
   :global(:root) {
-    /* thumbnail (closed inline) + animated modal stage */
+    /* thumbnail (closed inline) + animated modal stage; the fill is the
+       thumbnail's alone — the open stage rides the overlay */
     --imagelightbox-tile-surface:          var(--color-transparent);
     --imagelightbox-tile-radius:           var(--radius-2xl);
     --imagelightbox-tile-border:           var(--color-transparent);
@@ -813,13 +814,15 @@
     border: 0;
   }
 
+  /* No tile fill here: the open stage sits on the near-opaque overlay, which
+     already backs transparent art. Painting the fill too would band the scrim
+     wherever the image's aspect leaves the stage box unfilled. */
   .image-lightbox-stage {
     position: fixed;
     z-index: var(--z-modal);
     cursor: zoom-out;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    background: var(--imagelightbox-tile-surface);
   }
 
   .image-lightbox-clip {

package/src/system/components/SectionDivider.svelte

@@ -243,7 +243,7 @@
     --sectiondivider-lg-description: var(--text-alternate);
     --sectiondivider-lg-eyebrow: var(--text-brand);
     --sectiondivider-lg-border: var(--color-transparent);
-    --sectiondivider-lg-title-outline-color: var(--surface-canvas-lowest);
+    --sectiondivider-lg-title-outline-color: var(--color-transparent);
     --sectiondivider-lg-hairline-color: var(--border-brand-medium);
 
     /* Medium */
@@ -274,7 +274,7 @@
     --sectiondivider-md-description: var(--text-secondary);
     --sectiondivider-md-eyebrow: var(--text-tertiary);
     --sectiondivider-md-border: var(--color-transparent);
-    --sectiondivider-md-title-outline-color: var(--surface-accent-lowest);
+    --sectiondivider-md-title-outline-color: var(--color-transparent);
     --sectiondivider-md-hairline-color: var(--border-brand-medium);
 
     /* Small */
@@ -305,7 +305,7 @@
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
     --sectiondivider-sm-border: var(--color-transparent);
-    --sectiondivider-sm-title-outline-color: color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent);
+    --sectiondivider-sm-title-outline-color: var(--color-transparent);
     --sectiondivider-sm-hairline-color: color-mix(in srgb, var(--border-brand-medium) 50%, transparent);
 
     /* Intrinsic defaults. These keys cascade to `:root` via the editor's

package/src/system/components/SegmentedControl.svelte

@@ -152,25 +152,27 @@
      icon size) all read through these default names, so rebinding them
      here is enough — no per-state small token explosion. Per-side padding
      overrides are rebound too so split-padding edits at small don't leak
-     through to default size. Font-weight and color are intentionally NOT
+     through to default size; each carries the same fallback themed-padding
+     emits, so merging the small padding back to one value leaves the base
+     token in charge instead of binding to a name nothing sets. Font-weight and color are intentionally NOT
      rebound: weight differences are state-driven (selected = semibold),
      colors are state-driven too. */
   .segmented-control.small {
     --segmentedcontrol-bar-padding: var(--segmentedcontrol-bar-small-padding);
-    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top);
-    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right);
-    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom);
-    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left);
+    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left, var(--segmentedcontrol-bar-small-padding));
     --segmentedcontrol-bar-radius: var(--segmentedcontrol-bar-small-radius);
 
     --segmentedcontrol-divider-inset: var(--segmentedcontrol-small-divider-inset);
     --segmentedcontrol-divider-thickness: var(--segmentedcontrol-small-divider-thickness);
 
     --segmentedcontrol-option-padding: var(--segmentedcontrol-option-small-padding);
-    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top);
-    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right);
-    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom);
-    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left);
+    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left, var(--segmentedcontrol-option-small-padding));
     --segmentedcontrol-option-gap: var(--segmentedcontrol-option-small-gap);
 
     /* Icon size has a single source-of-truth token now; text size/line-height

package/src/system/styles/tokens.css

@@ -681,11 +681,34 @@
   --code-line-height: var(--line-height-normal);
   --code-letter-spacing: var(--letter-spacing-normal);
 
-  --editorial-font-family: var(--font-editorial);
-  --editorial-font-size: var(--font-size-md);
-  --editorial-font-weight: var(--font-weight-normal);
-  --editorial-line-height: var(--line-height-normal);
-  --editorial-letter-spacing: var(--letter-spacing-normal);
+  /* Editorial — the long-reading role. `md` is the reading step and takes the
+     most open leading; every step away from it tightens by one, so a lede or a
+     pull quote is not set at reading leading. Sizes stay inside the xs–xl band
+     the responsive scale leaves constant, so an article does not resize itself
+     between breakpoints. */
+  --editorial-xl-font-family: var(--font-editorial);
+  --editorial-xl-font-size: var(--font-size-xl);
+  --editorial-xl-font-weight: var(--font-weight-normal);
+  --editorial-xl-line-height: var(--line-height-tighter);
+  --editorial-xl-letter-spacing: var(--letter-spacing-normal);
+
+  --editorial-lg-font-family: var(--font-editorial);
+  --editorial-lg-font-size: var(--font-size-lg);
+  --editorial-lg-font-weight: var(--font-weight-normal);
+  --editorial-lg-line-height: var(--line-height-tight);
+  --editorial-lg-letter-spacing: var(--letter-spacing-normal);
+
+  --editorial-md-font-family: var(--font-editorial);
+  --editorial-md-font-size: var(--font-size-md);
+  --editorial-md-font-weight: var(--font-weight-normal);
+  --editorial-md-line-height: var(--line-height-normal);
+  --editorial-md-letter-spacing: var(--letter-spacing-normal);
+
+  --editorial-sm-font-family: var(--font-editorial);
+  --editorial-sm-font-size: var(--font-size-sm);
+  --editorial-sm-font-weight: var(--font-weight-normal);
+  --editorial-sm-line-height: var(--line-height-tight);
+  --editorial-sm-letter-spacing: var(--letter-spacing-normal);
 
   /* Eyebrow — values track the existing .eyebrow class in src/app/Home.svelte. */
   --eyebrow-font-family: var(--font-sans);

package/template/src/pages/Home.svelte

@@ -12,8 +12,7 @@
 
 <div class="home">
   <section class="stub">
-    <Card>
-      <span class="eyebrow">Your app lives here</span>
+    <Card variant="bare">
       <h1>Home</h1>
       <p>
         Replace this with your own content. Edit <code>src/pages/Home.svelte</code>
@@ -46,15 +45,6 @@
     grid-column: 4 / span 6;
   }
 
-  .eyebrow {
-    display: block;
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-normal);
-    text-transform: uppercase;
-    color: var(--text-tertiary);
-    margin-bottom: var(--space-8);
-  }
-
   h1 {
     font-family: var(--font-display);
     font-size: var(--font-size-4xl);